The Complete Guide to Using Arrays in JavaScript
Tags: javascript, tutorial, beginners, webdev
Published: 2020-01-27 00:05:31

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Arrays are lists of objects that can be manipulated in various ways. Each entry can be accessed by their own index. Arrays can be combined in various ways and they can be also be nested in each other, letting us create multi-dimensional arrays. We can make arrays out of a collection of any objects. They can also be destructed into variables so each entry can be accessed and manipulated individually. JavaScript arrays are zero-indexed so the starting index of each array is always zero. This means that index 0 has the first element of the array.

Arrays can contain any type of object. They do not have to be the same type of objects. Also if an array entry with a given index hasn’t been assigned yet, it has an `undefined` value.

Examples of things that can be stored with arrays include:

*   to-do list
*   recipe list
*   address book contacts
*   shopping list
*   grocery list
*   your appointments
*   anything else that can be entered into a list.

Without arrays, all we can do is declare variables for each entry individually which is a real pain and not practical.

* * *

Declaring Arrays
================

To declare arrays, we use the `let` or `const` keyword — like this:

```javascript
let arr = [1,2,3];
const arr2 = [1,2,3];
```

We use `let` for variables and `const` for arrays that don’t change.

Also, we can declare the arrays first and then insert the values later, like this:

```javascript
let arr = []
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
```

This is the same as `let arr = [1,2,3]` since we have the same entries and the same order in both `arr` arrays.

We can declare arrays with different type of values in the same array, like this:

```javascript
let arr = [1, 'chicken', {foo: 'bar'}];
```

As you can see, it doesn’t matter what kind of data we put in the array. However, we do have to be careful to avoid data type errors when we traverse or manipulate arrays by checking the type and content of the objects, and whether any entry is `null` or `undefined` .

Another way to create an array is the `new` keyword, like this:

```javascript
let names = new Array('Bob','Jane', 'John');
```

* * *

Accessing Array Data
====================

We access array items by their index. For example, to get the second element of an array, we write:

```javascript
arr[1]
```

If `arr` is assigned to `[1, ‘chicken’, {foo: ‘bar’}];` , then `arr[1]` would be `'chicken'` .

* * *

Get Array Size
==============

Array is an object that has the `length` property that we can get the size of the array, so the `names` array we have above would have a `length` of three. We write the `names.length` to access the length of the array.

* * *

Multidimensional Arrays
=======================

In JavaScript, multidimensional arrays are just an array nested in another array. So, to declare a multidimensional array, we can use the same declaration methods as above, except we replace the entities inside with arrays. For example, we can write:

```javascript
let multiArray = [[1,2,3], [4,5,6]];
```

or:

```javascript
let multiArray = new Array([1,2,3], [4,5,6]);
```

We can also write:

```javascript
let multiArray = [];
multiArray[0] = [];
multiArray[0][0] = 1;
multiArray[0][1] = 2;
multiArray[0][2] = 3;
multiArray[1] = [];
multiArray[1][0] = 4;
multiArray[1][1] = 5;
multiArray[1][2] = 6;
```

All three of these pieces of code are equivalent.

We access multidimensional array entries by adding another square bracket with the index of the inner array. For example, if we want to get the second item of the first array in `multiArray` then we write:

```javascript
multiArray[0][1]
```

* * *

Traversing Arrays
=================

We can traverse the values of arrays with loops. Loops are pieces of code that repeat until the ending condition is met. In JavaScript, we have the `for` loop, `while` loop and the `do...while` loop.

For Loop
--------

With the `for` loop, given that we have the `name` array, we can traverse the loop by running:

```javascript
let names = new Array('Bob','Jane', 'John');
for (let i = 0; i < names.length; i++){
  console.log(names[i]);
}
```

A `for` loop is usually written with the starting condition as the first statement, then the ending condition in the second statement, and the index changing condition in the third statement. The statements are separated by the semicolons. Because arrays start with index zero in JavaScript, we terminate the loop when the array’s index reaches one less than the array’s length.

While Loop
----------

`while` loop will loop whenever a condition stays true.

For example, the loop below will run if the index number `i` is less than three:

```javascript
const array = [1,2,3];
let i = 0;
while(i < array.length){
  console.log(i);
}
```

If the condition in the parentheses is never true, then the loop content will never run.

Do While Loop
-------------

`do...while` loop will always execute the first iteration.

```javascript
const array = [1,2,3];
let i = 0;
do{
  console.log(i);
}
while(i < array.length)
```

In the example above, it will at least log 0, but it will also log 1 and 2 in this case since those two numbers are less than three.

With the above loops, you can call `break` to stop the loop or `return` before the loop is completely finished.

