JavaScript array method every developer should know!

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

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.

javascript

// 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

javascript

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 ]

Also published in medium