JavaScript Array Methods contains some built-in properties and methods that every JavaScript developer should know. We can use them to add, remove, iterate, or manipulate data as per our requirements.
Array Methods in JavaScript
We will be discussing the following array methods with detail descriptions and examples.
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
let courses = ["HTML", "CSS", "JavaScript", "React"];
console.log(courses.length);
|
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
let courses = ["HTML", "CSS", "JavaScript", "React"];
let str = courses.toString();
console.log(str);
|
OutputHTML,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: Joing the given array by “|” symbol.
Javascript
let courses = ["HTML", "CSS", "JavaScript", "React"];
console.log(courses.join('|'));
|
OutputHTML|CSS|JavaScript|React
JavaScript Array delete Operator
The delete operator used to delete the given value that can be object, array or anything.
Syntax:
delete object
// or
delete object.property
// or
delete object['property']
Example: Deleting the given object’s property by using delete operator.
Javascript
let emp = {
firstName: "Raj",
lastName: "Kumar",
salary: 40000
}
console.log(delete emp.salary);
console.log(emp);
|
Outputtrue
{ firstName: 'Raj', lastName: 'Kumar' }
JavaScript Array concat() Method
The concat() method is used to concatinate the two or more arrays and it gives the mergerd 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: Concatinate method to concatinate of three arrays.
Javascript
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 flattend the array i.e. it merge all the given array and reduce all the nesting present in it.
Syntax:
arr.flat([depth])
Example: Reducing the nesting of the given array using flat() method.
Javascript
const arr = [['1', '2'], ['3', '4', '5',['6'], '7']];
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 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
let numArr = [10, 20, 30, 40, 50];
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
let numArr = [20, 30, 40];
numArr.unshift(10, 20);
console.log(numArr);
let strArr = ["amit", "sumit"];
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
let numArr = [20, 30, 40, 50];
numArr.pop();
console.log(numArr);
let strArr = ["amit", "sumit", "anil"];
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
let numArr = [20, 30, 40, 50];
numArr.shift();
console.log(numArr);
let strArr = ["amit", "sumit", "anil"];
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
let numArr = [20, 30, 40, 50];
numArr.splice(1, 3);
numArr.splice(1, 0, 3, 4, 5);
console.log(numArr);
let strArr = ["amit", "sumit", "anil"];
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
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const case1 = arr.slice(0, 3);
console.log("First 3 Array Elements: ", case1);
const case2 = arr.slice(-3);
console.log("Last 3 Array Elements: ", case2);
const case3 = arr.slice(3, 7);
console.log("Case 3: Extract elements from middle: ", case3);
const case4 = arr.slice(5, 2);
console.log("Case 4: Start index is greater than end index: ", case4);
const case5 = arr.slice(-4, 9);
console.log("Case 5: Negative start index: ", case5);
const case6 = arr.slice(3, -2);
console.log("Case 6: Negative end index: ", case6);
const case7 = arr.slice(5);
console.log("Case 7: Only start index is provided: ", case7);
const case8 = arr.slice(15, 20);
console.log("Case 8: Start and end index out of range: ", case8);
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.
Example: Basic example of Array some() method.
Javascript
function isGreaterThan5(element, index, array) {
return element > 5;
}
let array = [2, 5, 8, 1, 4];
let value = array.some(isGreaterThan5);
console.log(value);
|
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.
Example: Here is an example of the basic use of the Array reduce() method.
Javascript
let arr = [88, 50, 25, 10];
let sub = arr.reduce(geeks);
function geeks(total, num) {
return total - num;
}
console.log(sub);
|
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 call the function on every element of an array.
Example: Here is an example of the basic use of the Array map() method.
Javascript
let arr = [4, 9, 16, 25];
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 detail.
Note: All the above examples can be tested by typing them within the script tag of HTML or directly into the browser’s console.
Last Updated :
19 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...