```javascript
//do while loop
const array = [1,2,3];
let i = 0;
do{
  console.log(i);  
  if (i == 1}{    
    break;  
  }
}
while(i < array.length)

//while loop
i = 0;
while(i < array.length){  
  if (i == 1){    
    break;  
  }
  console.log(i);
}

//for loop
for (let j = 0; j < array.length; j++){  
  if (j == 1){
    break;
  }
  console.log(j);
}
```

In the above examples, you will not see two logged.

An example of returning from within the loop:

```javascript
const loop = ()=>{
  const array = [1,2,3];  
  for (let j = 0; j < array.length; j++){       
    if (j == 1){
      return j;
    }
    console.log(j);
  }
}
loop() //returns 1
```

You can also skip iterations with the `continue` statement:

```javascript
const array = [1,2,3];
for (let j = 0; j < array.length; j++){  
  if (j == 1){
    continue;
  }
  console.log(j) // 1 will be skipped;
}
```

* * *

Array Properties
================

Since an array is a JavaScript object. It is its own properties. Like any object in JavaScript, it has the `prototype` property which lets developers add methods and properties of an array object. The `constructor` property is the reference to the function that’s created by the array object’s prototype. The `length` returns the size of the array.

Array Methods
=============

To make manipulating arrays easy, the JavaScript’s standard library contains lots of array methods that make manipulating arrays easy. There are methods to find and filter items, and add and remove items in an array for example. There are also functions to combine multiple arrays into one.

These are some common array methods that you can use to do common operations with arrays.

Array.forEach
-------------

`forEach` will iterate through every entry of the array. You cannot break out of it or return a value from it. It takes a callback function where you can execute code.

Example:

```javascript
const array = [1,2,3];
  array.forEach(a =>{  console.log(a);
})
```

In the above example, all the numbers in the array will be logged.

Array.find
----------

`Array.find` will return the element in the array with the given condition. For example, if you want to get certain numbers from the array, you do this:

```javascript
const array = [1,2,3];
const num = array.find(a => a == 2); // returns 2
```

`find` returns a single result.

Array.findIndex
---------------

`Array.findIndex` will return the index of the element in the array with the given condition. It takes a callback function that returns a given condition. For example, if you want to get the index of a certain number from the array, you do this:

```javascript
const array = [1,2,3];
const num = array.findIndex(a => a == 2); // returns 1
```

Array.filter
------------

`Array.filter` will return an array of items that meet the given condition. It takes a callback function that returns a given condition. `filter` returns a new array.

For example, if you want to get the index of a certain number from the array, you do:

```javascript
const array = [1,2,3];
const numArray = array.filter(a => a == 2); // returns [2]
```

Array.includes
--------------

`Array.includes` checks if an item exists in an array. It takes a number or string which the function can compare.

```javascript
const array = [1,2,3];
const includesTwo = array.includes(2); // returns true
```

Array.some
----------

`Array.some`checks if some items meet the condition given. It takes a callback function which returns a boolean for the condition.

```javascript
const array = [1,2,3];
const includesTwo = array.some(a => a == 2); // returns true
const includesFive = array.some(a => a == 5); // returns false
```

Array.every
-----------

`Array.every` checks if every item meets the condition given. It takes a callback function which returns a boolean for the condition.

```javascript
const array = [1,2,3];
const everyElementIsTwo = array.every(a => a == 2); // returns false
const everyElementIsNumber = array.every(a => typeof a == 'number'); // returns true since every item in the array is a number
```

Array.isArray
-------------

`Array.isArray` checks if an object given is an array. It is a convenient way to check if an element is an array.

```javascript
const array = [1,2,3];
const notArray = {};
let objIsArray = Array.isArray(array); // true
objIsArray = Array.isArray(notArray); // false
```

Array.from(new Set(array))
--------------------------

`Set` is an object that cannot have duplicate entries. You can create a new `Set`from an array then convert it back to an array.

```javascript
const array = [1,2,2,3];
const arrayWithDups = Array.from(new Set(array)); //returns new array without duplicates, [1,2,3]
```

Array.slice(startIndex, endIndex)
---------------------------------

Returns a new array from `startIndex` to `endIndex — 1` .

Example:

```javascript
const arr = [1,2,3,4,5];
const newArr = arr.slice(0,2);
console.log(newArr); // returns [1,2]
```

Array.splice(index, numberOfItems)
----------------------------------

Remove array item in place with the given `index`, and then `numberOfItems` after it.

For example:

```javascript
const arr = [1,2,3,4,5];
arr.splice(0,2);
console.log(arr); // returns [3, 4, 5] since we specified that we remove item located at index 0 and 2 items after that.
```

