DEV Community

Cover image for JavaScript Array Methods
Nasirul Islam
Nasirul Islam

Posted on

JavaScript Array Methods

What is the array method in JavaScript?

Array method in JavaScript is some of the built-in functions of JavaScript. Which we can apply to an array. Each method has different functions and features. Using which we can perform various tasks on an array. This saves us from having to write simple functions.

These are the array methods of JavaScript:

Image description

concat():

The concat() method is used to add two or more arrays. It does not change the existing array, but creates a new array and returns a copy of that array.

Example:

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

Enter fullscreen mode Exit fullscreen mode

filter():

The filter() method creates a new array with each element of an array, with the elements that meet the conditions inside the function.

Example:

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Enter fullscreen mode Exit fullscreen mode

find():

The find() method returns the value of the first element of an array by comparing it with each element of an array. The element that meets the conditions inside the function.

Example:

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

Enter fullscreen mode Exit fullscreen mode

findIndex():

The findIndex() method gives the index number of the first element of an array by comparing it with each element of an array. The component that meets the conditions inside the function. Otherwise, it returns -1, indicating that no element met the condition.

Example:

const array1 = [5, 12, 8, 9, 140, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 4

Enter fullscreen mode Exit fullscreen mode

forEach():

The forEach() method calls a function once for each element of an array, and the function returns one element at a time.

Example:

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

Enter fullscreen mode Exit fullscreen mode

includes():

The includes() method checks an array to see if it contains that specific element. And it returns true or false.

Example:

const array1 = [1, 2, 3];
console.log(array1.includes(2));
// expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// expected output: true
console.log(pets.includes('at'));
// expected output: false

Enter fullscreen mode Exit fullscreen mode

indexOf():

The indexOf() method returns the first index of the specified element in the array, otherwise returns -1 if it is not found.

Example:

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

console.log(beasts.indexOf('giraffe'));
// expected output: -1

Enter fullscreen mode Exit fullscreen mode

pop():

The pop() method removes the last element from an array and returns that element. And forms a new array with the rest of the elements except the last one. This method changes the length of the array.

Example:

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

Enter fullscreen mode Exit fullscreen mode

shift():

The shift() method removes the first element from an array and returns that removed element. And forms a new array with all the other elements except the first one. This method changes the length of the array.

Example:

const array1 = [1, 2, 3];

console.log(array1.shift());
// expected output: 1

console.log(array1);
// expected output: Array [2, 3]

Enter fullscreen mode Exit fullscreen mode

push():

The push() method adds new elements to the end of an array, forms a new array with the element at the end, and returns a new length. This method changes the length of the array.

Example:

const animals = ['pigs', 'goats', 'sheep'];

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "chickens", "cats", "dogs"]

Enter fullscreen mode Exit fullscreen mode

unshift():

The unshift() method adds one or more new elements to the beginning of an array, forms a new array with the first elements, and returns a new length. This method changes the length of the array.

Example:

const array1 = [1, 2, 3];

console.log(array1);
// expected output: Array [1, 2, 3]

array1.unshift(4, 5)

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

Enter fullscreen mode Exit fullscreen mode

Conclusion

From this tutorial, we have learned some common array methods. Part-2 will come soon with more details of the Array Method.

Reference

Thanks for reading

Reach out to me on:

Top comments (0)