Introduction to Arrays in JavaScript
Tags: javascript, webdev, tutorial, programming
Published: 2024-06-03 15:00:00

[Array](https://www.thedevspace.io/course/javascript-arrays) is a commonly used tool for storing data in a structured collection. There are two different syntaxes for creating arrays in JavaScript:

```javascript
let arr = new Array("Apple", "Orange", "Banana");

console.log(arr);
```

```text
[ 'Apple', 'Orange', 'Banana' ]
```

Don't forget the keyword `new` here. This is different from how we created strings using `String()` or created numbers with `Number()`. Array is not a primitive data type, it is a special kind of object, and `new` is how we can create a new instance of an object in JavaScript.

If this doesn't make sense, don't worry, we will get back to this topic after we've discussed [objects](https://www.thedevspace.io/course/javascript-objects) and the [Object-Oriented Programming](https://www.thedevspace.io/course/javascript-object-oriented-programming). For now, you only need to be familiar with the syntax.

The second method to create an array is to use a pair of square brackets, which is also referred to as the array literal:

```javascript
let arr = ["Apple", "Orange", "Banana"];

console.log(arr);
```

```text
[ 'Apple', 'Orange', 'Banana' ]
```

In most cases, the second syntax is used as it is the most convenient.

The elements inside the array can be any data type you want. For example, here is an array with numbers, `BigInt`, strings, Boolean values, `null`, `undefined`, arrays, objects, and even functions:

```javascript
// prettier-ignore
let arr = [
  100,                   // Number
  999999999999999999n,   // BigInt
  "Qwerty",              // String
  null,                  // null
  undefined,             // undefined
  [1, 2, 3],             // Array
  { name: "John Doe" },  // Object
  function doNothing() { // Function
    return null;
  },
];

console.log(arr);
```

```text
[
  100,
  999999999999999999n,
  'Qwerty',
  null,
  undefined,
  [ 1, 2, 3 ],
  { name: 'John Doe' },
  [Function: doNothing]
]
```

## Accessing an array element

You can retrieve an array element by specifying its index number.

```javascript
let arr = [5, 6, 7, 8];

console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
```

```text
5
6
7
8
```

It is important to note that the index starts from `0`, not `1`, so `a[0]` points to the first element, `a[1]` points to the second element, and so on.

Alternatively, you can use the `at()` method associated with arrays. For instance,

```javascript
let arr = [5, 6, 7, 8];

console.log(arr.at(0));
console.log(arr.at(1));
console.log(arr.at(2));
console.log(arr.at(3));
```

The `at()` method works the same as the `arr[<index>]` syntax, except when you need to retrieve the last item in the array.

Most other programming languages offer what is called the negative indexing, which allows you to retrieve the last item in an array with `arr[-1]`, but that is not possible in JavaScript. So for a long time, people's solution was to use the length of the array like this:

```javascript
let arr = [5, 6, 7, 8];

console.log(arr[arr.length - 1]);
```

```text
8
```

`arr.length` gives the number of elements in the array, which is 4 in this case. But remember the index starts from 0, so the index of the last item should be `arr.length - 1`, which gives 3.

Recently, the `at()` method was introduced to offer an easier solution, allowing you to use `at(-1)` to access the last item.

```javascript
let arr = [5, 6, 7, 8];

console.log(arr.at(-1));
```

```text
8
```

You can also change an array element using the assignment operator (`=`).

```javascript
let a = [5, 6, 7, 8];

a[1] = 100;

console.log(a);
```

```text
[ 5, 100, 7, 8 ]
```

## Adding and removing array elements

Besides `at()`, there are also methods that enable you to add or remove elements from the array.

- `pop()`

The `pop()` method removes the last item from the end of the array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.pop();

console.log(arr);
```

```text
[ 'Apple', 'Orange' ]
```

- `push()`

The `push()` method adds new items to the end of the array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.push("Plum");

console.log(arr);
```

```text
[ 'Apple', 'Orange', 'Banana', 'Plum' ]
```

- `shift()`

The `shift()` method removes the first element from the beginning of the array, and then shifts all other elements to lower indexes.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.shift();

console.log(arr);
```

```text
[ 'Orange', 'Banana' ]
```

- `unshift()`

The `unshift()` method moves all elements to higher indexes, and add a new item to the beginning of the array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.unshift("Plum");

console.log(arr);
```

```text
[ 'Plum', 'Apple', 'Orange', 'Banana' ]
```

In practice, the `shift()` and `unshift()` methods are much slower compared to `pop()` and `push()`, due to the shifting of the array elements. If possible, you should avoid working at the beginning of the array, and only use `pop()` and `push()` in your code.

## Concatenating arrays

JavaScript also allows you to concatenate multiple arrays together into one array using the `concat()` method. For example,

```javascript
let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach", "Pear"];

arr1 = arr1.concat(arr2);

console.log(arr1);
```

```text
[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]
```

The `concat()` method also enables you to join more than two arrays.

```javascript
let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach"];
let arr3 = ["Pear"];

arr1 = arr1.concat(arr2, arr3);

console.log(arr1);
```

```text
[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]
```

Alternatively, you can use the [spread syntax](https://www.thedevspace.io/course/javascript-rest-parameter-spread-syntax) (`...`).

```javascript
let arr1 = ["Apple", "Orange", "Banana"];
let arr2 = ["Plum", "Peach"];
let arr3 = ["Pear"];

let arr = [...arr1, ...arr2, ...arr3];

console.log(arr);
```

```text
[ 'Apple', 'Orange', 'Banana', 'Plum', 'Peach', 'Pear' ]
```

## Searching arrays

- `indexOf()` and `lastIndexOf()`

Using the `indexOf()` method, you can locate the first occurrence of the given item in the array.

```javascript
let arr = ["Apple", "Orange", "Orange"];

console.log(arr.indexOf("Orange"));
```

```text
1
```

Notice that there are two `"Orange"`s in this array, but only the location of its first occurrence is returned.

If the element does not exist in the array, the method will return `-1`.

```javascript
let arr = ["Apple", "Orange", "Banana"];

console.log(arr.indexOf("Peach"));
```

```text
-1
```

`lastIndexOf()` is the opposite of `indexOf()`. It returns the location of the last occurrence of the item.

```javascript
let arr = ["Apple", "Orange", "Orange"];

console.log(arr.lastIndexOf("Orange"));
```

```text
2
```

Similarly, if the element does not exist in the array, `-1` will be returned.

```javascript
let arr = ["Apple", "Orange", "Orange"];

console.log(arr.lastIndexOf("Peach"));
```

```text
-1
```

- `find()`

`find()` is one of the more advanced methods for arrays, as it searches the array based on a test function. If you are new to programming, and have no idea what a function is, you can go through the [function lessons](https://www.thedevspace.io/course/javascript-functions) first, and then come back to this topic.

```javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];

let answer = arr.find(testFunction);

// This example test function finds the first array element that is greater than 50
function testFunction(value, index, array) {
  return value > 50;
}

console.log(answer);
```

```text
667
```

The `find()` method will pass each item in the array to the test function, and the first element that passes the test will be returned.

The test function should accept three arguments, `value`, which corresponds to each element in the array, `index`, the index number of that element, and `array`, which is the entire array.

You will encounter many more helper functions like this that accept a predefined list of arguments, and some of them might be difficult to understand. In this case, you could print them out into the console using `console.log()`. This would help you understand what they are, and what you can do with them.

```javascript
let arr = [23, -5, 667, 1, -3, 6, 17, -69];

let answer = arr.find(testFunction);

// This example test function finds the first array element that is greater than 50
function testFunction(value, index, array) {
  console.log(`Value: ${value}`);
  console.log(`Index: ${index}`);
  console.log(`Array: ${array}`);
  console.log("\n");

  return value > 50;
}

console.log(answer);
```

```text
Value: 23
Index: 0
Array: 23,-5,667,1,-3,6,17,-69


Value: -5
Index: 1
Array: 23,-5,667,1,-3,6,17,-69


Value: 667
Index: 2
Array: 23,-5,667,1,-3,6,17,-69
```

- `filter()`

The `filter()` method is similar to `find()`, except instead of returning a single value that passes the test, `filter()` returns an array of values.

```javascript
let arr = [23, -5, 667, 150, -3, 60, 17, -69];

let answer = arr.filter(testFunction);

function testFunction(value, index, array) {
  return value > 50;
}

console.log(answer);
```

```text
[ 667, 150, 60 ]
```

- `every()`

The `every()` method iterates over the entire array, and examines if the element passes a test. If all element passes, `every()` returns `true`, and if not, `every()` returns `false`.

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

let answer = arr.every(testFunction);

// Check if all elements are greater than 0
function testFunction(value, index, array) {
  return value > 0;
}

console.log(answer);
```

```text
true
```

- `includes()`

The `includes()` method tests if a given value exists in the array.

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

let answer = arr.includes(100);

console.log(answer);
```

```text
false
```

You can also provide an index, which tells the `includes()` method to check if the value exists at the exact index.

```javascript
let arr = [100, 2, 3, 4, 5];

let answer = arr.includes(100, 2);

console.log(answer);
```

```text
false
```

Notice that even though `100` exists in the array, it does not exist at the index `2`, so the method returns `false`.

## Sorting arrays

JavaScript offers four different methods that allow you to sort the array, `sort()`, `toSorted()`, `reverse()`, and `toReversed()`.

### Sorting strings

By default, these methods are used to sort arrays with string values.

- `sort()` will sort the array alphabetically.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.sort();

console.log(arr);
```

```text
[ 'Apple', 'Banana', 'Orange' ]
```

- `reverse()` will reverse the array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

arr.reverse();

console.log(arr);
```

```text
[ 'Banana', 'Orange', 'Apple' ]
```

- `toSorted()` is just like `sort()`, except it returns the sorted result without altering the original array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

let sortedArr = arr.toSorted();

console.log(sortedArr);
console.log(arr);
```

```text
[ 'Apple', 'Banana', 'Orange' ]
[ 'Apple', 'Orange', 'Banana' ]
```

- `toReversed()` method is just like `reverse()`, except it returns the sorted result without altering the original array.

```javascript
let arr = ["Apple", "Orange", "Banana"];

let sortedArr = arr.toReversed();

console.log(sortedArr);
console.log(arr);
```

```text
[ 'Banana', 'Orange', 'Apple' ]
[ 'Apple', 'Orange', 'Banana' ]
```

### Sorting numbers

The `sort()` method can also be used to sort numbers, but it requires a bit more customization. Because by default, these methods will convert the numbers into strings, and then sort them alphabetically, which would give results like this:

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];

console.log(arr.toSorted());
```

```text
[ -1, 17,  2, 20, 21,  3, 45,  9 ]
```

To sort numbers, you must pass a compare function.

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];

arr.sort(compareFunction);

function compareFunction(a, b) {
  return a - b;
}

console.log(arr);
```

```text
[ -1,  2,  3,  9, 17, 20, 21, 45 ]
```

The compare function takes two input values, `a` and `b`, and return either a positive value, a negative value, or 0. The function compares all the values in the array, two numbers at a time.

- If the function returns positive, `b` will be placed before `a`.
- If the function returns negative, `a` will be placed before `b`.
- If the function returns 0, no changes will be made.

This example sort the array in a ascending order. To sort in the descending order, simply make the compare function return `b - a`.

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];

arr.sort(compareFunction);

function compareFunction(a, b) {
  return b - a;
}

console.log(arr);
```

```text
[ 45, 21, 20, 17, 9,  3,  2, -1 ]
```

## Iterating over an array

Another operation we often perform on arrays is iterating over all of its values. The most straightforward way to do this is with a [loop](https://www.thedevspace.io/course/javascript-for-loops). If you don't know what a loop is, please go through the linked lesson first.

### Using loops

Take a look at this example:

```javascript
for (let i = 0; i < a.length; i++) {
  . . .
}
```

`let i = 0` initiates the variable `i` which will be the index number of each array element. The index `i` starts from 0. `i` will increment by 1 for every iteration (`i++`, which is a shorthand for `i = i + 1`), until it reaches `a.length`.

`a.length` is the length of the array, which means the loop will terminate when `i` equals `a.length - 1`. Because for the next iteration, `i` will become `a.length`, which violates the condition `i < a.length`.

Besides using the index, you can also access each array element with a `for of` loop, which looks like this:

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];

for (let ele of arr) {
  console.log(ele);
}
```

```text
2
-1
45
3
21
17
9
20
```

### Using methods

There are also two built-in methods in JavaScript that allow you to iterate over the array without having to use a loop. This is one of the greatest features in JavaScript, because for most other programming languages, you will have to create the loop your self.

The first method is `forEach()`. Here is an example of calculating the sum of all array elements using the `forEach()` method.

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];
let sum = 0;

arr.forEach(calcSum);

function calcSum(value, index, array) {
  sum = sum + value;
}

console.log(sum);
```

```text
116
```

If you would like to perform some actions to each array element, and then return the transformed result, use the `map()` method. For example, here we are using `map()` to return an array whose elements are the square of the original value.

```javascript
let arr = [2, -1, 45, 3, 21, 17, 9, 20];
let sum = 0;

let squared = arr.map(calcSum);

function calcSum(value, index, array) {
  return value ** 2;
}

console.log(squared);
console.log(arr);
```

```text
[ 4, 1, 2025, 9, 441, 289, 81, 400 ]
[ 2, -1, 45,  3, 21, 17,  9, 20 ]
```

The `map()` method will return a new array with the transformed elements, and the original will not be changed.

## Matrix

Matrix is a concept that exists in both mathematics and computer science. It is defined as a two dimensional array with its elements arranged in rows and columns like this:

![Matrix](https://www.thedevspace.io/media/course/javascript/matrix.excalidraw.png)

It is possible for you to create such a structure using JavaScript by putting several smaller arrays inside a bigger array.

```javascript
let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
```

To retrieve an element from this matrix, you need to specify two indexes, `matrix[<row>][<col>]`.

```javascript
console.log(matrix[0][1]); // -> 2
console.log(matrix[1][0]); // -> 4
console.log(matrix[2][2]); // -> 9
```

## Further readings

- [What are the Data Types in JavaScript](https://www.thedevspace.io/course/javascript-data-types)
- [What are Maps and Sets in JavaScript](https://www.thedevspace.io/course/javascript-maps-sets)
- [What are Higher Order Functions in JavaScript](https://www.thedevspace.io/course/javascript-higher-order-functions)
- [JavaScript and Asynchronous Programming](https://www.thedevspace.io/course/javascript-asynchronous-programming)
- [How to Optimize Your Web App for Better Performance](https://www.thedevspace.io/course/miscellaneous-web-app-optimization)