JavaScript Array Methods 🚀
Welcome to our interactive tutorial on JavaScript Array Methods! 👋 Here, you'll find a comprehensive guide to essential array operations, explained with fun emoji examples. Each section includes a brief description, a code snippet, and an option to try the code yourself. Let's dive in and level up your JavaScript skills! 💪🚀
push()
Adds one or more elements to the end of an array.
let livestock = ["🐷", "🐮", "🐔"];
livestock.push("🐴", "🐮");
console.log(livestock);
// ["🐷", "🐮", "🐔", "🐴", "🐮"]from()
Creates a new array from an array-like or iterable object.
const emoji = "🌈";
const rainbow = Array.from(emoji);
console.log(rainbow);
// ["🌈"]concat()
Merges two or more arrays.
const fruit = ["🍎", "🍐"];
const veggies = ["🥕", "🥦"];
const healthyFood = fruit.concat(veggies);
console.log(healthyFood);
// ["🍎", "🍐", "🥕", "🥦"]every()
Tests whether all elements in the array pass the test implemented by the provided function.
const ages = [18, 21, 28, 34, 22];
const allAdults = ages.every(age => age >= 18);
console.log(allAdults);
// truefill()
Changes all elements in an array to a static value.
let emotions = ["😊", "😢", "😠", "😍"];
emotions.fill("😐", 1, 3);
console.log(emotions);
// ["😊", "😐", "😐", "😍"]filter()
Creates a new array with all elements that pass the test implemented by the provided function.
const fruits = ["🍎", "🍌", "🍇", "🍊", "🍓"];
const redFruits = fruits.filter(f => f === "🍎" || f === "🍓");
console.log(redFruits);
// ["🍎", "🍓"]flat()
Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
const nestedFruit = ["🍎", ["🍌", "🍐"], [["🍊"]]];
const flatFruit = nestedFruit.flat(2);
console.log(flatFruit);
// ["🍎", "🍌", "🍐", "🍊"]includes()
Determines whether an array includes a certain value among its entries.
const pets = ["🐶", "🐱", "🐠", "🐹"];
const hasDog = pets.includes("🐶");
console.log(hasDog);
// truejoin()
Creates and returns a new string by concatenating all of the elements in an array.
const elements = ["🌍", "🔥", "💨", "💧"];
const elementString = elements.join(" + ");
console.log(elementString);
// "🌍 + 🔥 + 💨 + 💧"map()
Creates a new array with the results of calling a provided function on every element in the array.
const hungryMonkeys = ["🐒", "🦍", "🦧"];
const feededMonkeys = hungryMonkeys.map(m => m + "🍌");
console.log(feededMonkeys);
// ["🐒🍌", "🦍🍌", "🦧🍌"]reverse()
Reverses an array in place.
let countdown = ["3️⃣", "2️⃣", "1️⃣", "🚀"];
countdown.reverse();
console.log(countdown);
// ["🚀", "1️⃣", "2️⃣", "3️⃣"]slice()
Returns a shallow copy of a portion of an array into a new array object.
const rainbow = ["🔴", "🟠", "🟡", "🟢", "🔵", "🟣"];
const warmColors = rainbow.slice(0, 3);
console.log(warmColors);
// ["🔴", "🟠", "🟡"]some()
Tests whether at least one element in the array passes the test implemented by the provided function.
const drinks = ["🍵", "🧃", "🥤", "🍺", "🧉"];
const hasAlcohol = drinks.some(d => d === "🍺" || d === "🍷");
console.log(hasAlcohol);
// truesort()
Sorts the elements of an array in place and returns the sorted array.
let fruits = ["🍓", "🍎", "🍌", "🍇"];
fruits.sort();
console.log(fruits);
// ["🍇", "🍈", "🍉", "🍊"]splice()
Changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
let seasons = ["☀️", "🍁", "❄️", "🌸"];
seasons.splice(2, 0, "🍂");
console.log(seasons);
// ["☀️", "🍁", "🍂", "❄️", "🌸"]unshift()
Adds one or more elements to the beginning of an array and returns the new length of the array.
let queue = ["🧍", "🧍", "🧍"];
queue.unshift("🧍♀️", "🧍♂️");
console.log(queue);
// ["🧍♀️", "🧍♂️", "🧍", "🧍", "🧍"]Did You Know? 🤔
- The `forEach()` method was introduced in ECMAScript 5 (ES5) in 2009.
- The `map()` method creates a new array, leaving the original array unchanged.
- The `reduce()` method can be used to flatten an array of arrays.
- ES6 introduced new methods like `find()`, `findIndex()`, and `Array.from()`.
Test Your Knowledge 📝
Which method adds one or more elements to the end of an array?
Which method creates a new array with the results of calling a provided function on every element?
Which method executes a reducer function on each element of the array?
