# Array Methods Explained As Emojis

## 1. `Array.push()` <a href="#id-62c7" id="id-62c7"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/push)

## 2. `Array.from()` <a href="#d4a8" id="d4a8"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

## 3. `Array.concat()` <a href="#d75d" id="d75d"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/concat)

## 4. `Array.every()` <a href="#id-8409" id="id-8409"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/every)

## 5. `Array.fill()` <a href="#e15c" id="e15c"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/fill)

## 6. `Array.filter()` <a href="#id-1368" id="id-1368"></a>

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

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

## 7. `Array.flat()` <a href="#b047" id="b047"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/flat)

## 8. `Array.includes()` <a href="#id-2183" id="id-2183"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

## 9. `Array.join()` <a href="#id-4d6a" id="id-4d6a"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/join)

## 10. `Array.map()` <a href="#d50b" id="d50b"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)

## 11. `Array.reverse()` <a href="#id-3068" id="id-3068"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse)

## 12. `Array.slice()` <a href="#id-06be" id="id-06be"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)

## 13. `Array.some()` <a href="#d5da" id="d5da"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

## 14. `Array.sort()` <a href="#ac6a" id="ac6a"></a>

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

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

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

## 15. `Array.splice()` <a href="#id-37a2" id="id-37a2"></a>

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

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

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

## 16. `Array.unshift()` <a href="#f157" id="f157"></a>

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*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bryan-guner.gitbook.io/my-docs/array-methods-lesson/miscellaneous/array-methods-explained-as-emojis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
