Arrays are one of the fundamental data structures in JavaScript, and they come with a plethora of built-in methods that make manipulating and working with arrays more efficient and convenient. In this article, we'll explore some of the most commonly used JavaScript array methods, along with examples to demonstrate their usage.
1. push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
const fruits = ['apple', 'banana', 'cherry'];
fruits.push('date');
console.log(fruits); // Output: ['apple', 'banana', 'cherry', 'date']
2. pop()
The pop() method removes the last element from an array and returns that element.
const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.pop();
console.log(removedFruit); // Output: 'cherry'
console.log(fruits); // Output: ['apple', 'banana']
3. shift()
The shift() method removes the first element from an array and returns that element.
const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.shift();
console.log(removedFruit); // Output: 'apple'
console.log(fruits); // Output: ['banana', 'cherry']
4. unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
const fruits = ['banana', 'cherry'];
fruits.unshift('apple');
console.log(fruits); // Output: ['apple', 'banana', 'cherry']
5. concat()
The concat() method merges two or more arrays, creating a new array without modifying the existing arrays.
const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'tomato'];
const combined = fruits.concat(vegetables);
console.log(combined); // Output: ['apple', 'banana', 'carrot', 'tomato']
6. slice()
The slice() method extracts a portion of an array into a new array, without modifying the original array.
const numbers = [1, 2, 3, 4, 5];
const sliced = numbers.slice(1, 4);
console.log(sliced); // Output: [2, 3, 4]
7. splice()
The splice() method changes the contents of an array by removing or replacing elements at a specified index.
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'orange');
console.log(fruits); // Output: ['apple', 'orange', 'cherry']
8. forEach()
The forEach() method executes a provided function once for each array element.
const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num));
// Output:
// 1
// 2
// 3
9. map()
The map() method creates a new array with the results of calling a provided function on every element in the array.
const numbers = [1, 2, 3];
const squaredNumbers = numbers.map((num) => num * num);
console.log(squaredNumbers); // Output: [1, 4, 9]
10. filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function.
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
Conclusion
JavaScript array methods are powerful tools for working with arrays efficiently. This list provides an overview of some of the most commonly used array methods, but there are many more to explore. Understanding these methods is essential for effective array manipulation in JavaScript.
Feel free to explore the official JavaScript documentation for more array methods and their detailed descriptions.
Happy coding!
Top comments (0)