Categories of Array Methods
JavaScript array methods can be grouped into different categories based on their functionality:
- Adding and Removing Elements
- Searching and Filtering
- Transforming Arrays
- Iterating Arrays
- Combining Arrays
Each category is explained below with examples.
1. Adding and Removing Elements
push()
Adds one or more elements to the end of an array.
let fruits = ["Apple", "Banana"];
fruits.push("Cherry");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
pop()
Removes the last element of an array.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.pop();
console.log(fruits); // Output: ["Apple", "Banana"]
shift()
Removes the first element of an array.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.shift();
console.log(fruits); // Output: ["Banana", "Cherry"]
unshift()
Adds one or more elements to the beginning of an array.
let fruits = ["Banana", "Cherry"];
fruits.unshift("Apple");
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]
splice()
Adds or removes elements at a specific position.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Mango"); // Replaces "Banana" with "Mango"
console.log(fruits); // Output: ["Apple", "Mango", "Cherry"]
2. Searching and Filtering
indexOf()
Finds the index of the first occurrence of a value.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.indexOf("Banana")); // Output: 1
lastIndexOf()
Finds the index of the last occurrence of a value.
let fruits = ["Apple", "Banana", "Apple"];
console.log(fruits.lastIndexOf("Apple")); // Output: 2
includes()
Checks if an array contains a specific value.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.includes("Banana")); // Output: true
filter()
Returns a new array with elements that meet a condition.
let numbers = [10, 20, 30, 40];
let filtered = numbers.filter((num) => num > 20);
console.log(filtered); // Output: [30, 40]
3. Transforming Arrays
map()
Creates a new array by applying a function to each element.
let numbers = [1, 2, 3];
let squared = numbers.map((num) => num * num);
console.log(squared); // Output: [1, 4, 9]
reduce()
Reduces the array to a single value.
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // Output: 10
flat()
Flattens nested arrays into a single array.
let nested = [1, [2, [3, 4]]];
let flatArray = nested.flat(2);
console.log(flatArray); // Output: [1, 2, 3, 4]
join()
Joins all elements of an array into a string.
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits.join(", ")); // Output: "Apple, Banana, Cherry"
4. Iterating Arrays
forEach()
Executes a function for each element in the array.
let numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num * 2));
// Output: 2, 4, 6
every()
Checks if all elements pass a condition.
let numbers = [2, 4, 6];
console.log(numbers.every((num) => num % 2 === 0)); // Output: true
some()
Checks if at least one element passes a condition.
let numbers = [1, 2, 3];
console.log(numbers.some((num) => num > 2)); // Output: true
5. Combining Arrays
concat()
Merges two or more arrays.
let fruits = ["Apple", "Banana"];
let vegetables = ["Carrot", "Potato"];
let food = fruits.concat(vegetables);
console.log(food); // Output: ["Apple", "Banana", "Carrot", "Potato"]
slice()
Returns a portion of the array without modifying the original.
let fruits = ["Apple", "Banana", "Cherry"];
let sliced = fruits.slice(0, 2);
console.log(sliced); // Output: ["Apple", "Banana"]
Practical Example: Using Multiple Array Methods
// Scenario: Manage a list of tasks
let tasks = ["Homework", "Grocery shopping", "Call Mom"];
// Add a new task
tasks.push("Clean room");
// Remove the last task
tasks.pop();
// Check if a specific task exists
if (tasks.includes("Homework")) {
console.log("Homework is on the list!");
}
// Transform tasks to uppercase
let upperTasks = tasks.map((task) => task.toUpperCase());
console.log(upperTasks);
// Output: ["HOMEWORK", "GROCERY SHOPPING", "CALL MOM"]