DEV Community

Cover image for JavaScript Array Methods
Nasirul Islam
Nasirul Islam

Posted on

6 4

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:

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay