JavaScript Basic Array Methods

In this article, we will learn about different basic array methods in JavaScript. These methods allow you to manipulate, search, and transform arrays effectively.

Adding and Removing Elements

JavaScript provides several methods to add and remove elements from arrays:

Example

Here's how these methods work in practice:

let arr = ["A", "B", 1, 2, 3];
console.log("Original array:", arr);

// Remove last element
arr.pop();
console.log("After pop():", arr);

// Add element to end
arr.push(22);
console.log("After push(22):", arr);

// Remove first element
arr.shift();
console.log("After shift():", arr);

// Add element to beginning
arr.unshift("Z");
console.log("After unshift('Z'):", arr);

// Add elements at position 2
arr.splice(2, 0, "D", "E");
console.log("After splice(2, 0, 'D', 'E'):", arr);

Original array: ["A", "B", 1, 2, 3]
After pop(): ["A", "B", 1, 2]
After push(22): ["A", "B", 1, 2, 22]
After shift(): ["B", 1, 2, 22]
After unshift('Z'): ["Z", "B", 1, 2, 22]
After splice(2, 0, 'D', 'E'): ["Z", "B", "D", "E", 1, 2, 22]

Searching Elements

JavaScript arrays provide methods to search for elements:

Example

let names = ["Alice", "Bob", "Charlie"];
console.log("Array:", names);

console.log("includes('Alice'):", names.includes("Alice"));
console.log("indexOf('Bob'):", names.indexOf("Bob"));
console.log("indexOf('David'):", names.indexOf("David"));

Array: ["Alice", "Bob", "Charlie"]
includes('Alice'): true
indexOf('Bob'): 1
indexOf('David'): -1

Iterating and Transforming Arrays

These methods help you process and transform array data:

Example

let numbers = [1, 2, 3, 4, 5];

console.log("Original numbers:", numbers);

// Square each number
let squared = numbers.map(num => num * num);
console.log("Squared numbers:", squared);

// Filter even squares
let evenSquares = squared.filter(num => num % 2 === 0);
console.log("Even squared numbers:", evenSquares);

// Print each element using forEach
console.log("Using forEach:");
numbers.forEach((num, index) => {
    console.log(`Index ${index}: ${num}`);
});

Original numbers: [1, 2, 3, 4, 5]
Squared numbers: [1, 4, 9, 16, 25]
Even squared numbers: [4, 16]
Using forEach:
Index 0: 1
Index 1: 2
Index 2: 3
Index 3: 4
Index 4: 5

Sorting and Reversing

These methods help you reorder array elements:

Example

let numbers = [5, 2, 8, 1];
console.log("Original numbers:", numbers);

// Sort in ascending order
numbers.sort((a, b) => a - b);
console.log("Sorted ascending:", numbers);

// Reverse the array
numbers.reverse();
console.log("Reversed:", numbers);

// String sorting
let letters = ["c", "a", "b"];
letters.sort();
console.log("Sorted letters:", letters);

Original numbers: [5, 2, 8, 1]
Sorted ascending: [1, 2, 5, 8]
Reversed: [8, 5, 2, 1]
Sorted letters: ["a", "b", "c"]

Conclusion

JavaScript array methods provide powerful tools for manipulating data. Master these basic methods to efficiently add, remove, search, transform, and sort array elements in your applications.