Arrays are indispensable data-structures in javascript and understanding how to effectively use them to solve problems is a crucial skill to master.
Arrays are represented by a robust object in JavaScript that provides several useful methods and operations to work with. I'll be going over most of them in this article
Creating arrays
Arrays can be initialized directly like so
const arr = [1, 4, 8, 2, 2, 4, 5];
or by the Array constructor
// create an array of 3 undefined items
const arr = new Array(3);
// assign the value of 10 to all items
arr.fill(10); // [10, 10, 10]
// in one line
const newArr = new Array(3).fill(10); // [10, 10, 10]
JavaScript also provides some useful methods for creating arrays.
Array.from
Creates an array from another array
const arr = Array.from([1, 4, 5]); // [1, 4, 5]
Array.of
Creates an array from every argument it receives
const arr = Array.of(1, 4, 5); // [1, 4, 5]
Iterating over arrays
There are several methods available for array iteration in JavaScript
forEach
You can iterate over the array to apply an operation to each item using forEach
const arr = [1, 2, 3, 4, 5];
arr.forEach(item => item + 100); // [101, 102, 103, 104, 105]
map
map allows you to create a new array by applying an operation/function to each item
const arr = [1, 2, 3, 4, 5];
const newArr = arr.map(item => item + 100); // [101, 102, 103, 104, 105]
// arr remains the same
Unlike forEach, it does not modify the original array
filter
Loops through the array and return only the items that satisfy a given condition
const arr = [1, 2, 3, 4, 5];
// get all items greater than 2
const greaterThanTwoArr = arr.filter(item => item > 2); // [3, 4, 5]
reduce
The reduce function loops through the array, applying an operation/function to each element and an accumulator from left to right and returns the accumulated value
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((total, item) => total + item, 0); // 8
reduceRight
Identical to reduce but works from right to left
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduceRight((total, item) => total + item, 0); // 8
Modifying arrays
JavaScript provides several useful methods and operations for modifying arrays
push
Adds an item to the end of the array
const arr = [1, 2, 3, 4, 5];
arr.push(100); // [1, 2, 3, 4, 5, 100]
pop
Removes an item from the end of the array
const arr = [1, 2, 3, 4, 5];
arr.pop(); // [1, 2, 3, 4]
unshift
Adds an item to the beginning of the array
const arr = [1, 2, 3, 4, 5];
arr.unshift(100); // [100, 1, 2, 3, 4, 5]
shift
Removes an item from the beginning of the array
const arr = [1, 2, 3, 4, 5];
arr.shift(); // [2, 3, 4, 5]
splice
Removes an item from a specified index in the array.
const arr = [1, 2, 3, 4, 5];
// remove item at index 1
arr.splice(1, 1); // [1, 3, 4, 5]
splice can also remove multiple items from a start index.
const arr = [1, 2, 3, 4, 5];
// remove 2 items starting from index 1
arr.splice(1, 2);
slice
This method does not modify the array. It creates a subset of the array from a given startIndex to endIndex - 1.
const arr = [1, 2, 3, 4, 5];
// remove item at index 1
arr.slice(1, 1); // []
arr.slice(1, 3); // [2, 3]
// without endIndex
arr.slice(2); // [ 3, 4, 5 ]
arr.slice(1); // [ 2, 3, 4, 5 ]
reverse
Reverses the items in the array
const arr = [1, 2, 3, 4, 5];
arr.reverse(); // [5, 4, 3, 2, 1]
concat
Adds the items of another array to the end of the original array
const arr = [1, 2, 3, 4, 5];
const newArr = arr.concat([100, 200, 300]); // [1, 2, 3, 4, 5, 100, 200, 300]
spread operator
This operator is similar in function to the concat method but offers more flexibility
const arr = [1, 2, 3, 4, 5];
const newArr = [...arr, ...[100, 200, 300]]; // [1, 2, 3, 4, 5, 100, 200, 300]
Add to the beginning
const arr = [1, 2, 3, 4, 5];
const newArr = [...[100, 200, 300], ...arr]; // [100, 200, 300, 1, 2, 3, 4, 5]
Complex combinations
const arr = [1, 2, 3, 4, 5];
const arr2 = [100, 200, 300];
const newArr = [...arr2, ...arr, 10, 9, ...arr, -10]; // [ 100, 200, 300, 1, 2, 3, 4, 5, 10, 9, 1, 2, 3, 4, 5, -10 ]
sort
Sorts the items in the array according to a given comparison function
const arr = [100, -2, 30, 4, 5];
// sort in ascending order
arr.sort((a, b) => (a > b ? 1 : -1)); // [ -2, 4, 5, 30, 100 ]
// sort in descending order
arr.sort((a, b) => (a < b ? 1 : -1)); // [ 100, 30, 5, 4, -2 ]
Searching arrays
There are several convenience methods for finding items in arrays or verifying a condition
indexOf
Finds the index of the first occurrence of a given item within an array
const arr = [1, 2, 3, 2, 2, 4, 5];
arr.indexOf(2); // 1
arr.indexOf(5); // 4
arr.indexOf(100); // -1
arr.indexOf(10); // -1
includes
Checks if the array contains the specified item
const arr = [1, 2, 3, 2, 2, 4, 5];
arr.includes(10); // false
arr.includes(2); // true
find
This method returns the first item in the array that satisfies a given condition
const arr = [1, 4, 8, 2, 2, 4, 5];
arr.find(item => item % 2 === 0); // 4
arr.find(item => item / 2 === 4); // 8
arr.find(item => (item * item) / 2 === 2); // 2
findIndex
Similar to find except that it returns the index
const arr = [1, 4, 8, 2, 2, 4, 5];
arr.findIndex(item => item % 2 === 0); // 1
arr.findIndex(item => item / 2 === 4); // 2
arr.findIndex(item => (item * item) / 2 === 2); // 3
some
Checks if one or more items in the array satisfy a given condition
const arr = [1, 4, 8, 2, 2, 4, 5];
arr.some(item => item > 2); // true
arr.some(item => item % 8 === 0); // true
arr.some(item => item < 0); // false
every
Checks if all items in the array satisfy a given condition
const arr = [1, 4, 8, 2, 2, 4, 5];
arr.every(item => item > 0); // true
arr.every(item => item % 1 === 0); // true
arr.every(item => item < 0); // false
Top comments (0)