JavaScript Array Methods

Mutating array methods

push(...items):number - adds to end, returns new length

let fruits = ['apple', 'pear', 'cherry'];
let newLength = fruits.push('orange', 'peach');

console.log(newLength); // Outputs: 6
console.log(fruits); // Outputs: ['apple', 'pear', 'cherry', 'orange', 'peach']

pop():any - removes last item and returns it

let fruits = ['apple', 'pear', 'cherry'];
let removedItem = fruits.pop();

console.log(removedItem); // Outputs: 'cherry'
console.log(fruits); // Outputs: ['apple', 'pear']

unshift(...items):number - adds items to start, returns new length

let fruits = ['apple', 'pear', 'cherry'];
let newLength = fruits.unshift('orange', 'peach');

console.log(fruits); // Outputs: ['orange', 'peach', 'apple', 'pear', 'cherry']
console.log(newLength); // Outputs: 6

shift():any - removes first item and returns it

let fruits = ['apple', 'pear', 'cherry'];
let first = fruits.shift();

console.log(first); // Outputs: apple
console.log(fruits); // Outputs: ['pear', 'cherry']

splice(start, deleteCount?, ...items):any[] - removes and/or adds elements from/at index

The splice() method (not to be confused with slice) changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to endIndex (endIndex not included). The original array will not be modified.

let fruits = ['apple', 'pear', 'cherry'];
let removed = fruits.splice(1, 2, 'citrus'); // Remove pear and cherry, add citrus

console.log(removed); // Outputs: ['pear', 'cherry']
console.log(fruits); // Outputs: ['apple', 'citrus']

You can also use the splice() method to remove elements from an array without adding new elements. To do this, you simply omit the third argument.

let fruits = ['apple', 'pear', 'cherry'];

let removed = fruits.splice(2, 2); // Remove 'cherry' & 'date'
console.log(fruits); // Outputs: ['apple', 'pear']
console.log(removed); // Outputs: ['cherry']

You can also use the splice() method to add elements to an array without removing any elements. To do this, you simply omit the second argument.

let fruits = ['apple', 'pear', 'cherry'];

let removed = fruits.splice(2, 0, 'citrus'); // Add 'citrus'
console.log(fruits); // Outputs: ['apple', 'pear', 'citrus', 'cherry']
console.log(removed); // Outputs: []

reverse():[] - reverse the array in place

const nums = [1, 2, 3, 4, 5];
let reversedNums = nums.reverse(); // mutates, and returns the reversed array

console.log(nums); // Outputs: [5, 4, 3, 2, 1]
console.log(reversedNums); // Outputs: [5, 4, 3, 2, 1]

sort(compareFn?) - sorts in place

The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

In plain English, this means that when you use the sort() method in JavaScript without providing a comparison function, it will sort the elements in increasing order. But it doesn't sort numbers like you might expect (1, 2, 10). Instead, it converts each element to a string and then sorts them based on the UTF-16 code unit values of the characters in the strings. This is why '10' comes before '2' in a default sort, because the character '1' has a lower UTF-16 code unit value than '2'.

const nums = [9, 20, 1, 10, 2];
let sortAscending = nums2.sort();
console.log(sortAscending); // Outputs: [1, 10, 2, 20, 9]

To sort numbers in ascending or descending order, you can pass a compare function to the sort() method.

const nums = [9, 20, 1, 10, 2];
// if a-b is negative, a is sorted before b = ascending
let sortAscending = nums2.sort((a, b) => a - b);
console.log(sortAscending); // Outputs: [1, 2, 9, 10, 20]

const nums = [9, 20, 1, 10, 2];
// if b-a is negative, a is sorted before b = descending
let sortDescending = nums2.sort((a, b) => b - a);
console.log(sortDescending); // Outputs: [20, 10, 9, 2, 1]

Non-mutating methods

concat(...items):[] - combines arrays or values into a new array

let fruits = ['apple', 'pear'];
let moreFruits = ['orange', 'peach'];
const newArray = fruits.concat(moreFruits);
console.log(newArray);
// Outputs: ['apple', 'pear', 'orange', 'peach']

join(separator?):string - joins all elements of an array into a string

const fruits = ['apple', 'banana', 'cherry'];
const str = fruits.join(' ');
console.log(str); // Outputs: 'apple banana cherry'

Why is this parameter optional?

If it is omitted, the array elements are separated by a comma (,). If you want to join the elements with no separator, you can call join() with no arguments.

const fruits = ['apple', 'banana', 'cherry'];
const str = fruits.join();
console.log(str); // Outputs: 'apple,banana,cherry'

filter(predicate):[]: Creates a new array with elements that pass the predicate test

let nums = [1, 2, 3, 4, 5];
let filtered = nums.filter(num => num > 2);
console.log(filtered);
// Outputs: [3, 4, 5]

map(callback):[] - transforms each element using the callback

let nums = [1, 2, 3, 4, 5];
let doubled = nums.map(num => num * 2 );
console.log(doubled);
// Outputs: [2, 4, 6, 8, 10]

reduce(callback, initialValue?):any - reduces array to a single value using the callback

let nums = [1, 2, 3, 4, 5];
let sum = nums.reduce((acc, num) => acc + num, 0);
console.log(sum);
// Outputs: 15

every(predicate):boolean - checks if all elements pass the predicate test

let nums = [1, 2, 3, 4, 5];
let allGreaterThanZero = nums.every(num => num > 0);
console.log(allGreaterThanZero);
// Outputs: true

some(predicate):boolean - checks if any element passes the predicate test

let nums = [1, 2, 3, 4, 5];
let someGreaterThanFour = nums.some(num => num > 4);
console.log(someGreaterThanFour);

find(predicate):any - finds first element that passes the predicate test

let nums = [1, 2, 3, 4, 5];
let firstGreaterThanTwo = nums.find(num => num > 2);
console.log(firstGreaterThanTwo);
// Outputs: 3

includes(values):boolean - checks if array includes the value

let nums = [1, 2, 3, 4, 5];
let includesThree = nums.includes(3);
console.log(includesThree);
// Outputs: true

slice(startIdx?, endIdx?):any[] - returns a shallow copy of a portion of an array

let nums = [1, 2, 3, 4, 5];
let sliced = nums.slice(1, 4);
console.log(sliced);
// Outputs: [2, 3, 4]

Why are the slice parameters optional?

If startIdx is omitted, the slice starts from the beginning of the array. If endIdx is omitted, the slice goes through the end of the array. So, you can call slice() with no arguments to make a shallow copy of the entire array. For example:

indexOf(value):number - finds first index of the value, or -1 if not found

let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana');
console.log(index); // Outputs: 1

What is a predicate function?

A predicate function is a function that takes an argument and returns a boolean value. It is used to test a condition and return true or false based on the condition.

const isEven = num => num % 2 === 0;
console.log(isEven(2)); // Outputs: true
console.log(isEven(3)); // Outputs: false