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.
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);
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);
OutputHTML,CSS,JavaScript,React
JavaScript Array join() Method
This join() method creates and returns a new string by concatenating all elements of an array. It uses a specified separator between each element in the resulting string.
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('|'));
OutputHTML|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);
Outputtrue
{ 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");
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);
OutputFirst 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.
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);
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);
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 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.
JavaScript
let array = [1, 2, 3, 4, 5];
array.reverse();
console.log(array);
Javascript Array values() method
The values() method returns a new Array Iterator object that contains the values for each index in the array.
Syntax:
Array.values()
Example: Here is an example shows the use of the Array values() method.
JavaScript
const fruits = ["Apple", "Banana", "Cherry"];
// Get the iterator object
const iterator = fruits.values();
// Iterate over the values using the iterator
for (const value of iterator) {
console.log(value);
}
OutputApple
Banana
Cherry
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
Please Login to comment...
Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
