JavaScript Array Methods
JavaScript array methods are built-in functions that allow efficient manipulation and traversal of arrays. They provide essential functionalities like adding, removing, and transforming elements, as well as searching, sorting, and iterating through array elements, enhancing code readability and productivity.
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.
JavaScript Array Methods List
- JavaScript Array length
- JavaScript Array toString() Method
- JavaScript Array join() Method
- JavaScript Array delete Method
- JavaScript Array concat() Method
- JavaScript Array flat() Method
- Javascript Array.push() Method
- Javascript Array.unshift() Method
- JavaScript Array.pop() Method
- JavaScript Array.shift() Method
- JavaScript Array.splice() Method
- JavaScript Array.slice() Method
- JavaScript Array some() Method
- JavaScript Array reduce() Method
- JavaScript Array map() Method
- Array Methods Summary
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.
// 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.
// 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.
// 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.
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.
// 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.
// 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.
// 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.
// 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.
// 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.
// 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.
// 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, "Beginner", "Beginner1", "Beginner2");
Output
[ 20, 3, 4, 5 ]
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.
// 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 star...
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.
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.
// Original array
let arr = [88, 50, 25, 10];
// Perform reduce method
let sub = arr.reduce(Beginner);
function Beginner(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.
// Original array
let arr = [4, 9, 16, 25];
// Performing map method
let sub = arr.map(Beginner);
function Beginner() {
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 reverse() method
The reverse() method is used to reverse the order of elements in an array. It modifies the array in place and returns a reference to the same array with the reversed order.
Syntax:
array.reverse()
Example : Here is an example shows the use of the Array reverse() method.
let array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array);
Output
[ 5, 4, 3, 2, 1 ]
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