DEV Community

Cover image for JavaScript Array Methods Explained with Emojis
Andreas
Andreas

Posted on

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);
// ["๐Ÿท", "๐Ÿฎ", "๐Ÿ”", "๐Ÿด", "๐Ÿฎ"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿป", "๐Ÿฏ", "๐Ÿฆ"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿถ", "๐Ÿถ", "๐Ÿฑ", "๐Ÿฑ", "๐Ÿฑ"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐ŸŒฑ", "๐ŸŒณ", "๐ŸŒณ", "๐ŸŒณ", "๐ŸŒฑ"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿ‘จ", "๐Ÿ‘ฉ"]
Enter fullscreen mode Exit fullscreen mode

* 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);
// ["๐Ÿ’ต", "๐Ÿ’ต", "๐Ÿ’ต", "๐Ÿ’ต", "๐Ÿ’ต", "๐Ÿ’ฐ"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
// "๐Ÿ’ปใ€ฐ๏ธ๐Ÿ–ฅ๏ธใ€ฐ๏ธ๐Ÿ–ฅ๏ธใ€ฐ๏ธ๐Ÿ’ปใ€ฐ๏ธ๐Ÿ–จ๏ธ"
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿ’๐ŸŒ", "๐Ÿฆ๐ŸŒ", "๐Ÿฆง๐ŸŒ"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿฆ”", "๐Ÿ‡"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿ“„"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Documentation on MDN

14. Array.sort()

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

let books = ["๐Ÿ“•", "๐Ÿ“—", "๐Ÿ“•", "๐Ÿ“’", "๐Ÿ“—", "๐Ÿ“’"];
books.sort();
// console.log(books);
// ["๐Ÿ“’", "๐Ÿ“’", "๐Ÿ“•", "๐Ÿ“•", "๐Ÿ“—", "๐Ÿ“—"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["โ˜๏ธ", "โ˜€๏ธ"]
Enter fullscreen mode Exit fullscreen mode

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);
// ["๐Ÿš‚", "๐Ÿšƒ", "๐Ÿšƒ", "๐Ÿšƒ", "๐Ÿšƒ"]
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ’ฌโฌ‡


Published: 25th February 2021
Title image: https://codepen.io/devmount/pen/oNxGpgQ

Top comments (19)

Collapse
 
andrewroazen profile image
andrewroazen

It's fun to use emoji to demonstrate array methods, but remember that some of them are composed characters like ๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘ง that are literally equivalent to ['๐Ÿ‘ฉ','๐Ÿ‘จ','๐Ÿ‘ง'] when doing matches.

Collapse
 
devmount profile image
Andreas

Thank you for this addition! ๐Ÿ‘๐Ÿป

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

The livestock.push() got me ๐Ÿ˜‚๐Ÿ˜‚๐Ÿ˜‚

Collapse
 
devmount profile image
Andreas

Yes, you shouldn't push your livestock too much ๐Ÿ˜‚

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

Yeah...
Animal cruelty

Thread Thread
 
devmount profile image
Andreas

๐Ÿ™ˆ๐Ÿ˜…

Collapse
 
webmastermick profile image
Kay Henry

Thank you for this! Well done and very useful. Pure gold for visual learners because the examples clearly highlight not just what happens, but also where. Very important for smooth coding and debugging.

Collapse
 
devmount profile image
Andreas

My pleasure ๐Ÿ˜Š

Collapse
 
kritishd8 profile image
Obscure.

Unique way of making this fun. I really like it.

Collapse
 
devmount profile image
Andreas

So glad you like it ๐Ÿ˜Š

Collapse
 
anonystick profile image
anonystick

So great!
Can I translate it into Vietnamese to help more developers?

Collapse
 
devmount profile image
Andreas

You're very welcome to do so ๐Ÿ‘๐Ÿป Just add the link to the original article, my name and a link to my twitter profile (twitter.com/devmount) to the top of the translation. Many thanks!

Collapse
 
anonystick profile image
anonystick

yeah! Tks!

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Its the most useful guide ever! Im shocked

Collapse
 
devmount profile image
Andreas

So glad it's helpful for you ๐Ÿ˜Š

Collapse
 
buinguyenhoangtho profile image

simple but really interested guide. Thanks you and keep it up XD ๐Ÿ‘Œ

Collapse
 
devmount profile image
Andreas

Thank you, will do ๐Ÿ‘๐Ÿป

Collapse
 
rocksuvel profile image
suvel rathneswarโš›๏ธ

Really cool and easy to understand ๐Ÿงฎโœ”๏ธ

Collapse
 
devmount profile image
Andreas

My pleasure, glad it's useful ๐Ÿ‘๐Ÿป