🧢 Tags:: #JavaScript
πŸ—ƒResources:: [[]]
2023-01-07 - 15:03

Creating And Initializing Arrays

Arrays are objects that can hold multiple values or objects. To create an array, we simply use []

Creating An Array

let values = [ ];

Because we are using [] the values will be in an array.

Creating And Initialzing An Array

let values = [ 1, 2, 3, ];

Each item inside an array is called an element. So you can say values has 3 elements. This is the simplest way to create an array, but you can also create it with code.

Initialze Using Array.of()

let values = Array.of(1, 2, 3);

Making A Real Example

const values = ['a', 'b', 'c'];

console.log(values);  // (3) ['a', 'b', 'c']
// 0: "a"
// 1: "b"
// 2: "c"
// length: 3

console.log(typeof values);  // object
console.log(Array.isArray(values));  //true

We can use any data type inside an array. In this example, we are using strings. We can even mix and match different data types inside an array, but it's best practice to always use the same data type.

Array is not a built-in data type, if we wanted to find out if a variable was an array, we can use **console.log(Array.isArray(values));

Accessing Array Items

Array items are generally referred to as elements, but we might want to pull out an element to look at it, or we might want to change it.

Accessing An Array

let values = ['a', 'b', 'c'];
console.log(values[0]);  //a
console.log(values[1]);  //b
console.log(values[2]);  //c
console.log(values[3]);  //undefined

To access the first element, we use [] on values and the index of 0. Always remember that arrays are 0 based when it comes to indexing.

Changing Values

const values = ['a', 'b', 'c'];
values[0] = 'aaa';
console.log(values[0]);  // aaa

We can change any value in the array using [] notation.

Manipulating Arrays

Generally, arrays are manipulated by methods.


const values =[ 'a', 'b', 'c'];
console.log(values);  // a b c d

Push is a method that adds items to the end of the array.


const values = [ 'a', 'b', 'c'];
const last = values.pop();
console.log( last );  // c

Pop takes the last element off of an array.


const values = ['a', 'b', 'c'];
const first = values.shift();
console.log( first );  // a

Shift moves the entire array. You can think of shift as moving the entire array to the left one element and take the first value off the array.


const values = [ 'b', 'c'];
console.log( values );  // a b c

Unshift is the opposite of shift, as it adds things to the beginning of the array.

Slice() And Splice()

There are more methods that are extremely common when working with arrays. Slice creates a brand-new array that's based on some original array. Splice is used to insert or delete elements somewhere within the array.


const values = ['a', 'b', 'c'];
const newValues = values.slice(1,2);
console.log( newValues );  // b

When we log out new value we get our slice which is b item 2 which is 'c' is not included in the results. Even though we took our slice, it's important to remember that it left our original array the same. It essentially made a slice of the array without altering the original.

Splice() For Deleting

const values = ['a', 'b', 'c'];
values.splice(1, 1);
console.log( values );  // a c

Splice can also be used for inserting items.

Splice() For Inserting

const values = [ 'a', 'b', 'c'];
values.splice(1, 0, 'foo');
console.log( values );  // a foo b c

Array Searching And Looping

Many times we want to search through an array and find the index of some element. Sometimes this involves looping, some array methods will loop for you, but sometimes you want to get control over looping. You might want to perform some action at each element in an array. Or you might want to do a complex search and dig in through the element to find out what you're looking for by doing some kind of calculations to see if an element matches what you're looking for.


const values = ['a', 'b', 'c'];
console.log(values.indexOf('c'));  // 2
console.log(values.indexOf('d'));  // -1

IndexOf is a method that lets us get the index of a certain value in an array. When we search for something that doesn't exist, we get -1, it doesn't show us undefined. -1 shows that we did the search and nothing came up.


const values = ['a', 'b', 'c'];
const set = values.filter(function(item) {
	return item > 'b';
console.log(set);  // c

Filter method is another way to search through an array and creating a new array on values that fit some kind of criteria that you're looking for.


const values = ['a', 'bbb', 'c'];
const found = values.find(function(item) {
	return item.lenth > 1;
console.log( found );  // bbb

There is another similar method find, that'll look through each of the method array and find the first item that matches the criteria.


const values = ['a', 'b', 'c'];
values.forEach(function(item) {
// a b c

forEach lets us execute a function on each element of an array. For each element in the array, this function is called once. 1st time it'll be set to a, then b and so on. We are simply logging out each item.

Arrays In The DOM

When we're working with the DOM it's very common to use the arrays and array like objects.

Getting Containers In The DOM

const container =

console.log(container);  // HTMLCollection(8)

This returns something that's not officially an array, but it acts very much like one. We get an HTML Collection that is very similar to an array. (8) means it has 8 elements, there are 8 containers. When we open it in console, we can see all the containers present.

Changing Class Attributes With Arrays

const container =
containers[2].classList.add('d-none');  // d-none stands for display none
console.log(container);  // HTMLCollection(8)

We can use container[2] to, with [] having the number of container we want to manipulate to change the things we want in the container. In the example above, we just hide container 2. We can access all these elements because they are stored in this container's array.