Topic: JS Array Methods and their differences- forEach vs map vs filter vs find vs reduce vs slice vs splice

We all know about JavaScript array methods and their use cases also. But sometimes, there will create a bit of confusion among map, forEach, filter, find and reduce. Because, all of them work in array element and gives similar output also. But a question is where are the differences ? Now I am going to write my a short research about them and their use cases.

Before writing my explanation, I need to clarify a thing shortly that what the higher order function in JavaScript is. Because, in which topic I am going to write, all of them are a higher order function. Basically, The function will be a higher function when it takes a function as a parameter. The parameter function can be anonymous function or arrow function.

- forEach()

forEach() is nothing but a traditional for loop. It works like a for loop. It gives an array looping over each array element of our existing array and perform operation on them. One thing is point to be noted, that forEach doesn't return an array. It returns undefined.

Syntax:

// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

- map()

map() works on array object like forEach() method. But there is a little difference is that map creates a new array like the given array transforming and modifying existing array element. It returns array that is created.

Syntax:

// Arrow function
array.map((element) => { /* ... */ })
array.map((element, index) => { /* ... */ })
array.map((element, index, array) => { /* ... */ })

// Callback function
array.map(callbackFn)
array.map(callbackFn, thisArg)

// Inline callback function
array.map(function(element) { /* ... */ })
array.map(function(element, index) { /* ... */ })
array.map(function(element, index, array){ /* ... */ })
array.map(function(element, index, array) { /* ... */ }, thisArg)

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

- filter()

filter() works on array object or element, but the difference is that it only works on condition based. In a simple word, filter returns creating a subset of array according to your condition given in a callback function.
For example, When you need to some elements or objects that are not needed and wanted to remove them, then need to use filter method. see more

Syntax:

// Arrow function
filter((element) => { /* ... */ } )
filter((element, index) => { /* ... */ } )
filter((element, index, array) => { /* ... */ } )

// Callback function
filter(callbackFn)
filter(callbackFn, thisArg)

// Inline callback function
filter(function(element) { /* ... */ })
filter(function(element, index) { /* ... */ })
filter(function(element, index, array){ /* ... */ })
filter(function(element, index, array) { /* ... */ }, thisArg)

elem :element value
index :index in each traversal, moving from left to right
array :original array invoking the method
thisArg :(Optional) object that will be referred to as this in callback

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

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

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

- find()

find() method also works on array element but the difference is, it returns the value or existing array element when the condition of the given callback function is true otherwise it will return undefined. see more

Syntax:

// Arrow function
find((element) => { /* ... */ } )
find((element, index) => { /* ... */ } )
find((element, index, array) => { /* ... */ } )

// Callback function
find(callbackFn)
find(callbackFn, thisArg)

// Inline callback function
find(function(element) { /* ... */ })
find(function(element, index) { /* ... */ })
find(function(element, index, array){ /* ... */ })
find(function(element, index, array) { /* ... */ }, thisArg)

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

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

console.log(found);
// expected output: 12

- reduce()

reduce() method is used to reduce the array into a single value. see more

Syntax:

/ Arrow function
reduce((previousValue, currentValue) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* ... */ }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

- slice()

slice() method is used to copy a specific portion of an array. see more

Syntax:

slice()
slice(start)
slice(start, end)

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

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

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

- splice()

splice() method is used when we need to delete or replace a specific index of an array. see more

Syntax:

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]