Open In App

JavaScript Array Methods

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

JavaScript Array is an object that is used to store a collection of ordered elements under a single variable. Arrays can store elements of different data types and are resizable. There are two methods to create arrays- Array literal and Array constructor.

Array Methods in JavaScript are some built-in methods and properties that simplify operating on Arrays. This tutorial covers some of the important array methods in JavaScript and explains JavaScript Array methods with examples. Array methods and properties like array length(), unshift(), replace(), sort(), etc. are explained with syntax and their example.

Learn More on JavaScript Array

Now let’s look at the JS array methods and properties.

JavaScript Array Methods

Below is the JavaScript Array Methods list, covering all important array methods and properties in JavaScript with examples.

Let’s discuss these JavaScript array methods and examples, to understand their functioning and uses.

JavaScript Array length 

The length property returns the length of the given array.

Syntax:

Array.length

Example

Getting the length of the given array.

Javascript
// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Accessing the Array Length
console.log(courses.length);

Output
4


JavaScript Array toString() Method

The toString() method converts the given value into the string.

Syntax

arr.toString()


Example

Converting the given array into the strings.

Javascript
// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Converting array ot String
let str = courses.toString();

console.log(str);

Output
HTML,CSS,JavaScript,React


JavaScript Array join() Method

This join() method helps to join two arrays as a string. If we pass any parameter to this method it will join the array by using that parameter.

Syntax

array.join(separator)

Example

Joining the given array by the “|” symbol.

Javascript
// Original Array
let courses = ["HTML", "CSS", "JavaScript", "React"];

// Joining the array elements
console.log(courses.join('|'));

Output
HTML|CSS|JavaScript|React


JavaScript Array delete Operator

The delete operator is used to delete the given value which can be an object, array, or anything.

Syntax

delete object
// or
delete object.property
// or
delete object['property']

Example

Deleting the given object’s property by using the delete operator.

Javascript
let emp = { 
    firstName: "Raj", 
    lastName: "Kumar", 
    salary: 40000 
} 

console.log(delete emp.salary); 
console.log(emp);

Output
true
{ firstName: 'Raj', lastName: 'Kumar' }


JavaScript Array concat() Method

The concat() method is used to concatenate two or more arrays and it gives the merged array.

Syntax

let newArray = arr.concat()  // or
let newArray = arr1.concat(arr2) // or
let newArray = arr1.concat(arr2, arr3, ...) // or
let newArray = arr1.concat(value0, value1)

Example

Concatenate method to concatenate of three arrays.

Javascript
// Declare three arrays
let arr1 = [11, 12, 13];
let arr2 = [14, 15, 16];
let arr3 = [17, 18, 19];

let newArr = arr1.concat(arr2, arr3);
console.log(newArr);

Output
[
  11, 12, 13, 14, 15,
  16, 17, 18, 19
]


JavaScript Array flat() Method

The flat() method is used to flatten the array i.e. it merges all the given array and reduces all the nesting present in it.

Syntax

arr.flat([depth])

Example

Reducing the nesting of the given array using the flat() method.

Javascript
// Creating multilevel array
const arr = [['1', '2'], ['3', '4', '5',['6'], '7']];

// Flat the multilevel array
const flatArr= arr.flat(Infinity);
console.log(flatArr);

Output
[
  '1', '2', '3',
  '4', '5', '6',
  '7'
]


Javascript Array.push() Method

The push() method is used to add an element at the end of an Array. As arrays in JavaScript are mutable objects, we can easily add or remove elements from the Array. And it dynamically changes as we modify the elements from the array. 

Syntax

Array.push(item1, item2 …)

Example

Adding new elements such as some numbers and some string values to the end of the array using the push() method.

JavaScript
// Declaring and initializing arrays
let numArr = [10, 20, 30, 40, 50];

// Adding elements at the end of an array
numArr.push(60);
numArr.push(70, 80, 90);
console.log(numArr);


let strArr = ["piyush", "gourav", "smruti", "ritu"];
strArr.push("sumit", "amit");

console.log(strArr);

Output
[
  10, 20, 30, 40, 50,
  60, 70, 80, 90
]
[ 'piyush', 'gourav', 'smruti', 'ritu', 'sumit', 'amit' ]


Javascript Array.unshift() Method

The unshift() method is used to add elements to the front of an Array.

Syntax

Array.unshift(item1, item2 …)

Example

Adding new elements to the beginning of the array using the unshift() method.

JavaScript
// Declaring and initializing arrays
let numArr = [20, 30, 40];

// Adding element at the beginning
// of an array
numArr.unshift(10, 20);
console.log(numArr);


// Declaring and initializing arrays
let strArr = ["amit", "sumit"];

// Adding element at the beginning
// of an array
strArr.unshift("sunil", "anil");
console.log(strArr);

Output
[ 10, 20, 20, 30, 40 ]
[ 'sunil', 'anil', 'amit', 'sumit' ]


JavaScript Array.pop() Method

The pop() method is used to remove elements from the end of an array. 

Syntax

Array.pop()

Example

Remove an element from the end of the array using the pop() method.

JavaScript
// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing elements from end 
// of an array
numArr.pop();

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Removing elements from end 
// of an array
strArr.pop();

console.log(strArr);

Output
[ 20, 30, 40 ]
[ 'amit', 'sumit' ]


JavaScript Array.shift() Method

The shift() method is used to remove elements from the beginning of an array 

Syntax

Array.shift()

Example

Remove an element from the beginning of an array.

JavaScript
// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing elements from the 
// beginning of an array
numArr.shift();

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Removing elements from the 
// beginning of an array
strArr.shift();

console.log(strArr);

Output
[ 30, 40, 50 ]
[ 'sumit', 'anil' ]


