JavaScript Array Methods Explained with Emojis
Tags: javascript, webdev, beginners, emojis
Published: 2021-02-25 12:47:19

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.

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/push)_</small>


## 2. `Array.from()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/from)_</small>


## 3. `Array.concat()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)_</small>


## 4. `Array.every()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/every)_</small>


## 5. `Array.fill()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)_</small>


## 6. `Array.filter()`

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

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

<small>_\* 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.<br>Try `"👩".length` in your console and see for yourself. More information in [this article](https://thekevinscott.com/emojis-in-javascript/)._</small>

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)_</small>


## 7. `Array.flat()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)_</small>


## 8. `Array.includes()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)_</small>


## 9. `Array.join()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/join)_</small>


## 10. `Array.map()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)_</small>


## 11. `Array.reverse()`

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

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

<small>_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_ `["🦔", "🐇"]`</small>

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)_</small>


## 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.

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)_</small>


## 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.

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/some)_</small>


## 14. `Array.sort()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)_</small>


## 15. `Array.splice()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)_</small>


## 16. `Array.unshift()`

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

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

<small>_Documentation on [MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)_</small>


## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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_