Important Array Methods of JavaScript (original) (raw)

JavaScript arrays are powerful tools for managing collections of data. They come with a wide range of built-in methods that allow developers to manipulate, transform, and interact with array elements.

Some of the most important array methods in JavaScript are

Table of Content

• 1. JavaScript push() Method
• 2. JavaScript pop() Method
• 3. JavaScript shift() Method
• 4. unshift() Method
• 5. JavaScript indexOf() Method
• 6. JavaScript includes() Method
• 7. JavaScript concat() Method
• 8. JavaScript forEach() Method
• 9. JavaScript sort() Method
• 10. JavaScript map() method
• 11. JavaScript reduce() Method
• 12. JavaScript filter() Method
• 13. JavaScript find() & findIndex() Method
• 14. JavaScript slice() & splice() Method
• 15. JavaScript some() and every() Method
• 16. Javascript forEach() method
• 17. JavaScript Array reverse() Method
• 18. Javascript Array every() method

**1. JavaScript push() Method

The push() method adds one or more elements to the end of an array and returns the new length.

JavaScript `

let a = ['Hello','GFG','JS']; a.push('React'); console.log(a);

`

Output

[ 'Hello', 'GFG', 'JS', 'React' ]

**In this example

• The **push() method adds ‘React’ to the end of the array a.
• Initial array: [‘Hello’, ‘GFG’, ‘JS’]
• After push(): [‘Hello’, ‘GFG’, ‘JS’, ‘React’]

**2. JavaScript pop() Method

The pop() method removes the last element from an array and returns it.

JavaScript `

let a = ["Hello", "GFG", "JS"]; let ele = a.pop(); console.log(ele); console.log(a);

`

Output

JS [ 'Hello', 'GFG' ]

**In this example

• The pop() method removes the last element from the array and returns it.
• Removed element (ele): “JS”
• Updated array (a): [“Hello”, “GFG”]

**3. JavaScript shift() Method

The shift() method removes the first element from an array and returns it.

JavaScript `

let a = ["Hello", "GFG", "JS"]; let ele = a.shift(); console.log(ele); console.log(a);

`

Output

Hello [ 'GFG', 'JS' ]

**In this example

• Removed element (ele): “Hello”
• Updated array (a): [“GFG”, “JS”]

**4. unshift() Method

The unshift() method is used to add the elements in the array from the front side.

JavaScript `

let a = ["Hello", "GFG", "JS"]; a.unshift("React"); console.log(a);

`

Output

[ 'React', 'Hello', 'GFG', 'JS' ]

**In this example

• The unshift() method adds “React” to the beginning of the array a.
• Updated array: [“React”, “Hello”, “GFG”, “JS”]

**5. JavaScript indexOf() Method

The indexOf() method is used to find the index of a particular element in an array.

JavaScript `

let a = ["Hello", "GFG", "JS"]; console.log(a.indexOf('GFG'));

`

**In this example

• The indexOf() method returns the index of the first occurrence of ‘GFG’ in the array a.
• Output: 1 (since ‘GFG’ is at index 1).

**6. JavaScript includes() Method

The includes() method is used to check whether the array contains the specified element or not.

JavaScript `

let a = ["Hello", "GFG", "JS"]; console.log(a.includes("GFG")); console.log(a.includes("React"));

`

**In this example

• a.includes(“GFG”) returns true (since “GFG” is in the array).
• a.includes(“React”) returns false (since “React” is not in the array).

**7. JavaScript concat() Method

The concat() method is used to concat or basically join two different arrays from end to end.

JavaScript `

let a1 = ["Hello","GFG", "Js"]; let a2 = ["React"]; let new = a1.concat(a2);

console.log(a1); console.log(a2); console.log(new);

`

**Output:

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ]
[ 'React' ]
[ 'Hello', 'GeeksforGeeks', 'JavaScript', 'React' ]

**In this example

• The concat() method merges a1 and a2 into a new array without modifying the original arrays.
• a1: [“Hello”, “GFG”, “Js”] (unchanged)
• a2: [“React”] (unchanged)
• new: [“Hello”, “GFG”, “Js”, “React”] (merged array)

**8. JavaScript forEach() Method

The forEach() works as a loop over an array where for every element the function just runs once only.

JavaScript `

let a = ["Hello", "GFG", "JS"]; a.forEach(function (element) { console.log(element) });

`

Output

Hello GeeksforGeeks JavaScript

**In this example

• The forEach() method iterates over each element in the array a and executes the provided function for each element.

**9. JavaScript sort() Method

The sort() method sorts the elements of an array in alphabetical order in ascending order.

JavaScript `

let a = ["Hello", "GFG", "JS"]; console.log(a); a.sort(); console.log(a);

`

Output

[ 'Hello', 'GeeksforGeeks', 'JavaScript' ] [ 'GeeksforGeeks', 'Hello', 'JavaScript' ]

**In this example

• a = [“Hello”, “GFG”, “JS”]; initializes an array with strings.
• console.log(a); prints the original array.
• a.sort(); sorts the array in alphabetical order, modifying it in place.
• console.log(a); prints the sorted array.

