JavaScript Array Methods Explained with Emojis

JavaScript has a lot of useful Array operations. If you are just as confused as me about which one to take and what they all do, let’s visualize these operations using emojis to better remember and apply them where they fit best ✅ And who knows, maybe they are capable of doing even more than we expect…

All examples in this article actually work, so feel free to try them in your browsers console 🤓

1. Array.push()

Adds one or more elements to the end of an array. Or grows a farm.

let livestock = ["🐷", "🐮", "🐔"];
livestock.push("🐴", "🐮");
// console.log(livestock);
// ["🐷", "🐮", "🐔", "🐴", "🐮"]

Documentation on MDN

2. Array.from()

Creates a new array from an array-like or iterable object. Or separates some wild animals.

const wild  = "🐻🐯🦁";
const tamed = Array.from(wild);
// console.log(tamed);
// ["🐻", "🐯", "🦁"]

Documentation on MDN

3. Array.concat()

Merges two or more arrays into a single new one. Or brings different worlds together.

const dogs = ["🐶", "🐶"];
const cats = ["🐱", "🐱", "🐱"];
const pets = dogs.concat(cats);
// console.log(pets);
// ["🐶", "🐶", "🐱", "🐱", "🐱"]

Documentation on MDN

4. Array.every()

Checks if all elements of an array pass the test. Or detects intruders.

const visitors   = ["🧑", "👽", "🧑", "🧑", "🤖"];
const isHuman    = e => e === "🧑";
const onlyHumans = visitors.every(isHuman);
// console.log(onlyHumans);
// false

Documentation on MDN

5. Array.fill()

Replaces the elements of an array from start to end index with a given value. Or grows some trees.

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"];
seeds.fill("🌳", 1, 4);
// console.log(seeds);
// ["🌱", "🌳", "🌳", "🌳", "🌱"]

Documentation on MDN

6. Array.filter()

Creates a new array containing all elements passing the test. Or predicts your relationship status.

const guests  = ["👩👨", "👩👩", "👨", "👩", "👨👨"];
const singles = guests.filter(g => g.length/2 === 1); // *
// console.log(singles);
// ["👨", "👩"]

* You might wonder, why the string length is divided by two here. The reason is that emojis actually are represented by a pair of code points, also known as a surrogate pair.
Try "👩".length in your console and see for yourself. More information in this article.

Documentation on MDN

7. Array.flat()

Creates a new array containing all elements from all sub-arrays up to a given depth. Or cracks any safe.

const savings = ["💵", ["💵", "💵"], ["💵", "💵"], [[["💰"]]]];
const loot    = savings.flat(3)
// console.log(loot);
// ["💵", "💵", "💵", "💵", "💵", "💰"];

Documentation on MDN

8. Array.includes()

Checks if an array contains a specific element. Or finds the secret sweet tooth.

const food   = ["🥦", "🥬", "🍅", "🥒", "🍩", "🥕"];
const caught = food.includes("🍩");
// console.log(caught);
// true

Documentation on MDN

9. Array.join()

Concatenates all array elements to one single string, using an optional separator. Or builds local area networks.

const devices = ["💻", "🖥️", "🖥️", "💻", "🖨️"];
const network = devices.join("〰️");
// console.log(network);
// "💻〰️🖥️〰️🖥️〰️💻〰️🖨️"

Documentation on MDN

10. Array.map()

Calls a function on each array element and returns the result as new array. Or feeds all hungry monkeys.

const hungryMonkeys = ["🐒", "🦍", "🦧"];
const feededMonkeys = hungryMonkeys.map(m => m + "🍌");
// console.log(feededMonkeys);
// ["🐒🍌", "🦍🍌", "🦧🍌"]

Documentation on MDN

11. Array.reverse()

Reverses the order of elements in an array. Or decides the outcome of a race.

let   rabbitWins   = ["🐇", "🦔"];
const hedgehogWins = rabbitWins.reverse();
// console.log(hedgehogWins);
// ["🦔", "🐇"]

Note that this method is destructive, it modifies the original array. So after line 2 of this example rabbitWins and hedgehogWins both have the value ["🦔", "🐇"]

Documentation on MDN

12. Array.slice()

Creates a new array from copying a portion of an array defined by start and end index. Or cheats in an exam.

const solutionsOfClassmates = ["📃", "📑", "📄", "📝"];
const myOwnSolutionReally   = solutionsOfClassmates.slice(2, 3);
// console.log(myOwnSolutionReally);
// ["📄"]

Documentation on MDN

13. Array.some()

Tests if at least one element of an array passes the test. Or finds if some participants of your meeting forgot to mute their mic.

const participants = ["🔇", "🔇", "🔊", "🔇", "🔊"];
const isLoud       = p => p === "🔊";
const troubles     = participants.some(isLoud);
// console.log(troubles);
// true

Documentation on MDN

14. Array.sort()

Sorts all elements of an array. Or organizes your bookshelf again.

let books = ["📕", "📗", "📕", "📒", "📗", "📒"];
books.sort();
// console.log(books);
// ["📒", "📒", "📕", "📕", "📗", "📗"]

Documentation on MDN

15. Array.splice()

Removes, replaces or adds elements to an array. Or changes the weather.

let weather = ["☁️", "🌧️", "☁️"];
weather.splice(1, 2, "☀️");
// console.log(weather);
// ["☁️", "☀️"]

Documentation on MDN

16. Array.unshift()

Adds one or more elements to the beginning of an array. Or couples a loco.

let train = ["🚃", "🚃", "🚃", "🚃"];
train.unshift("🚂");
// console.log(train);
// ["🚂", "🚃", "🚃", "🚃", "🚃"]

Documentation on MDN

Wrap it up

We saw that we have quite a lot of possibilities for array processing and manipulation in JavaScript. See MDN for an overview of all Array instance methods. You want to add another nice example how to explain a JavaScript method or just want to show us your favorite emoji? Please comment below 💬⬇

Originally published: 25th February 2021 on dev.to
Title image: https://codepen.io/devmount/pen/oNxGpgQ