AndreasJavaScript 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 ๐ฌโฌ
Published: 25th February 2021
Title image: https://codepen.io/devmount/pen/oNxGpgQ
