JavaScript array method every developer should know!

4 minute read

Arrays are one of the most popular and useful object in JavaScript. There are lots of build in properties and method associated with arrays. I have listed top array methods every developer should know and make their life easier when dealing with arrays.

  • push()
  • pop()
  • shift()
  • unshift()
  • concat()
  • slice()
  • splice()
  • reverse()
  • every()
  • join()
  • forEach()
  • map()
  • filter()
  • find()
  • reduce()
  • sort()

push()
push append element to the end of an array.

let products = ['chairs', 'tables', 'binders', 'paper', 'copiers'];
newProducts = products.push('phones');
console.log(newProducts);
// Output: 6
console.log(products);
// Output: [ 'chairs', 'tables', 'binders', 'paper', 'copiers', 'phones' ]

pop()
pop extract the last element of an array and return that element.

let products = ['chairs', 'tables', 'binders', 'paper', 'copiers'];
popProduct = products.pop();
console.log(popProduct);
// Output: copiers
console.log(products);
// Output: [ 'chairs', 'tables', 'binders', 'paper' ]

shift()
shift extract the first element of an array and return that element.

let products = ['chairs', 'tables', 'binders', 'paper', 'copiers'];
shiftProduct = products.shift();
console.log(shiftProduct);
// Output: chairs
console.log(products);
// Output: [ 'tables', 'binders', 'paper', 'copiers' ]

unshift()
unshift append an element to the beginning of an array.

let products = ['chairs', 'tables', 'binders', 'paper', 'copiers'];
unshiftProduct = products.unshift('phones');
console.log(unshiftProduct);
// Output: 6
console.log(products);
// Output: [ 'phones', 'chairs', 'tables', 'binders', 'paper', 'copiers' ]

concat()
The concat method is used to create new array by merging two or more arrays.

let arr1 = [12, 15, 34, 56, 96];
let arr2 = [09, 20, 45, 89, 90];

newArr = arr1.concat(arr2);
console.log(newArr);
// Output: [ 12, 15, 34, 56, 96, 9, 20, 45, 89, 90 ]

slice()
The slice method is used to create new array using selected element from an array without changing the contents of that array.

let friends = ['Abby', 'Smith', 'Bob', 'Robert', 'Jane', 'Anna'];
let sliceFriends1 = friends.slice(2); /*start from position 2 to end*/
console.log(sliceFriends1);
// Output: [ 'Bob', 'Robert', 'Jane', 'Anna' ]

sliceFriends2 = friends.slice(2, 4); /*start from position 2 to 3, excluding 4*/
console.log(sliceFriends2);
// Output: [ 'Bob', 'Robert' ]

let sliceFriends3 = friends.slice(2, 5);
/*start from position 2 to 4, excluding 5*/
console.log(sliceFriends2);
// Output: [ 'Bob', 'Robert', 'Jane' ]

splice()
The splice method is used to delete, replace or insert a new element to an array. It changes the contents of existing array.

let days = ['Saturday', 'Monday', 'Tuesday', 'Thursday'];

/*starting index number, ending index number, will remove item(s) based on this numbers*/
days.splice(1, 2);
console.log(days);
// Output: [ 'Saturday', 'Thursday' ]

days.splice(1);
console.log(days);
// Output: [ 'Saturday' ]

/*Insert at index 1 */
let days2 = ['Saturday', 'Monday', 'Tuesday', 'Thursday'];
days2.splice(1, 0, 'Sunday');
console.log(days2);
// Output: [ 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Thursday' ]

/*Insert at index 4 */
days2.splice(4, 0, 'Wednesday');
console.log(days2);
// Output: [ 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday' ]

/*replaces 1 element at index 4 */
let days3 = ['Saturday', 'Sunday', 'Monday', 'Tuesday', 'Thursday'];
days3.splice(4, 1, 'Wednesday');
console.log(days3);
// Output: [ 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday' ]

reverse()
The reverse method reverse element of an array.

let array1 = ['Sat', 'Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri'];
let reversed = array1.reverse();
console.log(reversed);
// Output: [ 'Fri', 'Thur', 'Wed', 'Tues', 'Mon', 'Sun', 'Sat' ]

join()
The join method is used to concat all the elements of an array separated by commas or any specific separator string.

let dob = ['day', 'month', 'year'];
console.log(dob.join('/'));
// Output: day/month/year
console.log(dob.join(' '));
// Output: day month year

every()
The every method tests whether all element of an array pass the test implemented by a callback function and return boolean value.

let array1 = [45, 56, 8, 9, 10];
let checkArray1 = array1.every((item) => item > 7);
console.log(checkArray1);
// Output: true

let array2 = [5, 6, 23, 10];
let checkArray2 = array2.every((item) => item > 7);
console.log(checkArray2);
// Output: false

forEach()
The forEach accepts a callback function and executes the callback function once for each of the element of an array.

let array = ['Sat', 'Sun', 'Mon'];
array.forEach((item) => console.log(item));
// Output:
// Sat
// Sun
// Mon

map()
The map accepts a callback function and executes the callback function and return a new array.

let prices = [100, 80, 35, 99, 50, 70, 88];
let doublePrices = prices.map((price) => price * 2);
console.log(doublePrices);
// Output: [ 200, 160,  70, 198, 100, 140, 176 ]

filter()
The filter accepts a callback function and creates a new array with all elements that pass the test implemented by that function.

let prices = [100, 80, 35, 99, 50, 70, 88];
let newPrices = prices.filter((price) => price > 50);
console.log(newPrices);
// Output: [ 100, 80, 99, 70, 88 ]

find()
The find accepts a callback function and returns the value of the first element which pass the test implemented by that function.

let prices = [100, 80, 35, 99, 50, 70, 88];
let newPrices = prices.find((price) => price > 50);
console.log(newPrices);
// Output: 100

reduce()
The reduce method applies a callback function simultaneously against two values from left to right of an array and reduce it to a single value.

// Adding values- classic example
let prices = [100, 80, 35, 99, 50, 70, 88];
let totalPrice = 0;
for (let i = 0; i < prices.length; i++) {
  totalPrice += prices[i];
}
console.log(totalPrice);
// Output: 522

// Using reduce method:
let totalReduce = prices.reduce((total, price) => total + price, 0);
console.log(totalReduce);
// Output: 522

sort()
The sort method allows to sort elements of an array in place. The default sorting order is ascending

let prices = [100, 80, 35, 99, 50, 70, 88];
// ascending sorting:
let sortedPrice = prices.sort((a, b) => a - b);
console.log(sortedPrice);
// Output : [  35, 50,  70, 80,  88, 99, 100 ]

// descending sorting:
let sortedPriceDesc = prices.sort((a, b) => b - a);
console.log(sortedPriceDesc);
// Output : [  100, 99, 88, 80, 70, 50, 35 ]

This article also published in medium

Leave a Comment