Array methods in JavaScript. array.map(), array.filter(), array.push(), array.shift() and much more

Photo by Florian Olivo on Unsplash

An array in JavaScript is a data structure, which can hold one or more values at a time. Unlike most languages where array is a reference to the multiple variables, in JavaScript array is a single variable that stores multiple elements.

Array methods are nothing but JavaScript built-in functions which can be applied on the array. Array has many methods to perform different operations and to make things a lot more easier.

Array Methods

1. array.push()
2. array.pop()
3. array.shift()
4. array.unshift()
5. array.map()
6. array.filter()
7. array.sort()
8. array.concat()
9. array.every()
10. array.some()
11. array.includes()
12. array.join()
13. array.find()
14. array.findIndex()
15. array.indexOf()
16. array.reverse()

array.push()

The push()method adds one or more elements to the end of the array. It returns the new length of the array.

const array = [1,2,3,4];
array.push(5,6,7); // returns 7 (new length)
console.log(array);

output :-

[1, 2, 3, 4, 5, 6, 7]

array.pop()

The pop() method extracts the last element from the array and returns that element.

// ---------example 1---------
const array2 = [1,2,3];
const lastElement = array2.pop();
console.log(lastElement);
// ---------example 2---------
const array3 = ['a','b','c'];
const lastElement2 = array3.pop();
console.log(lastElement2);

Output :-

3
c

array.shift()

The shift() method extracts the first element of the array the returns the element.

const array4 = ['surya', 'auro', 'soumya'];
const firstElement = array4.shift();
console.log(firstElement);

Output :-

surya

array.unshift()

The unshift() method adds element to the beginning of the array and returns the new length of the array.

const array5 = [1,2,3,4];
array5.unshift(0); // returns 5 (new length)
console.log(array5);

Output :-

[0,1,2,3,4]

array.map()

The map() method calls a function for each element of the array and returns the array of results.

const array7 = [1,2,3,4,5,6,7,8];
const mappedArray = array7.map((each) => each = each+1);
console.log(mappedArray);

Output :-

[2, 3, 4, 5, 6, 7, 8, 9]

array.filter()

The filter() method creates a new array filled with all the array elements that pass the specified condition.

//-----------Example 1------------
const array8 = ['a','b','c','d','c','e','c'];
const filteredArray = array8.filter((each) => each === 'c');
console.log('Example 1 -->',filteredArray);
//-----------Example 2------------
const array9 = ['a','b','c','d','c','e','c'];
const filteredArray2 = array9.filter((each) => each !== 'c');
console.log('Example 2 -->',filteredArray2);

Output :-

Example 1 --> ["c", "c", "c"]
Example 2--> ["a", "b", "d", "e"]

array.sort()

The sort() method sorts values as strings. The default order of sorting the array is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

const array10 = ['mango', 'apple', 'kiwi','orange'];
console.log(array10.sort());

As sort() method sorts array according to the UTF-16 values and not according to the mathematical values it does not go right with numbers. Hence we have to pass a comparing function in the sort() method that will have two arguments and should return positive number or negative number or zero. If ‘a’ and ‘b’ are the two arguments of the comparing function then if the comparing function returns positive number then ‘b’ will come first, if the comparing function returns negative number then ‘a’ will come first, if the comparing function returns 0 then nothing will change.

const array11 = [235,12,265,65,99,1000];
const ascending = array11.sort((a, b) => a-b);
console.log('ascending --> ',ascending);
const descending = array11.sort((a, b) => b-a);
console.log('descending --> ',descending);

Output :-

["apple", "kiwi", "mango", "orange"]
ascending --> [12, 65, 99, 235, 265, 1000]
descending --> [1000, 265, 235, 99, 65, 12]

array.concat()

The concat() method merges two or more arrays and creates a new array without changing the old existing arrays.

const array12 = [1,2,3,4,5];
const array13 = [12,5,6767,43,2];
console.log(array12.concat(array13));

Output :-

[1, 2, 3, 4, 5, 12, 5, 6767, 43, 2]

array.every()

The every() method returns true or false based on the fact that every element of the array passes the provided condition or not.

const array14 = [5,10,15,20,25];
console.log(array14.every(each => each%5 === 0));
console.log(array14.every(each => each%2 === 0));

Output :-

true
false

array.some()

The some() method returns true or false based on the fact that at least one element of the array passes the provided condition or not.

const array15 = [5,10,15,20,25];
console.log(array15.some(each => each%7 === 0));
console.log(array15.some(each => each%2 === 0));

Output :-

false
true

array.includes()

The includes() method determines whether the given array contains the specified element. It returns true if an array contains the element, otherwise false.

const array16 = [1,2,3,4,5];
console.log(array16.includes(5))
console.log(array16.includes(8))

Output :-

true
false

array.join()

The join() method concatenates every element of the array with a specified separator and returns that concatenated string.

const array17 = ['I', 'am', 'a', 'frontend', 'software', 'developer.'];
console.log(array17.join(' '));

Output :-

I am a frontend software developer.

array.find()

The find() method returns the value of the first element in the array that passes the given condition.

const array18 = [1,23,45,25,5,77,147];
console.log(array18.find(item => item%5 === 0))

Output :-

45

array.findIndex()

The findIndex() method returns the index of the first element in the array that passes the specified condition.

const array19 = [1,23,45,25,5,77,147];
console.log(array19.findIndex(item => item%5 === 0));

Output :-

2

array.indexOf()

The indexOf() method returns the position of the specified item in an array.

const array20 = [1,23,45,25,5,77,147];
console.log(array20.indexOf(77));

Output :-

5

array.reverse()

The reverse() method reverses the array.

const array21 = [1,23,45,25,5,77,147];
console.log(array21.reverse());

Output :-

[147, 77, 5, 25, 45, 23, 1]

Building To-Do List App Using vanilla JavaScript For Absolute Beginners

String And Number methods in JavaScript.