JavaScript Array Methods: Tips, Tricks, and Best Practices

Sonjoy Chandra Barman

·

Follow

4 min read

·

Dec 24, 2022

1

Listen

Share

Here are some examples of common JavaScript array methods:

push adds one or more elements to the end of an array and returns the new length of the array.

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange', 'mango');
console.log(newLength); // 4
console.log(fruits); // ['apple', 'banana', 'orange', 'mango']

pop removes the last element from an array and returns it.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const lastFruit = fruits.pop();
console.log(lastFruit); // 'mango'
console.log(fruits); // ['apple', 'banana', 'orange']

shift removes the first element from an array and returns it.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const firstFruit = fruits.shift();
console.log(firstFruit); // 'apple'
console.log(fruits); // ['banana', 'orange', 'mango']

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

const fruits = ['banana', 'orange', 'mango'];
const newLength = fruits.unshift('apple');
console.log(newLength); // 4
console.log(fruits); // ['apple', 'banana', 'orange', 'mango']

slice returns a shallow copy of a portion of an array into a new array object.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ['banana', 'orange']

splice adds and/or removes elements from an array.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const removed = fruits.splice(1, 2, 'lemon', 'lime');
console.log(removed); // ['banana', 'orange']
console.log(fruits); // ['apple', 'lemon', 'lime', 'mango']

sort sorts the elements of an array in place and returns the array

const fruits = ['apple', 'banana', 'Orange', 'mango'];
fruits.sort();
console.log(fruits); // ['Orange', 'apple', 'banana', 'mango']

reverse reverses the order of the elements in an array in place and returns the array.

const fruits = ['apple', 'banana', 'orange', 'mango'];
fruits.reverse();
console.log(fruits); // ['mango', 'orange', 'banana', 'apple']

concat returns a new array that is the result of concatenating two or more arrays.

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const produce = fruits.concat(vegetables

indexOf returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.indexOf('banana')); // 1
console.log(fruits.indexOf('kiwi')); // -1

lastIndexOf returns the last index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['apple', 'banana', 'orange', 'mango', 'banana'];
console.log(fruits.lastIndexOf('banana')); // 4
console.log(fruits.lastIndexOf('kiwi')); // -1

includes determines whether an array includes a certain value among its entries, returning true or false as appropriate.

const fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('kiwi')); // false

join creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.

const fruits = ['apple', 'banana', 'orange', 'mango'];
console.log(fruits.join()); // 'apple,banana,orange,mango'
console.log(fruits.join('-')); // 'apple-banana-orange-mango'

forEach executes a provided function once for each array element.

const fruits = ['apple', 'banana', 'orange', 'mango'];
fruits.forEach(fruit => console.log(fruit));
// Output: 'apple' 'banana' 'orange' 'mango'

map creates a new array with the results of calling a provided function on every element in the calling array.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const uppercaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(uppercaseFruits); // ['APPLE', 'BANANA', 'ORANGE', 'MANGO']

filter creates a new array with all elements that pass the test implemented by the provided function.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const citrus = fruits.filter(fruit => fruit.includes('a'));
console.log(citrus); // ['banana', 'orange']

reduce applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

find returns the value of the first element in the array that satisfies the provided testing function. Otherwise, it returns undefined.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const orange = fruits.find(fruit => fruit === 'orange');
console.log(orange); // 'orange'

findIndex returns the index of the first element in the array that satisfies the provided testing function. Otherwise, it returns -1.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const orangeIndex = fruits.findIndex(fruit => fruit === 'orange');
console.log(orangeIndex); // 2

every tests whether all elements in the array pass the test implemented by the provided function. It returns a boolean value.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const allFruitsHaveAE = fruits.every(fruit => fruit.includes('a'));
console.log(allFruitsHaveAE); // true

some tests whether at least one element in the array passes the test implemented by the provided function. It returns a boolean value.

const fruits = ['apple', 'banana', 'orange', 'mango'];
const someFruitsHaveAE = fruits.some(fruit => fruit.includes('a'));
console.log(someFruitsHaveAE); // true

flat creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
console.log(nestedArray.flat()); // [1, 2, 3, 4, 5, 6]

flatMap first maps each element using a mapping function, then flattens the result into a new array. It is equivalent to using map followed by flat with a depth of 1.

const nestedArray = [[1, 2], [3, 4], [5, 6]];
const flatMappedArray = nestedArray.flatMap(x => x.map(y => y * 2));
console.log(flatMappedArray); // [2, 4, 6, 8, 10, 12]

MY CONTACTS

Twitter — @sonjoybarman19

Instagram — @sonjoybarmon19

LinkedIn — /in/sonjoybarmon

Fiverr — https://www.fiverr.com/sonjoybarman

Upwork — https://www.upwork.com/o/profiles/users/_~0120764354dd58b313/