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.
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); /*start from position 2 to end*/
// 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: truelet 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 ]