**10. JavaScript map() method

The map() method iterates over an array, transforms the array according to user-specified conditions and returns a new array.

JavaScript `

let a1 = [1, 2, 3, 4, 5]; console.log(a1);

let a2 = a1.map(function (elem) { return elem * 5; }); console.log(a2);

`

Output

[ 1, 2, 3, 4, 5 ] [ 5, 10, 15, 20, 25 ]

**In this example

• a1 = [1, 2, 3, 4, 5]; initializes an array.
• console.log(a1); prints the original array.
• a1.map(function (elem) { return elem * 5; }); creates a new array a2 where each element is multiplied by 5.
• console.log(a2); prints the modified array.

**11. JavaScript reduce() Method

The reduce() method uses a reducer function that reduces the results into a single output.

JavaScript `

let a1 = [1, 2, 3, 4, 5]; console.log(a1);

let sum = a1.reduce( function (acc, elem) { return acc + elem; });

console.log(sum);

`

Output

[ 1, 2, 3, 4, 5 ] 15

**In this example

• a1 = [1, 2, 3, 4, 5]; initializes an array.
• console.log(a1); prints the original array.
• a1.reduce(function (acc, elem) { return acc + elem; }); calculates the sum of all elements in a1 using reduce.
• console.log(sum); prints the sum of the array elements.

**12. JavaScript filter() Method

The filter() method is used to filter out the contents, as per the user-specified condition, in the form of a new array.

JavaScript `

let a1 = [1, 2, 3, 4, 5]; console.log(a1);

let a2 = a1.filter(function (elem) { return elem % 2 === 0; }); console.log(a2);

`

Output

[ 1, 2, 3, 4, 5 ] [ 2, 4 ]

**In this example

• a1 = [1, 2, 3, 4, 5]; initializes an array.
• console.log(a1); prints the original array.
• a1.filter(function (elem) { return elem % 2 === 0; }); creates a new array a2 containing only even numbers from a1.
• console.log(a2); prints the filtered array.

**13. JavaScript find() & findIndex() Method

The find() method finds out the first value which passes the user-specified conditions and findIndex() method finds out the first index value which passes the user-specified conditions.

JavaScript `

let a = [1, 2, 3, 4, 5]; let find = a.find(function (elem) { return elem > 4 }); console.log(find);

let val = a.findIndex(function (elem) { return elem >= 4 }); console.log(val);

`

**In this example

• a.find(function (elem) { return elem > 4; }); finds the first element in the array greater than 4 (returns 5).
• a.findIndex(function (elem) { return elem >= 4; }); finds the index of the first element greater than or equal to 4 (returns 3).

**14. JavaScript slice() & splice() Method

The slice() selects the specified number of elements without affecting the original array elements whereas splice() removes the selected elements from the original array itself.

JavaScript `

let a = [1, 2, 3, 4, 5]; let slice = a.slice(0, 2); console.log("Slice Array: " + slice); console.log("Original Array: " + a); let splice = a.splice(0, 2); console.log("Slice Array: " + splice); console.log("Original Array: " + a);

`

Output

Slice Array: 1,2 Original Array: 1,2,3,4,5 Slice Array: 1,2 Original Array: 3,4,5

**In this example

• **arr.slice(0, 2); creates a new array from the original array with elements from index 0 to 2 (not including index 2). It does not modify the original array.
• **arr.splice(0, 2); removes the first 2 elements from the original array and returns them.

**15. JavaScript some() and every() Method

The some() method checks the user-specified conditions on some elements of an array (i.e. it checks for a few elements only), whereas every() method checks the user-specified conditions on every element of an array then returns the results in true or false.

JavaScript `

let a = [1, 2, 3, 4, 5]; let n1 = a.every( function (elem) { return elem > 0 }); let n2 = a.some( function (elem) { return elem < 0 }); console.log(n1); console.log(n2);

`

**In this example

• **arr.every(function (elem) { return elem > 0; }); checks if all elements in the array are greater than 0 (returns true).
• **arr.some(function (elem) { return elem < 0; }); checks if at least one element in the array is less than 0 (returns false).

16. Javascript forEach() method

The forEach() method in JavaScript is used to execute a provided function once for each element in an array.

JavaScript `

let n = [1, 2, 3, 4, 5]; n.forEach(function(elem, index) { console.log(elem); });

`

**In this example

• n.forEach(function(elem, index) { console.log(elem); }); iterates over each element in the num array.
• It logs each element to the console.

17. JavaScript Array reverse() Method

The reverse() method is used to reverse the order of the elements in an array.

JavaScript `

let a = [1, 2, 3, 4, 5]; a.reverse(); console.log(a);

`

**In this example

• **a.reverse(); reverses the order of elements in the array a in place.
• console.log(a); prints the reversed array.

18. Javascript Array every() method

The every() method is used to check if all elements in the array pass the test implemented by the provided function. It returns a boolean value true if all elements satisfy the test otherwise returns false.

JavaScript `

const a = [2, 4, 6]; const isEven = (num) => num % 2 === 0; const allEven = a.every(isEven); console.log(allEven);

`