DEV Community

Cover image for JavaScript developers must know this Array method!
Parth • imParth
Parth • imParth

Posted on

JavaScript developers must know this Array method!

push(): Adds one or more elements to the end of an array and returns the new length of the array.

let fruits = ['apple', 'banana'];
fruits.push('cherry'); 
// output: ['apple', 'banana', 'cherry']
Enter fullscreen mode Exit fullscreen mode

pop(): Removes the last element from an array and returns that element.

let fruits = ['apple', 'banana', 'cherry'];
let last = fruits.pop(); 
// output: 'cherry', now fruits = ['apple', 'banana']
Enter fullscreen mode Exit fullscreen mode

shift(): Removes the first element from an array and returns that element.

let fruits = ['apple', 'banana', 'cherry'];
let first = fruits.shift(); 
// output: 'apple', now fruits = ['banana', 'cherry']
Enter fullscreen mode Exit fullscreen mode

unshift(): Adds one or more elements to the beginning of an array and returns the new length of the array.

let fruits = ['banana', 'cherry'];
fruits.unshift('apple'); 
// output: ['apple', 'banana', 'cherry']
Enter fullscreen mode Exit fullscreen mode

indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let fruits = ['apple', 'banana', 'cherry'];
let index = fruits.indexOf('banana'); 
// output: 1
Enter fullscreen mode Exit fullscreen mode

includes(): Determines whether an array includes a certain element, returning true or false as appropriate.

let fruits = ['apple', 'banana', 'cherry'];
let hasApple = fruits.includes('apple'); 
// output: true
Enter fullscreen mode Exit fullscreen mode

slice(): Returns a shallow copy of a portion of an array into a new array object.

let fruits = ['apple', 'banana', 'cherry'];
let someFruits = fruits.slice(0, 2); 
// output: ['apple', 'banana']
Enter fullscreen mode Exit fullscreen mode

reverse(): Reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

let fruits = ['apple', 'banana', 'cherry'];
fruits.reverse(); 
// output: ['cherry', 'banana', 'apple']
Enter fullscreen mode Exit fullscreen mode

concat(): Merges two or more arrays. This method does not change the existing arrays but instead returns a new array.

let fruits = ['apple', 'banana'];
let moreFruits = ['cherry', 'date'];
let allFruits = fruits.concat(moreFruits); 
// output: ['apple', 'banana', 'cherry', 'date']
Enter fullscreen mode Exit fullscreen mode

join(): Joins all elements of an array into a string and returns this string.

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.join(', '); 
// output: 'apple, banana, cherry'
Enter fullscreen mode Exit fullscreen mode

lastIndexOf(): Returns the last index at which a given element can be found in the array, or -1 if it is not present.

let numbers = [1, 2, 3, 2, 1];
numbers.lastIndexOf(2); 
// output: 3
Enter fullscreen mode Exit fullscreen mode

forEach(): Executes a provided function once for each array element.

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(fruit => console.log(fruit));
/* output:
'apple'
'banana'
'cherry'
*/
Enter fullscreen mode Exit fullscreen mode

map(): Creates a new array with the results of calling a provided function on every element in the calling array.

let numbers = [1, 4, 9];
let roots = numbers.map(Math.sqrt); 
// output: [1, 2, 3]
Enter fullscreen mode Exit fullscreen mode

filter(): Creates a new array with all elements that pass the test implemented by the provided function.

let numbers = [1, 4, 9];
let bigNumbers = numbers.filter(number => number > 5); 
// output: [9]
Enter fullscreen mode Exit fullscreen mode

reduce(): Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); 
// output: 10
Enter fullscreen mode Exit fullscreen mode

some(): Tests whether at least one element in the array passes the test implemented by the provided function. Returns a Boolean.

let numbers = [1, 2, 3, 4];
let hasNegativeNumbers = numbers.some(number => number < 0); 
// output: false
Enter fullscreen mode Exit fullscreen mode

every(): Tests whether all elements in the array pass the test implemented by the provided function. Returns a Boolean.

let numbers = [1, 2, 3, 4];
let allPositiveNumbers = numbers.every(number => number > 0); 
// output: true
Enter fullscreen mode Exit fullscreen mode

find(): Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

let numbers = [1, 5, 10, 15];
let found = numbers.find(function(element) {
  return element > 9;
}); 
// output: 10
Enter fullscreen mode Exit fullscreen mode

toString(): Returns a string representing the specified array and its elements.

let fruits = ['apple', 'banana', 'cherry'];
let result = fruits.toString(); 
// output: 'apple,banana,cherry'
Enter fullscreen mode Exit fullscreen mode

These methods form the backbone of array manipulation in JavaScript, and knowing how to use them can greatly simplify your coding tasks.

Top comments (0)