Detailed explanation of JavaScript array methods

1. push()

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

grammar

array.push(element1, ..., elementN)

sample code

const fruits = ['apple', 'banana'];
const newLength = fruits.push('orange');

console.log(fruits); // ["apple", "banana", "orange"]
console.log(newLength); // 3

2. pop()

Removes the last element from the array and returns the value of that element.

grammar

array.pop()

sample code

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

console.log(fruits); // ["apple", "banana"]
console.log(lastFruit); // "orange"

3. shift()

Removes the first element from the array and returns the value of that element.

grammar

array.shift()

sample code

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

console.log(fruits); // ["banana", "orange"]
console.log(firstFruit); // "apple"

4. unshift()

Adds one or more elements to the beginning of the array and returns the length of the new array.

grammar

array.unshift(element1, ..., elementN)

sample code

const fruits = ['banana', 'orange'];
const newLength = fruits.unshift('apple', 'kiwi');

console.log(fruits); // ["apple", "kiwi", "banana", "orange"]
console.log(newLength); // 4

5. concat()

Merges two or more arrays into a new array.

grammar

array.concat(array1, array2, ..., arrayN)

sample code

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];
const arr3 = ['g', 'h'];

const newArr = arr1.concat(arr2, arr3);

console.log(newArr); // ["a", "b", "c", "d", "e", "f", "g", "h"]

6. slice()

Returns a new array starting at the specified start index and ending at the specified end index.

grammar

array.slice(start, end)

sample code

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'grape'];
const citrusFruits = fruits.slice(1, 4);

console.log(citrusFruits); // ["banana", "orange", "kiwi"]

7. splice()

Adds/removes items to/from an array and returns the removed item.

grammar

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

sample code

const fruits = ['apple', 'banana', 'orange', 'kiwi', 'grape'];
const removedItems = fruits.splice(1, 2, 'lemon', 'pear');

console.log(fruits); // ["apple", "lemon", "pear", "kiwi", "grape"]
console.log(removedItems); // ["banana", "orange"]

8. forEach()

Executes the provided function once for each element in the array.

grammar

array.forEach(function(currentValue, index, array) {
// code block to be executed
});

sample code

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
    console.log(number * 2);
});
// Output: 2, 4, 6, 8, 10

9. map()

Creates a new array whose result is the result of calling a provided function on each element in the array.

grammar

array.map(function(currentValue, index, array) {
return element
});

sample code

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {
    return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

10. filter()

Creates a new array containing all elements that pass the tests of the provided function.

grammar

array.filter(function(currentValue, index, array) {
return element
});

sample code

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
    return number % 2 === 0;
});

console.log(evenNumbers); // [2, 4]

11. reduce()

Executes a provided function on all elements in the array and accumulates its results into a single return value.

grammar

array.reduce(function(total, currentValue, currentIndex, array) {
return element
}, initialValue);

sample code

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, number) {
    return total + number;
}, 0);

console.log(sum); // 15

The above are some common methods of JavaScript arrays, I hope they will be helpful to you.