DEV Community

Cover image for Most Common JavaScript Array Methods

Most Common JavaScript Array Methods

There are some common Javascript Array methods we use in JavaScript. In this article, I tried to highlight some of the common array methods I mostly used in JavaScript even in React projects.

Image description

I have provided the 16 most used JavaScript methods. I have also included code examples for easier understanding.

Let's Go!!!

length()

Returns the number of elements in an array.

const colors = ['red', 'green', 'blue'];
console.log(colors.length); 
Enter fullscreen mode Exit fullscreen mode

Output:

3 
Enter fullscreen mode Exit fullscreen mode

toString()

Converts the elements of an array into a string and returns the result.

const colors = ['red', 'green', 'blue'];
console.log(colors.toString()); 
Enter fullscreen mode Exit fullscreen mode

Output:

"red,green,blue" 
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.

const colors = ['red', 'green', 'blue'];
console.log(colors.indexOf('green')); 
Enter fullscreen mode Exit fullscreen mode

Output:

1 
Enter fullscreen mode Exit fullscreen mode

pop()

Removes the last element from an array and returns that element.

const colors = ['red', 'green', 'blue'];
const removedColor = colors.pop();
console.log(removedColor); 
Enter fullscreen mode Exit fullscreen mode

Output:

"blue"
Enter fullscreen mode Exit fullscreen mode

push()

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

const colors = ['red', 'green'];
const newLength = colors.push('blue');
console.log(colors); 
Enter fullscreen mode Exit fullscreen mode

Output:

['red', 'green', 'blue']
Enter fullscreen mode Exit fullscreen mode

concat()

Returns a new array that combines the original array's elements with other arrays or values.

const colors = ['red', 'green'];
const moreColors = colors.concat(['blue', 'yellow']);
console.log(moreColors); 
Enter fullscreen mode Exit fullscreen mode

Output:

["red", "green", "blue", "yellow"]
Enter fullscreen mode Exit fullscreen mode

slice()

Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

const colors = ['red', 'green', 'blue', 'yellow'];
const slicedColors = colors.slice(1, 3);
console.log(slicedColors);
Enter fullscreen mode Exit fullscreen mode

Output:

["green", "blue"]
Enter fullscreen mode Exit fullscreen mode

splice()

Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

const colors = ['red', 'green', 'blue', 'yellow'];
colors.splice(2, 1, 'orange'); // Removes 1 element starting from index 2 and adds 'orange'
console.log(colors);
Enter fullscreen mode Exit fullscreen mode

Output:

["red", "green", "orange", "yellow"] 
Enter fullscreen mode Exit fullscreen mode

filter()

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

const colors = ['red', 'green', 'blue', 'yellow'];
const filteredColors = colors.filter(color => color.length > 4);
console.log(filteredColors); 
Enter fullscreen mode Exit fullscreen mode

Output:

["green", "yellow"] 
Enter fullscreen mode Exit fullscreen mode

find()

Returns the value of the first element in the array that satisfies the provided testing function, or is undefined if no such element is found.

const colors = ['red', 'green', 'blue', 'yellow'];
const foundColor = colors.find(color => color === 'green');
console.log(foundColor); 
Enter fullscreen mode Exit fullscreen mode

Output:

"green"
Enter fullscreen mode Exit fullscreen mode

forEach()

Executes a provided function once for each array element.

const colors = ['red', 'green', 'blue'];
colors.forEach(color => console.log(color.toUpperCase()));
Enter fullscreen mode Exit fullscreen mode

Output:

RED
GREEN
BLUE
Enter fullscreen mode Exit fullscreen mode

includes()

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

const colors = ['red', 'green', 'blue'];
console.log(colors.includes('yellow')); 
Enter fullscreen mode Exit fullscreen mode

Output:

false 
Enter fullscreen mode Exit fullscreen mode

map()

Creates a new array populated with the results of calling a provided function on every element in the calling array.

const colors = ['red', 'green', 'blue'];
const capitalizedColors = colors.map(color => color.toUpperCase());
console.log(capitalizedColors);
Enter fullscreen mode Exit fullscreen mode

Output:

["RED", "GREEN", "BLUE"]
Enter fullscreen mode Exit fullscreen mode

reduce()

Executes a reducer function (that you provide) on each array element, resulting in a single output value.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); 
Enter fullscreen mode Exit fullscreen mode

Output:

15
Enter fullscreen mode Exit fullscreen mode

If you found this helpful, please consider giving it a like. It means a lot to me. Thanks for Reading 🩵⭐


Image description

Top comments (0)