Some most useful JavaScript Array Methods with example

Javascript array is a single variable that stores multiple values with special syntax. It is a very powerful tool in Javascript.

In this article, we will explore some useful methods used in array manipulation in Javascript.

Array Literal or Array constructor syntax is two different ways of creating an array.

Array literal syntax:

const num = [1, 2, 3, 4];

Array constructor syntax:

const num = new Array(1, 2, 3,4);

Length property:

The length property of an array returns the number of elements in that array.

const name = ['Zayn', 'Ryan', 'Linda', 'Zoha', 'Crish'];
console.log(name.length);
// expected output: 5

The length property of an array is useful to loop through an array.

const ages = [11, 22, 34, 40];
const length = ages.length;
for (let i = 0; i < length; i++) {
  ages[i] *= 2;
}
// ages is now [22, 24, 68, 80]

Array Methods:

JavaScript has some built-in array methods that make coding a lot easier and clean and easy to understand.

1.Push():

We use the push() method to add an item end an array.

const names = ['Zayn', 'Ryan', 'Linda', 'Zoha', 'Crish'];
let newName = names.push('Maria')
// ['Zayn', 'Ryan', 'Linda', 'Zoha', 'Crish', 'Maria']

2.Pop():

This method is used to delete the last element from an array and return the deleted element.

lastElement = names.pop();
console.log(names); // [‘Zayn’, ‘Ryan’, ‘Linda’, ‘Zoha’]
console.log(lastElement); // Maria

3.Unshift():

We use unshift() method to add items beginning of the array. If you want to add multiple items, you can just pass the arguments to the unshift method.

To add multiple items to the beginning of the array, just pass the required arguments to unshift method.

let fruits = ['mango','strawberry', 'orange']
fruits.unshift('apple');
console.log(fruits);// ['apple', 'mango','strawberry', 'orange']
fruits.unshift('kiwi', 'avocado');//multiple items insert
console.log(fruits);// ['kiwi', 'avocado', 
'apple', 'mango','strawberry', 'orange']

4.Shift():

It removes an item from the beginning of the array.

let fruits = ['mango','strawberry', 'orange'];
 fruits.shift(); // ['strawberry', 'orange'];

5. forEach():

This method is an efficient way to iterate over all array items. Its first argument is the callback function, which is invoked for every item in the array with 3 arguments: item, index, and the array itself.

const num= [11, 22, 33];
 arr.forEach(element =>{
 console.log(element)
});
//11
//22
//33

6. Reduce():

This executes a callback function that is passed in on each element of the array, resulting in single output value.

 const arr = [1, 2, 3, 4]; 
const callback = (accumulator, currentValue) => accumulator + currentValue; 
// 1 + 2 + 3 + 4 
console.log(arr.reduce(callback)); // output: 10

7.IndexOf():

This method searches the array for the specified item, and returns its position. The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array. Returns -1 if the item is not found.

const days = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’,   ‘Friday’]; 
console.log(days.indexOf(‘Sunday’)); // -1, 
const fruits= [‘Apple’, ‘Orange’, ‘Mango’, ‘Banana’, ‘Stra’]; 
console.log(days.indexOf(‘Monday’)); // 0

8.Map():

This method creates a new array with the results of calling a provided function on every element in this array.

const personAges =[11,22,33,44,55];
const age = personAges.map(element => element + 10);
console.log(age)// [22,33,44,55,66];

9.Slice():

This method returns a new array copying all items from the index start to end (not including end). Both start and end can be negative, in that case, a position from the array end is assumed.

const arr = [“t”, “e”, “s”, “t”];
alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3) 
alert( arr.slice(-2) ); // s,t (copy from -2 till the end)

10.Filter():

This method creates a new array with only elements that passes the condition inside the provided function.

const name= [Zayn, Zoha, John, Maria, Diana, Maya, Caroline];
const filterdName = arr.filter(element => element === Zayn|| element ===Zoha);
console.log(filterdName) ; //[Zayn, Zoha]

Conclusion:

Working with an array of data is one of my favorite aspects of programming. These methods make coding a lot easier and also make our code look clean and easy to understand.