Arrays in Javascript

16 April 2023 - 15 mins read time
Tags: javascript es6 Arrays Iterables

Arrays in javascript

An array is a collection of values that are stored in contiguous memory locations. An array can hold values of any data type, including other arrays, objects, and functions. Each element in an array is identified by an index, starting from zero for the first element.

What are Iterables and Array-like objects

An iterable object is any object that has a [Symbol.iterator] property, which returns an iterator object. The iterator object must have a next() method that returns an object with value and done properties. e.g. Arrays, Strings, Sets, Maps, Generators.

You can check if an object is iterable or not by using the Symbol.iterator property. If an object has a Symbol.iterator property, then it is iterable.

const array = [1, 2, 3];
console.log(typeof array[Symbol.iterator]); // "function", so it is iterable

const obj = { a: 1, b: 2, c: 3 };
console.log(typeof obj[Symbol.iterator]); // "undefined", so it is not iterable

An array-like object is an object that has a length property and contains elements with numeric indices, but is not actually an array. Examples of array-like objects include the arguments object and DOM collections like document.getElementsByTagName().

Here are some key differences between iterable and array-like objects:

Some of the objects which are both Iterator and Array-like are NodeList, HTMLCollection, TypedArray and String.

Ways of Creating an Array

There are various ways of creating an Array in javascript. Let’s look at some of the most common ways to do so.

let myArray = [1, 2, 3, 4, 5];

let myArray = new Array(1, 2, 3, 4, 5);
let myArray2 = new Array(5); // An empty array that has total length of 5.

let myArray = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

let myArray = Array.of(1, 2, 3, 4, 5);

Adding and Removing elements from an array

Adding Elements

let arr = [1, 2, 3];
arr.push(4); // arr is now [1, 2, 3, 4]

let arr = [1, 2, 3];
arr.unshift(0); // arr is now [0, 1, 2, 3]

let arr = [1, 2, 3];
arr.splice(1, 0, 4); // arr is now [1, 4, 2, 3]

In the above example, splice() adds the value 4 at index 1 and removes 0 elements.

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2); // arr3 is now [1, 2, 3, 4]

Removing Elements

let arr = [1, 2, 3];
let removedElement = arr.pop(); // arr is now [1, 2], removedElement is 3

let arr = [1, 2, 3];
let removedElement = arr.shift(); // arr is now [2, 3], removedElement is 1

let arr = [1, 2, 3];
arr.splice(1, 1); // arr is now [1, 3]

In the above example, splice() removes 1 element at index 1.

let arr = [1, 2, 3, 4, 5];
let newArray = arr.slice(1, 4); // newArray is [2, 3, 4]

In the above example, slice() returns a new array that contains elements from index 1 to index 4 (excluding index 4). The original array is not modified.

Finding a value in an array

let arr = ['apple', 'banana', 'orange'];
let index = arr.indexOf('banana'); // index is 1

let arr = ['apple', 'banana', 'orange', 'banana'];
let index = arr.lastIndexOf('banana'); // index is 3

let arr = [1, 2, 3, 4];
let result = arr.find((element) => element > 2); // result is 3

let arr = [1, 2, 3, 4];
let filteredArray = arr.filter((element) => element > 2); // filteredArray is [3, 4]

let arr = ['apple', 'banana', 'orange'];
let result = arr.includes('banana'); // result is true

NOTE: indexOf() and lastIndexOf() methods doesn’t work well with reference types like object.

const personData = [{ name: 'John' }, { name: 'Doe' }];
console.log(personData.indexOf({ name: 'Doe' })); // returns -1
// We can use find instead
console.log(personData.find((person) => person.name === 'Doe')); // returns {name: 'Doe'}

Sorting and Reversing Arrays

The sort() method is used to sort the elements of an array in place, i.e., it modifies the original array. The default sort order is based on the string Unicode code points. However, you can also specify a custom sort function as an argument to the sort() method.

let arr = [3, 1, 4, 2];
arr.sort(); // arr is [1, 2, 3, 4]

let arr2 = ['apple', 'Orange', 'banana', 'Orange'];
arr2.sort(); // arr2 is ['Orange', 'Orange', 'apple', 'banana']

let arr3 = [3, 1, 4, 2];
arr3.sort((a, b) => b - a); // arr3 is [4, 3, 2, 1]

Good to Know: sort() function uses tim sort alogrithm in backend to sort the elements.

The reverse() method is used to reverse the order of the elements of an array in place, i.e., it modifies the original array.

let arr = [1, 2, 5, 3];
arr.reverse(); // arr is [3, 5, 2, 1]

map, forEach, reduce methods

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8]

const names = ['Alice', 'Bob', 'Charlie'];
names.forEach((name) => console.log(name));

I’ve covered reduce method in this blog post since it require greater attention.

The Spread Operator and Array destructuring

Spread Operator

The Spread operator in JavaScript is denoted by three dots .... It allows an iterable (like an array or a string) to be expanded into individual elements. The Spread operator can be used in multiple ways:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2];

console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

const arr = [1, 2, 3];

function sum(a, b, c) {
  return a + b + c;
}

const result = sum(...arr);

console.log(result); // 6

const arr1 = [1, 2, 3];
const arr2 = [...arr1];

console.log(arr2); // [1, 2, 3]

Array Destructuring

Array Destructuring is a way to unpack values from an array into separate variables. It allows you to assign array elements to variables in a concise and readable way. The syntax for Array Destructuring is also denoted by square brackets [].

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Array Destructuring also allows you to set default values for variables

const arr = [1];

const [a, b = 2, c = 3] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Array Destructuring can also be used with the Rest parameter to capture the remaining elements of an array

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

const [a, b, ...rest] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]