Arrays

What is array?

Arrays are lists that store data in JavaScript.

Create an array

We can create an array by wrapping items in square brackets [].

let names = ["John", "Ana", "Peter"];

Variables that contain arrays can be declared with let or const.

Although variables declared with the const keyword cannot be reassigned, elements in an array declared with const remain mutable.

Meaning that we can change the contents of a const array, but cannot reassign a new array or a different value.

const students = ["John", "Ana", "Peter", "Noah"];

students[3] = "Mira";

console.log(students); // Output: ['John', 'Ana', 'Mira', 'Noah']

Copy an array

To copy arrays, we use spread operator

const itemsCopy = [...items];

Example

const arr1 = [1, 2, 3, 4, 5];
let arr2;
(function () {
  arr2 = [...arr1];
  arr1[0] = 10;
})();
console.log(arr2); // [ 1, 2, 3, 4, 5 ]

Access an array

Each element in an array has a numbered position known as its index, starting at 0.

We can access one item in an array using its index, with syntax myArray[0].

In the example below, the console will display e because the index is 1.

const hello = "Hello World";
console.log(hello[1]);
// Output: e

Update elements in array

We can also change an item in an array using its index, with syntax myArray[0] = 'new string';

Nested arrays

Arrays can be nested inside other arrays. To access the nested arrays we can use bracket notation with the index value

const nestedArray = [[5], [8, 10]];

console.log(nestedArray[1]); // Output: [8, 10]

Check length of array

We can check how many elements are in an array with the .length property.

console.log(array.length);
const students = ["John", "Ana", "Peter", "Noah"];

console.log(students.length);
// Output: 4

Arrays’ methods

Arrays have many methods that perform different task.

.push() Method

.push() allows us to add items to the end of an array.

const students = ["name 0", "name 1", "name 2"];

students.push("name 3", "name 4");

console.log(students);
// Output: ['name 0', 'name 1', 'name 2', 'name 3', 'name 4'];

.pop() Method

.pop() removes the last item of an array.

const students = ["name 0", "name 1", "name 2"];

const removed = students.pop();

console.log(students);
// Output: ['name 0', 'name 1']

console.log(removed);
// Output: name 2

.shift() Method

shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

const array1 = [1, 2, 3, 4, 5];

const firstElement = array1.shift();

console.log(array1);
// Output: Array [2, 3]

console.log(firstElement);
// Output: 1

.unshift() method

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Output: 5

console.log(array1);
// Output: Array [4, 5, 1, 2, 3]

.splice()

splice() method removes or replaces existing elements and/or adds new elements in place.

array.splice(indexToStart, numberOfIndices, "stringToAdd");

For example:

const months = ["Jan", "March", "April", "June"];

months.splice(1, 0, "Feb");
// inserts at index 1

console.log(months);
// Output: Array ["Jan", "Feb", "March", "April", "June"]

.concat()

concat() method creates a new array by merging existing arrays.

let a = [1, 2];
let b = [3, 4, 5];
let c = a.concat(b);

.slice()

slice() method slices out a piece of an array into a new array from start to end (end not included).

let array1 = [0, 1, 2, 3, 4, 5];
let num = array1.slice(1, 4);

// Output: [1, 2, 3]

sort()

.sort() method sorts an array alphabetically. By default, the sort() function sorts values as strings.

const months = ["March", "Jan", "Feb", "Dec"];
months.sort();

console.log(months);
// Output: ["Dec", "Feb", "Jan", "March"]

Sort numbers in array

To sort the array in ascending order

var points = [40, 100, 1, 5, 25, 10];
points.sort(function (a, b) {
  return a - b;
});

To sort an array descending:

points.sort(function (a, b) {
  return b - a;
});

reverse()

reverse() method reverses the elements in an array. arr.reverse();