JavaScript Array.splice() Method

The splice() method is used to Insert and Remove elements in between the Array.

Syntax

Array.splice (start, deleteCount, item 1, item 2….) 

Example

Removing an element and adding new elements at the same time using the splice() method.

JavaScript
// Declare and initialize array
let numArr = [20, 30, 40, 50];

// Removing an adding element at a 
// particular location in an array

// Delete 3 elements starting from index 1
numArr.splice(1, 3);

// Insert 80, 90, 100 at starting index 1
numArr.splice(1, 0, 3, 4, 5);

console.log(numArr);


// Declare and initialize array
let strArr = ["amit", "sumit", "anil"];

// Delete two elements starting from index 1
// and add three elements.
strArr.splice(1, 2, "Geeks", "Geeks1", "Geeks2");

console.log(strArr);

Output
[ 20, 3, 4, 5 ]
[ 'amit', 'Geeks', 'Geeks1', 'Geeks2' ]


JavaScript Array.slice() Method

The slice() method returns a new array containing a portion of the original array, based on the start and end index provided as arguments

Syntax

Array.slice (startIndex , endIndex);

Example

Cover all slice() method corner cases.

Javascript
// Original Array
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// Case 1: Extract the first 3 elements of the array
const case1 = arr.slice(0, 3);
console.log("First 3 Array Elements: ", case1);

// Case 2: Extract the last 3 array elements
const case2 = arr.slice(-3);
console.log("Last 3 Array Elements: ", case2);

// Case 3: Extract elements from middle of array
const case3 = arr.slice(3, 7);
console.log("Case 3: Extract elements from middle: ", case3);

// Case 4: Start index is greater than end index
const case4 = arr.slice(5, 2);
console.log("Case 4: Start index is greater than end index: ", case4);

// Case 5: Negative start index
const case5 = arr.slice(-4, 9);
console.log("Case 5: Negative start index: ", case5);

// Case 6: Negative end index
const case6 = arr.slice(3, -2);
console.log("Case 6: Negative end index: ", case6);

// Case 7: Only start index is provided
const case7 = arr.slice(5);
console.log("Case 7: Only start index is provided: ", case7);

// Case 8: Start index and end index are out of range
const case8 = arr.slice(15, 20);
console.log("Case 8: Start and end index out of range: ", case8);

// Case 9: Start and end index are negative
// and out of range
const case9 = arr.slice(-15, -10);
console.log("Case 9: Start and end index are negative"
    + " and out of range: ", case9);

Output:

First 3 Array Elements:  [ 1, 2, 3 ]
Last 3 Array Elements: [ 8, 9, 10 ]
Case 3: Extract elements from middle: [ 4, 5, 6, 7 ]
Case 4: Start index is greater than end index: []
Case 5: Negative start index: [ 7, 8, 9 ]
Case 6: Negative end index: [ 4, 5, 6, 7, 8 ]
Case 7: Only start index is provided: [ 6, 7, 8, 9, 10 ]
Case 8: Start and end index out of range: []
Case 9: Start and end index are negative and out of range: []


JavaScript Array some() Method

The some() method checks whether at least one of the elements of the array satisfies the condition checked by the argument function.

Syntax

array.some(callback(element, index, array), thisArg);

Example

Basic example of Array some() method.

Javascript
function isGreaterThan5(element, index, array) {
    return element > 5;
}


// Driver code
// Original array
let array = [2, 5, 8, 1, 4];

// Checking for condition in array
let value = array.some(isGreaterThan5);

console.log(value);

Output
true


JavaScript Array reduce() Method

The reduce() method is used to reduce the array to a single value and executes a provided function for each value of the array (from left to right) and the return value of the function is stored in an accumulator.

Syntax

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

Example 

Here is an example of the basic use of the Array reduce() method.

Javascript
// Original array
let arr = [88, 50, 25, 10];

// Perform reduce method
let sub = arr.reduce(geeks);

function geeks(total, num) {
    return total - num;
}

console.log(sub);

Output
3


JavaScript Array map() Method

The map() method creates an array by calling a specific function on each element present in the parent array. It is a non-mutating method. This method iterates over an array and calls the function on every element of an array.

Syntax

array.map(callback(currentValue, index, array), thisArg);

Example 

Here is an example of the basic use of the Array map() method.

Javascript
// Original array
let arr = [4, 9, 16, 25];

// Performing map method
let sub = arr.map(geeks);

function geeks() {
    return arr.map(Math.sqrt);
}

console.log(sub);

Output
[ [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ], [ 2, 3, 4, 5 ] ]


JavaScript Array Complete Reference

We have created a complete list of array methods, please check this article JavaScript Array Complete Reference for more details.

Note: All the above examples can be tested by typing them within the script tag of HTML or directly into the browser’s console. 

Learn JavaScript from beginners to advanced with JavaScript Tutorial

Frequently Asked Questions- JavaScript Array Methods

What is array methods in JavaScript?

Array methods in JavaScript are built-in functions that are available on arrays to perform various operations such as adding, removing, modifying, and accessing elements in an array.

Why use array methods?

Array methods are widely used in programming as they are convinient and efficient to use. It saves times as we don’t have code manually for the operation.

How to read elements of an array in JavaScript?

You can read elements of array by using JavaScript array methods. Methods like map(), filter(), pop() etc, can access array elements and performs actions on them.

What are the different types of array methods?

There are different types of array methods based on their functionality:

  • Manipulation Methods: push(), pop(),shift(), slice(), etc.
  • Searching and Sorting Methods: sort(), find(),indexof(), etc.
  • Conversion Methods: join(), concat(),tostring().
  • Iteration Methods: foreach(), map(), filter(), etc.
  • Utility Methods: isArray()


Last Updated : 13 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads