DEV Community

Cover image for Array methods in JavaScript: when to use which πŸ€”?
Mohd Shahid
Mohd Shahid

Posted on • Edited on

Array methods in JavaScript: when to use which πŸ€”?

Hey guys πŸ‘‹

There are a lot of array methods in JavaScript and often we get confused πŸ˜• about which to use when.

In this article I will summarise these methods and do my best to clear about which method should we use according to our needs.

Let's get started πŸš€

As I said we will study the array methods according to our needs, so just think what do you want...

I want...

1. to mutate the original array

a) add to original array

i) .push:

this method adds an element to the end of the original array and returns the new length of the array.

let numbers = [1,2,3];
number.push(4);
console.log(numbers) // [1,2,3,4]
Enter fullscreen mode Exit fullscreen mode

ii) .unshift:

this method is like .push method, except it adds the element at the start of the original array.

let numbers = [2,3,4];
numbers.unshift(1);
console.log(numbers) // [1,2,3,4]
Enter fullscreen mode Exit fullscreen mode

b) remove from the original array

i) .pop:

this method removes the last element of the array and returns the removed element.

let names = ['Sid', 'Marty', 'John'];
const removedName = names.pop();
console.log(names) // ['Sid', 'Marty']
console.log(removedName) // 'John'
Enter fullscreen mode Exit fullscreen mode

ii) .shift:

.shift is just like .pop except it removes the element from the start.

iii) .splice:

this method is bit tricky, it can remove and/or add the element(s) to the original array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

// At position 2, remove 1 element and add 2 elements:
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Mongo"]
Enter fullscreen mode Exit fullscreen mode

Other mutating array methods:

i) .reverse

this method reverses an array. The first element becomes the last, and the last array becomes the first.

const array = [1,2,3,4,5]
array.reverse();
console.log(array);
// [5,4,3,2,1]
Enter fullscreen mode Exit fullscreen mode

ii) .sort

this method sorts the array in place and also returns the sorted array. This method converts all the element to string and sorts them in ascending order by default.

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

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]
Enter fullscreen mode Exit fullscreen mode

.sort receives an optional parameter a compare function, which can be used to override the default behaviour of .sort.

If compare function is supplied all array elements are sorted according to the return value of the compare function.

compare function receives two arguments say a and b. Where a is first element for comparison and b is second element for comparison.

  • If compareFunction(a, b) returns a value > than 0, sort b before a.
  • If compareFunction(a, b) returns a value < than 0, sort a before b.
  • If compareFunction(a, b) returns 0, a and b are considered equal.

I know it sounds confusing πŸ˜… , take a look at the example πŸ‘‡.

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => {
  return a - b;
})
console.log(numbers);
// [1,2,3,4,5]
Enter fullscreen mode Exit fullscreen mode

iii) .fill

The .fill method changes all elements in an array to provided value, from a start index (which is 0 by default) to an end index (which is length of the array by default).

const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]


// fill with 5 from position 1
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]

console.log(array1.fill(6));
// [6, 6, 6, 6]
Enter fullscreen mode Exit fullscreen mode

2. a new array

If you want a new array, please look at the following array methods:

i) .map:

As a react developer, .map is the most used array method for me. It loops over the array and perform a certain action on each element then returns the new array of the same length.

const numbers = [1,2,3,4];
const numberSqr = numbers.map((num) => num*num);
console.log(numberSqr) // [1,4,9,16]
Enter fullscreen mode Exit fullscreen mode
  • .map receives a callback function, which accepts the following arguments:

    i) The current element being processed in the array.

    ii) index of the current element being processed in the array.

    iii) array on which .map was called.

  • value returned from the callback function will be mapped the corresponding element in the array.

ii) .filter:

This methods creates a new array with all the elements that passed the condition given in the callback function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// ["exuberant", "destruction", "present"]
Enter fullscreen mode Exit fullscreen mode

iii) .slice:

This method returns a copy of the portion of the array.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// ["camel", "duck"]
Enter fullscreen mode Exit fullscreen mode

iv) .concat:

This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result is ['a', 'b', 'c', 1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

3. an array index

i) .indexOf:

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

const fruits = ['Banana', 'Apple', 'Kiwi'];
console.log(fruits.indexOf('Apple')) // 1
console.log(fruits.indexOf('Orange')) // -1
Enter fullscreen mode Exit fullscreen mode

ii) .findIndex:

This method returns the index of the first element that passed a given condition. Otherwise -1 indicating that no element passed the condition.

const numbers = [5,9,2,11,5];
const index = numbers.findIndex((element) => element > 8) // 2
const ind = numbers.findIndex((element) => element > 12) // -1
Enter fullscreen mode Exit fullscreen mode

4. an array element

.find:

This method returns the first element which satisfies a provided condition. undefined otherwise.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// 12
Enter fullscreen mode Exit fullscreen mode

5. to know if the array includes

i) .includes:

This methods returns true (if the array contains the element) or false.

const friends = ['Jon', 'Joe', 'Jack', 'Jill'];
console.log(friends.includes('Jon')) // true
console.log(friends.includes('Sid')) // false
Enter fullscreen mode Exit fullscreen mode

ii) .some:

Name of this method sometimes confuse me 😣. This method returns true if at least one element passes the given condition.

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

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

Enter fullscreen mode Exit fullscreen mode

iii) .every:

This method returns true if all the elements in the array pass the given condition, false otherwise.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true
Enter fullscreen mode Exit fullscreen mode

6. a new string

.join:

This methods joins all the element of the array by a given string separator and return the string.

let words = ['JS', 'is', 'amazing'];
// joining the words by space
console.log(words.join(' ')) // 'JS is amazing'

// joining by dash ('-')
console.log(words.join('-')) // 'JS-is-amazing'
Enter fullscreen mode Exit fullscreen mode

7. to just loop over an array

forEach:

This method executes a provided function once for each array element.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// 'a'
// 'b'
// 'c'
Enter fullscreen mode Exit fullscreen mode

8. to transform the array to a single value

.reduce:

This methods reduces the array to a single value.

This value can be of any type: number, string, boolean, array or object.

The reducer function takes four arguments:

a) Accumulator

b) Current Value

c) Current Index

d) Source Array

Reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

// sum of the elements of the array using .reduce
let numbers = [1,4,5];
const sum = numbers.reduce((acc, el, i, arr) => acc+el);
console.log(sum) // 10
Enter fullscreen mode Exit fullscreen mode

Phew, this was a lot to take in πŸ˜….

I hope you guys found this article helpful, if you did please leave a like.

Find me on twitter.

Thanks for reading. πŸ’š

Happy coding.

Top comments (0)