# Home
map(\[๐ฝ, ๐ฎ, ๐], cook) => \[๐ฟ, ๐, ๐ณ]
filter(\[๐ฟ, ๐, ๐ณ], isVegetarian) => \[๐ฟ, ๐ณ]
reduce(\[๐ฟ, ๐ณ], eat) => ๐ฉ
### DOWNLOAD JS FILES FOR LESSON:
{% file src="" %}
download-js-files
{% endfile %}
{% embed url="" %}
Public Web Address
{% endembed %}
{% embed url="" %}
Corresponding Github Repository
{% endembed %}
{% embed url="" %}
map(\[๐ฝ, ๐ฎ, ๐], cook) => \[๐ฟ, ๐, ๐ณ]
filter(\[๐ฟ, ๐, ๐ณ], isVegetarian) => \[๐ฟ, ๐ณ]
reduce(\[๐ฟ, ๐ณ], eat) => ๐ฉ
   
## Table of contents
* [Home](https://bryan-guner.gitbook.io/array-methods-lesson/README)
### Methods
### ๐จ๐ป Methods
* [Page 1](https://bryan-guner.gitbook.io/array-methods-lesson/methods-1/page-1)
* [Array.forEach()](https://bryan-guner.gitbook.io/array-methods-lesson/methods-1/array.foreach)
* [Array.filter()](https://bryan-guner.gitbook.io/array-methods-lesson/methods-1/array.filter)
### Aux Information
* [Array Methods Explained As Emojis](https://bryan-guner.gitbook.io/array-methods-lesson/aux-information/array-methods-explained-as-emojis)
* [Array.reduce()](https://bryan-guner.gitbook.io/array-methods-lesson/aux-information/array.reduce)
* [Array.map()](https://bryan-guner.gitbook.io/array-methods-lesson/aux-information/array.map)
### Background
* [Mutability](https://bryan-guner.gitbook.io/array-methods-lesson/background/mutability)
* [Array Basics](https://bryan-guner.gitbook.io/array-methods-lesson/background/array-basics)
* [๐ Background](https://bryan-guner.gitbook.io/array-methods-lesson/background/background)
* [Callback Functions](https://bryan-guner.gitbook.io/array-methods-lesson/background/callback-functions)
* [Higher Order Functions](https://bryan-guner.gitbook.io/array-methods-lesson/background/higher-order-functions)
* [๐ง Difference Between Functions & Methods...](https://bryan-guner.gitbook.io/array-methods-lesson/background/difference-between-functions-and-methods...)
* [โก Fat Arrow Syntax](https://bryan-guner.gitbook.io/array-methods-lesson/background/fat-arrow-syntax)
### ๐ Resources
* [Array Methods Explained In Emojis](https://bryan-guner.gitbook.io/array-methods-lesson/resources/array-methods-explained-in-emojis)
* [Does It Mutateยฟ](https://bryan-guner.gitbook.io/array-methods-lesson/resources/does-it-mutate)
* [Cheat Sheet](https://bryan-guner.gitbook.io/array-methods-lesson/resources/cheat-sheet)
* [Other Array Methods](https://bryan-guner.gitbook.io/array-methods-lesson/resources/other-array-methods)
### ๐ฝ Miscellaneous
* [Array Methods Explained As Emojis](https://bryan-guner.gitbook.io/array-methods-lesson/miscellaneous/array-methods-explained-as-emojis)
```
// Mutating
push() // Insert an element at the end
pop() // Remove an element from the end
unshift() // Inserts an element in the beginning
shift() // Remove first element
// Iterating
forEach() // Iterates an array
filter() // Iterates an array and result is filtered array
map() // Iterates an array and result is new array
reduce() // "Reduces" the array into single value (accumulator)
// Others
slice() // Returns desired elements in a new array
concat() // Append one or more arrays with given array
```
#### Cheat sheet: Arrays
JavaScript Arrays are a very flexible data structure and used as lists, stacks, queues, tuples (e.g. pairs), etc. Some
**Using Arrays**
Creating Arrays, reading and writing elements:
```js
const arr = ['a', 'b', 'c']; // Array literal
assert.deepEqual(
arr,
[
'a',
'b',
'c', // trailing commas are ignored
]
);
assert.equal(
arr.length, 3 // number of elements
);
assert.equal(
arr[0], 'a' // read (negative indices donโt work)
);
assert.equal(
arr.at(-1), 'c' // read (negative indices work)
);
arr[0] = 'x'; // write
assert.deepEqual(
arr, ['x', 'b', 'c']
);
```
The lengths of Arrays, adding elements:
```js
const arr = ['a'];
assert.equal(
arr.length, 1 // number of elements
);
arr.push('b'); // add an element (preferred)
assert.deepEqual(
arr, ['a', 'b']
);
arr[arr.length] = 'c'; // add an element (alternative)
assert.deepEqual(
arr, ['a', 'b', 'c']
);
arr.length = 1; // remove elements
assert.deepEqual(
arr, ['a']
);
```
Concatenating Arrays via spreading (`...`):
```js
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e', 'f'];
assert.deepEqual(
[...arr1, ...arr2, ...arr3, 'g'],
['a', 'b', 'c', 'd', 'e', 'f', 'g']
);
```
Clearing Arrays (removing all elements):
```js
// Affects everyone referring to the Array
const arr1 = ['a', 'b', 'c'];
arr1.length = 0;
assert.deepEqual(
arr1, []
);
// Does not affect others referring to the Array
let arr2 = ['a', 'b', 'c'];
arr2 = [];
assert.deepEqual(
arr2, []
);
```
Looping over elements:
```js
const arr = ['a', 'b', 'c'];
for (const value of arr) {
console.log(value);
}
// Output:
// 'a'
// 'b'
// 'c'
```
Looping over key-element pairs:
```js
const arr = ['a', 'b', 'c'];
for (const [index, value] of arr.entries()) {
console.log(index, value);
}
// Output:
// 0, 'a'
// 1, 'b'
// 2, 'c'
```
Creating and filling Arrays when we canโt use Array literals (e.g. because we donโt know their lengths in advance or they are too large):
```js
const four = 4;
// Empty Array that weโll fill later
assert.deepEqual(
new Array(four),
[ , , , ,] // four holes; last comma is ignored
);
// An Array filled with a primitive value
assert.deepEqual(
new Array(four).fill(0),
[0, 0, 0, 0]
);
// An Array filled with objects
// Why not .fill()? Weโd get single object, shared multiple times.
assert.deepEqual(
Array.from({length: four}, () => ({})),
[{}, {}, {}, {}]
);
// A range of integers
assert.deepEqual(
Array.from({length: four}, (_, i) => i),
[0, 1, 2, 3]
);
```
**Array methods**
Deriving a new Array from an existing Array:
```
> ['โ ','โ','โฒ'].slice(1, 3)
['โ','โฒ']
> ['โ ','โ','โ '].filter(x => x==='โ ')
['โ ','โ ']
> ['โฒ','โ'].map(x => x+x)
['โฒโฒ','โโ']
> ['โฒ','โ'].flatMap(x => [x,x])
['โฒ','โฒ','โ','โ']
```
Removing an Array element at a given index:
```js
const arr = ['โ ','โ','โฒ'];
assert.deepEqual(
arr.filter((_, index) => index !== 1),
['โ ','โฒ']
);
assert.deepEqual(
arr, ['โ ','โ','โฒ'] // .filter() is non-destructive
);
arr.splice(1, 1); // start at 1, delete 1 element
assert.deepEqual(
arr, ['โ ','โฒ'] // .splice() is destructive
);
```
Computing a summary of an Array:
```
> ['โ ','โ','โฒ'].some(x => x==='โ')
true
> ['โ ','โ','โฒ'].every(x => x==='โ')
false
> ['โ ','โ','โฒ'].join('-')
'โ -โ-โฒ'
> ['โ ','โ'].reduce((result,x) => result+x, 'โฒ')
'โฒโ โ'
> ['โ ','โ'].reduceRight((result,x) => result+x, 'โฒ')
'โฒโโ '
```
Changing all of an Array (the input Array is modified and returned):
```
> ['โ ','โ','โฒ'].fill('โ')
['โ','โ','โ']
> ['โ ','โ','โฒ'].reverse()
['โฒ','โ','โ ']
> ['โ ','โ','โ '].sort()
['โ ','โ ','โ']
```
Finding Array elements:
```
> ['โ ','โ','โ '].includes('โ ')
true
> ['โ ','โ','โ '].indexOf('โ ')
0
> ['โ ','โ','โ '].lastIndexOf('โ ')
2
> ['โ ','โ','โ '].find(x => x==='โ ')
'โ '
> ['โ ','โ','โ '].findIndex(x => x==='โ ')
0
```
Listing elements (`Array.from()` is needed because the methods return iterables, not Arrays):
```
> Array.from(['โ ','โ','โฒ'].keys())
[0,1,2]
> Array.from(['โ ','โ','โฒ'].entries())
[[0,'โ '],[1,'โ'],[2,'โฒ']]
```
Adding or removing an element at either end of an Array:
```js
const arr1 = ['โ ','โ'];
arr1.push('โฒ');
assert.deepEqual(
arr1, ['โ ','โ','โฒ']
);
const arr2 = ['โ ','โ','โฒ'];
arr2.pop();
assert.deepEqual(
arr2, ['โ ','โ']
);
const arr3 = ['โ ','โ'];
arr3.unshift('โฒ');
assert.deepEqual(
arr3, ['โฒ','โ ','โ']
);
const arr4 = ['โฒ','โ ','โ'];
arr4.shift();
assert.deepEqual(
arr4, ['โ ','โ']
);
```
---
# 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/readme.md?ask=
```
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.