JavaScript is a popular programming language that has been used to develop a wide range of web applications, including dynamic user interfaces and web-based games. One of the most powerful features of JavaScript is its support for arrays. In this article, we’ll explore some of the most commonly used JavaScript array methods, which allow developers to perform complex operations on arrays with just a few lines of code.
Arrays in JavaScript
An array is a collection of elements that can be stored in a single variable. Each element in an array is assigned a unique index, starting from 0. For example, the following code creates an array with three elements:
let myArray = ["apple", "banana", "orange"];
To access an element in an array, you can use its index. For example, to access the first element in the array created above, you would use the following code:
let firstElement = myArray[0]; // "apple"
JavaScript Array Methods
JavaScript provides a number of built-in methods for manipulating arrays. These methods can be used to perform a wide range of operations on arrays, including adding or removing elements, sorting the array, and iterating over the elements in the array. Here are some of the most commonly used JavaScript array methods:
push()
The push() method adds one or more elements to the end of an array. For example, the following code adds a new element to the end of an array:
let myArray = ["apple", "banana", "orange"];
myArray.push("pear");
// myArray is now ["apple", "banana", "orange", "pear"]
pop()
The pop() method removes the last element from an array and returns it. For example, the following code removes the last element from an array:
let myArray = ["apple", "banana", "orange"];
let removedElement = myArray.pop();
// removedElement is "orange", myArray is now ["apple", "banana"]
shift()
The shift() method removes the first element from an array and returns it. For example, the following code removes the first element from an array:
let myArray = ["apple", "banana", "orange"];
let removedElement = myArray.shift();
// removedElement is "apple", myArray is now ["banana", "orange"]
unshift()
The unshift() method adds one or more elements to the beginning of an array. For example, the following code adds a new element to the beginning of an array:
let myArray = ["apple", "banana", "orange"];
myArray.unshift("pear");
// myArray is now ["pear", "apple", "banana", "orange"]
concat()
The concat() method joins two or more arrays together. For example, the following code joins two arrays together:
let myArray1 = ["apple", "banana", "orange"];
let myArray2 = ["pear", "kiwi"];
let joinedArray = myArray1.concat(myArray2);
// joinedArray is ["apple", "banana", "orange", "pear", "kiwi"]
slice()
The slice() method creates a new array from a portion of an existing array. For example, the following code creates a new array from the second and third elements of an existing array:
let myArray = ["apple", "banana", "orange", "pear", "kiwi"];
let slicedArray = myArray.slice(1, 3);
// slicedArray is ["banana", "orange"]
splice()
The splice() method adds or removes elements from an array. The first argument to the method specifies the index at which to start adding or removing elements, while the second argument specifies the number of elements to remove. Any additional arguments are the elements to add to the array. For example, the following code removes the third element from an array and adds two new elements to the array:
let myArray = ["apple", "banana", "orange", "pear", "kiwi"];
myArray.splice(2, 1, "mango", "pineapple");
// myArray is now ["apple", "banana", "mango", "pineapple", "pear", "kiwi"]
indexOf()
The indexOf() method returns the index of the first occurrence of a specified element in an array. If the element is not found, the method returns -1. For example, the following code finds the index of the first occurrence of the element “banana” in an array:
let myArray = ["apple", "banana", "orange"];
let index = myArray.indexOf("banana"); // index is 1
includes()
The includes() method checks whether an array includes a specified element and returns true or false. For example, the following code checks whether an array includes the element “banana”:
let myArray = ["apple", "banana", "orange"];
let includesBanana = myArray.includes("banana"); // includesBanana is true
forEach()
The forEach() method calls a function for each element in an array. The function takes the current element as its argument. For example, the following code logs each element in an array to the console:
let myArray = ["apple", "banana", "orange"];
myArray.forEach(function(element) {
console.log(element);
});
// logs "apple", "banana", "orange" to the console
Conclusion
In this article, we’ve explored some of the most commonly used JavaScript array methods. These methods allow developers to perform complex operations on arrays with just a few lines of code. By using these methods effectively, you can create powerful and efficient JavaScript applications. If you’re new to JavaScript, we recommend practicing these methods on your own to become more familiar with them. If you want to learn about Javascript string methods then check my article on Javascript string methods Happy coding!