JavaScript Array Methods

Types of Array Methods

🔹 Adding Elements

Methods to add elements to your arrays:

let colors = ["red", "blue"];

// push() - Add to the end
colors.push("green");
console.log(colors); // ["red", "blue", "green"]

// unshift() - Add to the beginning
colors.unshift("yellow");
console.log(colors); // ["yellow", "red", "blue", "green"]

// concat() - Join arrays (creates new array)
let moreColors = ["purple", "orange"];
let allColors = colors.concat(moreColors);
console.log(allColors); // ["yellow", "red", "blue", "green", "purple", "orange"]

// spread operator - Modern way to combine
let combined = [...colors, ...moreColors];
console.log(combined); // ["yellow", "red", "blue", "green", "purple", "orange"]

🔹 Removing Elements

Methods to remove elements from your arrays:

let animals = ["cat", "dog", "bird", "fish", "rabbit"];

// pop() - Remove from end
let lastAnimal = animals.pop();
console.log(lastAnimal); // "rabbit"
console.log(animals); // ["cat", "dog", "bird", "fish"]

// shift() - Remove from beginning
let firstAnimal = animals.shift();
console.log(firstAnimal); // "cat"
console.log(animals); // ["dog", "bird", "fish"]

// splice() - Remove from specific position
// splice(startIndex, deleteCount)
animals.splice(1, 1); // Remove 1 element at index 1
console.log(animals); // ["dog", "fish"]

// splice() - Remove and add
animals.splice(1, 0, "hamster", "turtle"); // Add at index 1
console.log(animals); // ["dog", "hamster", "turtle", "fish"]

🔹 Transform Methods

Methods that create new arrays or transform existing ones:

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

// map() - Transform each element
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter() - Keep elements that pass a test
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// slice() - Copy part of array
let middle = numbers.slice(1, 4); // From index 1 to 3
console.log(middle); // [2, 3, 4]

// reverse() - Reverse the array (modifies original)
let fruits = ["apple", "banana", "cherry"];
fruits.reverse();
console.log(fruits); // ["cherry", "banana", "apple"]

// sort() - Sort the array (modifies original)
let letters = ["c", "a", "b"];
letters.sort();
console.log(letters); // ["a", "b", "c"]

🔹 String Conversion Methods

Convert arrays to strings in different ways:

let fruits = ["apple", "banana", "cherry"];

// toString() - Convert to comma-separated string
console.log(fruits.toString()); // "apple,banana,cherry"

// join() - Convert with custom separator
console.log(fruits.join()); // "apple,banana,cherry" (default comma)
console.log(fruits.join(" ")); // "apple banana cherry"
console.log(fruits.join(" - ")); // "apple - banana - cherry"
console.log(fruits.join("")); // "applebananacherry"

// Real-world example: Creating a sentence
let words = ["JavaScript", "is", "awesome"];
let sentence = words.join(" ") + "!";
console.log(sentence); // "JavaScript is awesome!"

🔹 Practical Examples

Real-world usage of array methods:

// Shopping cart example
let cart = [];

// Add items
cart.push("laptop", "mouse", "keyboard");
console.log("Cart:", cart);

// Remove last item
let removedItem = cart.pop();
console.log("Removed:", removedItem);
console.log("Cart:", cart);

// Check cart size
console.log("Items in cart:", cart.length);

// Create a receipt
let receipt = "Items: " + cart.join(", ");
console.log(receipt);

// Todo list example
let todos = ["buy milk", "walk dog", "study JavaScript"];

// Mark first todo as done (remove it)
let completedTodo = todos.shift();
console.log("Completed:", completedTodo);
console.log("Remaining todos:", todos);