[comment]: # "markdown: { smartypants: true }" # Semantic Arrays When in doubt, `forEach`

### Useful Links <table> <tr><td> <small>Slides: <a href="https://beyondcodebootcamp.github.io/presos/semantic-arrays/">https://beyondcodebootcamp.github.io/</a></small> </td></tr> <tr><td> <small>Video: <a href="https://www.youtube.com/watch?v=ID_GOES_HERE">https://youtu.be/ID_GOES_HERE</a></small> </td></tr> <tr><td> <small>Slides Builder: <a href="https://beyondcodebootcamp.github.io/presos/#quick-start-to-render">MD Slides</a></small> </td></tr> </table>

Like, Sub, & Follow <small>(if this is useful, or entertaining)</small>

AJ ONeal <br> [@\_beyondcode](https://twitter.com/@_beyondcode) <br> [youtube.com/coolaj86](https://youtube.com/coolaj86)

Dangerous Wrong Thinker Equal Opportunity Offender Technophobic Technologist Extraordinairé

Utah Node.js Utah Rust [twitch.tv/coolaj86](https://twitch.tv/coolaj86)

## Semantic Arrays

Semantic JS Array Methods<br/><small>(when in doubt: <code>forEach</code>)</small> <table> <tr> <th><small> Array <br />Method </small></th> <th><small> Mutates <br />Value </small></th> <th><small> Mutates <br />Array </small></th> <th></th> <th><small> Return <br />Value </small></th> </tr> <tr><td><small> <code>.forEach(fn)</code> <br /> <code>.filter(fn)</code> <br /> <code>.map(fn)</code> <br /> <code>.reduce(fn, v)</code> <br /> <code>.some(fn)</code> <br /> <code>.every(fn)</code> <br /> <code>.find(fn)</code> <br /> <code>.indexOf(v)</code> <br /> <code>.includes(v)</code> <br /> <code>.reverse()</code> <br /> <code>.slice(n, m)</code> <br /> <code>.sort(fn)</code> <br /> <code>.splice(i, n)</code> <br /> </small></td> <!-- TODO: concat, join, push, pop, unshift, shift --> <td><small> ✅ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ❌ <br /> ❌ <br /> ❌ <br /> ❌ <br /> ⚠️ <br /> ❌ <br /> </small></td> <td><small> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ❌ <br /> ❌ <br /> ✅ <br /> ❌ <br /> ✅ <br /> ✅ <br /> </small></td> <td><small> <br /> 🔗 <br /> 🔗 <br /> ⚠️ <br /> <br /> <br /> ⚠️ <br /> <br /> <br /> 🔗 <br /> 🔗 <br /> 🔗 <br /> ⚠️ <br /> </small></td> <td><small> <code>void</code> <br /> <code>[]</code> (copy)<br /> <code>[]</code> (transform)<br /> <em>any</em> <br /> <code>false</code> <br /> <code>true</code> <br /> <em>any</em> <br /> <code>integer</code> <br /> <code>false</code> <br /> <em>self</em> <br /> <code>[]</code> (copy)<br /> <em>self</em> <br /> <code>[]</code> (copy)<br /> </small></td> </tr> </table>

Semantic JS Array Methods<br/><small>(when in doubt: <code>forEach</code>)</small> <table> <tr> <th><small> Array <br />Method </small></th> <th><small> Mutates <br />Value </small></th> <th><small> Mutates <br />Array </small></th> <th></th> <th><small> Return <br />Value </small></th> </tr> <tr><td><small> <code>.forEach(fn)</code> <br /> <code>.filter(fn)</code> <br /> <code>.map(fn)</code> <br /> <code>.reduce(fn, v)</code> <br /> <code>.some(fn)</code> <br /> <code>.every(fn)</code> <br /> <code>.find(fn)</code> <br /> <code>.indexOf(v)</code> <br /> <code>.includes(v)</code> <br /> <code>.reverse()</code> <br /> <code>.slice(n, m)</code> <br /> <code>.sort(fn)</code> <br /> <code>.splice(i, n)</code> <br /> </small></td> <!-- TODO: concat, join, push, pop, unshift, shift --> <td><small> ✅ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ❌ <br /> ❌ <br /> ❌ <br /> ❌ <br /> ⚠️ <br /> ❌ <br /> </small></td> <td><small> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ⚠️ <br /> ❌ <br /> ❌ <br /> ✅ <br /> ❌ <br /> ✅ <br /> ✅ <br /> </small></td> <td><small> <br /> 🔗 <br /> 🔗 <br /> ⚠️ <br /> <br /> <br /> ⚠️ <br /> <br /> <br /> 🔗 <br /> 🔗 <br /> 🔗 <br /> ⚠️ <br /> </small></td> <td><small> <code>void</code> <br /> <code>[]</code> (copy)<br /> <code>[]</code> (transform)<br /> <em>any</em> <br /> <code>false</code> <br /> <code>true</code> <br /> <em>any</em> <br /> <code>integer</code> <br /> <code>false</code> <br /> <em>self</em> <br /> <code>[]</code> (copy)<br /> <em>self</em> <br /> <code>[]</code> (copy)<br /> </small></td> </tr> </table>

**`.forEach()`**

`.forEach()` Do _something_ for each element

`.forEach()` Do _something_ for each element ```js arr.forEach(function (el, i) { // do something }); ```

`.forEach()` Do _something_ for each element - Not very _precise_

`.forEach()` Do _something_ for each element - Not very _precise_ - Almost never _wrong_

- Almost never _wrong_

- Almost never _wrong_ <!-- what if you _don't_ want to iterate over _each_ thing --> **`forEach()`** can't **`break`**

So what if you _don't_ want \ to iterate over **_every_** thing?

**`.some(fn)`**

`.some(fn)` Return `true` on success \ <small>(when you're done)</small>

`.some(fn)` Return `true` on success \ <small>(when you're done)</small> ```js let hasGuardian = attendees.some(isAdult); ```

`.some(fn)` Return `true` on success \ <small>(when you're done)</small> - Returns `true` when you return _truthy_

`.some(fn)` Return `true` on success \ <small>(when you're done)</small> - Returns `true` when you return _truthy_ - Returns `false` otherwise

`.some(fn)` Return `true` on success \ <small>(when you're done)</small> - Returns `true` when you return _truthy_ - Returns `false` otherwise - `[]`

**`.every(fn)`**

`.every(fn)` Useless... ??

`.every(fn)` Returns `true`... unless you stop it

`.every(fn)` Returns `true`... unless you stop it ```js let permittedToDieHard = movieGoers.every(isAdult); ``` <small>(including the group of 0)</small>

`.every(fn)` Returns `true`... unless you stop it - `true` by default (`[]`) - "breaks" (`false`) - unless you "continue" (`true`)

So... maybe `.some(fn)` is useless?

Probably

Probably - `.find(fn)` - `.includes(v)` - `.indexOf(v)`

`.find(fn)`

**`.find(fn)`** Like `.some()`, but returns the _value_. ```js let guardian = attendees.find(isAdult); ```

`.find(fn)` Like `.some()`, but returns the _value_. - **NOT** the value you returned

**`.includes(v)`**

`.includes(v)` Returns `true` if _exactly_ **`v`** is in the array

`.includes(v)` Returns `true` if _exactly_ **`v`** is in the array ```js let hasBond = spies.includes(agent007); ```

`.includes(v)` Returns `true` if _exactly_ **`v`** is in the array - **Strictly-Typed**

`.includes(v)` Returns `true` if _exactly_ **`v`** is in the array - **Strictly-Typed** - 1 !== "1"

**`.indexOf(v)`**

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index ```js let index = sights.indexOf(waldo); ```

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index - 0 is _falsy_

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index - `0` is _falsy_ - `-1` is _truthy_

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index - `0` is _falsy_ - `-1` is _truthy_ - not cool

`.indexOf(v)` Like `includes(v)`, but returns the **0-based** index - `0` is _falsy_ - `-1` is _truthy_ - not cool - (functional programs don't index)

So what _is_ cool?

**`.filter(fn)`** <!-- of course -->

`.filter(fn)` Like `find(fn)`, but keeps on going!

`.filter(fn)` Like `find(fn)`, but keeps on going! ```js let guardians = attendees.filter(isAdult); ```

`.filter(fn)` Like `find(fn)`, but keeps on going! - returns a **_new_** array

`.filter(fn)` Like `find(fn)`, but keeps on going! - returns a **_new_** array - _truthy_ returns include the value

`.filter(fn)` Like `find(fn)`, but keeps on going! - returns a **_new_** array - _truthy_ returns include the value - non-_truthy_ returns don't

`.map(fn)` Reshape / Transform the data.

`.map(fn)` Reshape / Transform the data. ```js let guardians = adults.map(function (a) { return { name: `${a.given_name} ${a.family_name}`, age: toAge(m.birthdate), }; }); ```

`.map(fn)` Reshape / Transform the data. - Creates a COPY of the data - Does NOT modify original data

### Neat Trick

### Neat Trick ```js [1-3] let betterRobots = robots .map(makeBetterOrDiscard) .filter(Boolean); ```

`.reduce(fn, init)` 🤖 Danger! Danger! 🚨

`.reduce(fn, init)` Perform a lossy (non 1:1) aggregation

`.reduce(fn, init)` Perform a lossy (non 1:1) aggregation ```js await guardians.reduce(async function (promise, g) { await promise; await Guardians.save(g); }, Promise.resolve()); ```

`.reduce(fn, init)` <br /> lambda <small>(Lambda Calculus, CS)</small> > "performing reduction operations"

`.reduce(fn, init)` ✅ ```js arr.reduce((total, n) => total + n); ```

`.reduce(fn, init)` Perform a lossy (non 1:1) aggregation - Many values in - One (non-reversible) value out

`.reduce(fn, init)` <img alt="apple cider reduction" src="https://i.imgur.com/2jP3qJ4.jpg" width="33%" />

`.reduce(fn, init)` - ❌ `.filter(fn)` - ❌ `.map(fn)` - ❌ `.filter(fn).map(fn)` - ❌ declare a variable

```js /** * @param {Reducer} reducer * @param {Number|Promise} init */ Array.reduce = function (reducer, init) { /* ... */ }; ``` - ❌ `Array` (`filter`, `map`) - ❌ `Boolean` (`some`, `every`) - ❌ `String` (`+=`, `Array<String>`) - ❌ `Object` (mutable side effects??) - ⚠️ `BigInt` (??)

**`.slice(n, m)`**

`.slice(n, m)` Copies the values between _n_ and _m_ into a new array. ```js let hold = "threshold".slice(5, 9); ```

`.slice(n, m)` Copies the values between _n_ and _m_ into a new array. - great for batching _x_ at a time - _n_ (inclusive) - _m_ (exclusive) - 🚨 .slice(-n) gives last _n_ values

### Semantic Chaining NONE OF THOSE (except `forEach()`) are used to MODIFY the original array.

```js let totalManHours = workers .filter(isHuman) .map(getHoursWorked) .reduce((total, hours) => total + hours); ``` ⚠️ type confusion

> "Do one thing, \ > and do it well" <small>- The Unix Philosophy</small>

Or don't...

**`.splice(i, n)`**

`.splice(i, n)` Remove _n_ items, starting at the given index ```js attendees.splice(chuckAt, 1); ```

`.splice(i, n)` Remove _n_ items, starting at the given index - Removes elements - Starts at `index` - Counts `n` elements - `.slice(n, i+n)`

`.splice(i, n)` Remove _n_ items, starting at the given index - Removes elements - Starts at `index` - Counts `n` elements - `.slice(n, i+n)` - Also great for batching

`.splice(i, n)` The Swiss-Army Knife \ that no one wanted, needed, or deserved \ <small>(🚨 you'll cut your eye out, kid! 🚨)</small>

`.splice(i, n)` (technically can _replace_ or _add_ elements... \ but don't do this)

On to the *un*cool boring stuff...

**`.sort(fn)`**

**`.sort(fn)`** Return `-1` to ascend or `1` to descend ```js attendees.sort(youngToOld); ``` ```js function youngToOld(a, b) { return a.age - b.age; } ```

**`.sort(fn)`** Return `-1` to ascend or `1` to descend - unpredictable when `fn` is nullish - [0, 1, 10, 2, 3, 4]

**`.reverse(fn)`**

`.reverse(fn)` Change the order, exactly. ```js arr.reverse(); ```

`.reverse(fn)` Change the order, exactly. - 'nuff said

### Ultra Boring

LIFO - `.push(v)` - `.pop()` FILO - `.unshift(v)` - `.shift(v)`

`.push(v)` Add a value to the end (`.length`) ```js completed.push(task); ```

`.pop()` Remove a value from the end (`.length - 1`) ```js let task = tasks.pop(); ```

`.unshift(v)` Add a value to the start (`0`) ```js priorityQueue.unshift(importantTask); ```

`.shift()` Remove a value from the start (`0`) ```js let nextJob = jobQueue.shift(); ```

**`.concat(arr)`** ```js let guests = adults.concat(minors); ```

### Honorable Mention

**`.join(str)`**

`.join(str)` Create a CSV or some such ```js let salutation = ["Mr.", "John", null, "Smith", null] .filter(Boolean) .join(" "); // "Mr. John Smith" ```

`.join(str)` Create a CSV or some such - variadic & sparse lists - NO final delimiter

### Bonus Round **`.remove()`**

```js function remove(arr, i) { return arr.splice(i, 1)[0]; } ``` ```js function removeOne(arr, el) { let i = arr.indexOf(el); if (i > -1) { return arr.splice(i, 1)[0]; } } ``` ```js let leftovers = questionables.filter(isGood); ```

But... why not _just_ `.forEach()`?

But... why not _just_ `.forEach()`? - chaining

But... why not _just_ `.forEach()`? - chaining - (cool?)

But... why not _just_ `.forEach()`? - chaining - (cool?) - readability (smaller code blocks) - (at the expense of performance)

But... why not _just_ `.forEach()`? - chaining - (cool?) - readability (smaller code blocks) - (at the expense of performance) - side effects

Q&A

### Thanks Like, Sub, & Follow <small>(if you wannu)</small>

FIN