JavaScript Array Methods
Tags: javascript, array, webdev, programming
Published: 2021-12-20 07:31:44

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kd41rkjg2lazl24q6cr.jpeg)

## 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"]

```

## 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"]

```

## 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

```

## 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

```

## 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"

```

## 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

```

## 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

```

## 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"]

```

## 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]

```

## 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"]

```

## 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]

```

## Conclusion

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

## Reference

- [MDN Web Docs](https://developer.mozilla.org/) 
- [W3Schools Web Docs](https://www.w3schools.com/)

## Thanks for reading

**Reach out to me on:**

- [Portfolio](https://nasirul-islam.netlify.app/)
- [GitHub](https://github.com/Nasirul-Islam)
- [LinkedIn](https://www.linkedin.com/in/nasirul866/)