Array Methods you Must know

As we know arrays are the basic data structures that are used widely among all the codebases to store similar types of data items. As arrays are so important there are several Array methods provided to us for performing different kind of operations in an array. Lets understand some of them.

1. Push and Pop

Push method is used to add an element at the end of the array, it returns the length of the array after adding the provided element in array.

const currencyNotes = [5, 10, 20, 50, 100, 500, 2000];

const val = currencyNotes.push(200); // Array becomes [5, 10, 20, 50, 100, 500, 2000, 200]
console.log(val); // 7 : Length of array after appending 200

while pop method is used to delete the element at last position from an array, it returns the element that is being deleted from the array.

const currencyNotes = [5, 10, 20, 50, 100, 200, 500, 2000];

const val = currencyNotes.pop(); // Array becomes [5, 10, 20, 50, 100, 200, 500]
console.log(val); // 2000 : The deleted value

1. Shift and Unshift

As push and pop functions operates at the end position of the array, these shift and unshift functions are used to delete or add an element at the 0th position of the array.

Shift function is used to delete the element at 0th index, and shifts the remaining array to its left positions by one. It returns the deleted element, if array is empty returns undefined.

const bankNames = ['Punjab National Bank', 'State Bank of India', 'ICICI', 'HDFC'];

const val = bankNames.shift(); // Deleted Punjab National Bank

console.log(val); // Punjab National Bank
console.log(bankNames); // ['State Bank of India', 'ICICI', 'HDFC']

Unshift function is used to add one or more elements from the 0th position of the array, it returns new length of array.

const bankNames = ['State Bank of India', 'ICICI', 'HDFC'];

const val = bankNames.shifts('Bank of Baroda', 'Canara Bank');

console.log(val); // 5 : Length of changed array
console.log(bankNames); // ['Bank of Baroda', 'Canara Bank', 'State Bank of India', 'ICICI', 'HDFC'];

1. Map()

Map function creates a new array from the given array and perform the operations provided in the Map function call, it returns a new array that is demanded by user.

• Syntax

array_name.map(callbackFn)
array_name.map(callbackFn, thisArg);

A callback function is needed to call map function, lets create an array and try to get a new array using map function in which every element is doubled of its intitial value.

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

const mapped = array.map((x) => x * 2);

console.log(mapped);
// Expected output: Array [2, 4, 6, 10, 14]

1. Filter()

Filter function also creates a new array from the given array reference. The main purpose of filter is to filter out some elements from the original array, it needs a callback function which returns true or false, if true is returned by callback that element will be added to new array and if false that element will be skipped

• Syntax

array_name.filter(callbackFn)
array_name.filter(callbackFn, thisArg)

Here is an example showing filtering of an array

const values = [2, 3, 5, 7, 11, 13, 17, 19, 23];

const result = values.filter((element) => element <= 10);

console.log(result);
// Expected output: Array [2, 3, 5, 7]

1. Reduce()

This function performs a certain operation according to the callback function and after performing operations on every element it returns the final value or result. Reduce function needs 2 parameters to work fluently, first a callback function and second the initial values of our answer that is being calculated.

• Syntax

array_name.reduce(callbackFn, initialValue)

Here is an example that calculates the sum of all the elements in the array

const nums = [1, 11, 101, 505, 909, 110011];

const finalSum = nums.reduce((currSum, element) => currSum += element, 0); // Storing current sum in currSum and inititalising it with 0;

console.log(finalSum); // 111538

1. forEach()

forEach traverses through each element of the array and it calls the callback function for each element of an array.

• Syntax

array_name.forEach(callbackFn)
array_name.forEach(callbackFn, thisArg)

There are certain rules and constraints while using this forEach method like you can not use asynchronous functions as callback functions, because forEach loop doesn't waits it just processes the immediate results, another constraint is that you cannot exit a forEach loop midway using break statement, it won't work. Another constraint is that this method is not chainable.

Example forEach

---

That's it for this article, we got to know about multiple array methods in this one. If you feel any doubts and queries you can connect me on my social profiles.

Thanks for Reading