Array.sort(sortFunction)
------------------------

`Array.sort` sorts array in place according to the condition you return in`sortFunction` .

The `sortFunction` should be in this format:

```javascript
const sortFunction = (a, b) {  
  if (a < b) {  
    return -1;  
  }  
  if (a > b) {  
    return 1;  
  }  
  // a must be equal to b  
  return 0;  
}
```

By default, if no `sortFunction` is specified, then the array items will be converted to a string and will be sorted according to the Unicode value of the string.

Array.fill(newElement, startIndex, endIndex)
--------------------------------------------

`Array.fill` will add or replace the element with the element specified from `startIndex` to `endIndex` . If no `startIndex` is defined then it will start from 0. If no `endIndex` is defined, then it will change values up to the end of the array.

For example:

```javascript
let array = [1, 2, 3, 4, 5];
console.log(array.fill(0, 2, 4));
// array is now [1, 2, 0, 0, 0]
console.log(array.fill(5, 1));
// array is now [1, 5, 5, 5, 5]
console.log(array.fill(6));
// array is now [6, 6, 6, 6, 6]
```

Recursively Flatten Array
-------------------------

`Array.flat` function does not do a good job of recursively flatten arrays. The depth is limited and it does not flatten all kinds of nested array structures. The better way to do it is to write a recursive function to do it.

```javascript
let arr1 = [1, 2, [3, 4], 5];
let arr2 = [1, 2, [3, 4], [5, [6,[7,]]]];

const flatten = (items) => {
  const flat = [];  items.forEach(item => {
    if (Array.isArray(item)) {
      flat.push(...flatten(item));
    } else {
      flat.push(item);
    }
  });  return flat;
}

console.log(flatten(arr1));
console.log(flatten(arr2));
```

Array.join(separator)
---------------------

`Array.join` will return a string by concatenating the entries after they are converted to string with `separator` between each entry. Works best with string and number arrays.

Example:

```javascript
const arr = [1,2,3];
console.log(arr.join(',')) // get '1,2,3'
const arr = ['1',2,3];
console.log(arr.join(',')) // get '1,2,3'
```

Array.indexOf(elementToFind)
----------------------------

`Array.indexOf`will return the first index of the `elementToFind` in the array. Works best with string and number arrays. If you want to find a non-string or number object, use `Array.findIndex` . Returns -1 is element is not found.

Example:

```javascript
const arr = [1,2,3];
console.log(arr.indexOf(1)); // returns 0
const arr2 = [1,1,2,3];
console.log(arr2.indexOf(1)) // still 0
```

Array.lastIndexOf()
-------------------

`Array.lastIndexOf`will return the last index of the `elementToFind` in the array. Works best with string and number arrays. Returns -1 is element is not found. The function also takes a starting index to start searching backward as a second parameter

Example:

```javascript
const arr = [1,2,3];
console.log(arr.indexOf(1)); // returns 0

const arr2 = [1,1,2,3];
console.log(arr2.indexOf(1)) // returns 1

const arr3 = [3,1,2,3]
console.log(arr3.lastIndexOf(3, 2)) // returns 0, start searching backwards from index 2
```

Array.push(newElement)
----------------------

`Array.push` adds a new element to an array.

Example:

```javascript
let arr = [1,2,3];
arr.push(4);
console.log(arr) // [1,2,3,4]
```

Array.pop()
-----------

`Array.pop` removes the last element of the array.

Example:

```javascript
let arr = [1,2,3,4];
arr.pop();
console.log(arr) // [1,2,3]
```

Array.map(mapFunction)
----------------------

`Array.map` returns a new array which transforms the existing array’s element by calling the `mapFunction` . `mapFunction` takes one argument, which is the array element.

Example:

```javascript
let arr = [1,2,3,4];
const newArr = arr.map(a=>a*2)
console.log(newArr) // [2,4,6,8]
```

Array.reduce(reduceFunction)
----------------------------

`Array.reduce` combines elements of an array to return a value by calling the `reduceFunction` on all the elements to combine them. `reduceFunction` takes two arguments, which is the current and next element in the array.

Example:

```javascript
const arr = [1,2,3,4];
const sum = arr.reduce((a,b)=>a+b);
console.log(sum); // returns 10
```

Array.reverse()
===============

`Array.reverse` returns a new array with the existing array’s elements in reverse order.

Example:

```javascript
const arr = [1,2,3,4];
console.log(arr.reverse()) // [4,3,2,1]
```

Now that we learned about arrays, we can do a lot more in our JavaScript programs. There’s a big world ahead of us!