[comment]: # "markdown: { smartypants: true }" # Semantic JavaScript (Intentional JavaScript)

### Useful Links <table> <tr><td> <small>Slides: <a href="https://beyondcodebootcamp.github.io/presos/">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>

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é

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

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

## Semantic

## Semantic > "of or relating to meaning" <a href="https://search.brave.com/search?q=define+semantic" target="_define_semantic"><small>Merriam-Webster: semantic</small></a>

<table> <tr> <td> acceptable <br /> allowable <br /> correct <br /> linguistic <br /> </td> <td> morphological <br /> phonological <br /> syntactic <br /> well-formed <br /> </td> </tr> </table> <a href="https://www.thesaurus.com/browse/semantic" target="_thesaurus_semantic"><small>thesaurus.com: semantic</small></a>

## Non-Semantic

## Non-Semantic ### solecistic

### solecistic - nonstandard usage - violation of etiquette - impropriety, mistake, or incongruity

### StoryTime <img alt="four-wheeler foot area" src="https://i.imgur.com/GvvkHV7.jpg" width="70%" /> <small>(I got my kickstart stuck in my foot peg)</small>

Kickstart <img alt="engine kickstart" src="https://i.imgur.com/Z1uWNS9.jpg" width="60%" />

Foot Peg <img alt="atv foot peg" src="https://i.imgur.com/R4iN6jB.jpg" width="60%" />

<img alt="four-wheeler foot area" src="https://i.imgur.com/GvvkHV7.jpg" width="70%" />

Wrench <img alt="socket wrench" src="https://i.imgur.com/WvqbuQp.jpg" width="50%" />

wrench ~= lever

> "you must have a pry bar" ### vs > "be sure to bring your wrench"

> It's fine to use the wrong tool \ > when you don't have the right tool.

But, in JavaScript, \ we (almost) always \ have the right tool.

JavaScript Array Methods: <img alt="too many cooks" src="https://i.imgur.com/qXiRFTi.jpg" width="60%" />

## Goal

## Goal to be semantic ✅ <!-- could be overly specific -->

## Goal to be semantic ✅ to _not_ be incongruous ✅✅

> "you don't always know what's right, \ > but you often know what's wrong - \ > so don't do that" <small>- John Ousterhout (paraphrased)</small>

> "in the face of ambiguity, \ > refuse the temptation to guess" <small>- The Zen of Python</small>

> "better _no_ info \ > than _bad_ info" <small>- AJ</small>

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Nz8ssH7LiB0?start=13" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <small>Video: <a href="https://www.youtube.com/watch?v=Nz8ssH7LiB0&t=13s">https://youtu.be/Nz8ssH7LiB0&t=13s</a></small>

# ✅ ⚠️ ❌

# ✅ ⚠️ ❌ ## Semantic JS

## Semantic JS <small><em>Strings</em></small> ```js "" + 1; ```

## Semantic JS <small><em>Strings</em></small> ```js "" + 1; ``` vs ```js (1).toString(); String(1); ```

## Semantic JS <small><em>Numbers</em></small> ```js "1" * 1; ``` vs ```js parseFloat("1"); parseInt("1", 10); ```

## Array Semantics

## Array Semantics ❌ `new Array()` ```js let arr = new Array(n...); ``` ✅ `[]` ```js let arr = [a, ...]; ```

❌ `new Array()` Ambiguous

❌ `new Array()` Ambiguous ```js new Array(length); ``` ```js new Array(v, ...) ```

❌ `new Array()` Ambiguous ```js new Array(1); // [ undefined ] // [ 1 ] ```

❌ `new Array()` not _verbose_ but ...

❌ `new Array()` not _verbose_ but ... _"bloat without distinction"_

✅ Communicate Intent ```js let arr = []; ``` ```js Array.from(arrayLike); ```

## Semantics Usage

## Semantic Usage ⚠️ ```js let arr = ... ``` ✅ ```js let foos = ... ```

⚠️ `arr` Generic

⚠️ `arr` Generic (no specific problem to solve)

⚠️ `arr` (no specific problem to solve) communicates ignorance

⚠️ `arr` communicates ignorance > we just don't know

⚠️ `arr` appropriate for "utility" fns

⚠️ `arr` appropriate for "utility" fns > this is a set \ > the quality of "set"ness is important

⚠️ `arr` utility libs are _not_ appropriate

⚠️ `arr` utility libs are _not_ appropriate (no specific problem to solve)²

✅ `foos` Specific

✅ `foos` Specific (not literally `foos`, but `users`, `tasks`, etc)

✅ `foos` > these are `foos` \ > each `foo` is valuable

> "it's an array" <small>_not_ vital communication</small>

> "it's a bunch of _foos_" <small>Array*ness* (cardinality) is communicated by pluralization</small>

## Iteration Semantics

✅ `"foo"` ```js // 'foo' of 'foos' foos.forEach(function (foo) { // do stuff }); ```

✅ `"f"` for `"foo"` ```js // 'f' of 'foos' foos.forEach(function (f) { // do stuff }); ```

✅ `"person"` ```js // 'person' of 'persons' persons.forEach(function (person) { // do stuff }); ```

✅ `"p"` for `person` ```js // 'p' for 'person' persons.forEach(function (p) { // do stuff }); ```

⚠️ `"v"` for `value` ```js // key, value arr.forEach(function (v) { // do stuff }); ```

⚠️ `"el"` for `element` ```js // index, element arr.forEach(function (el) { // do stuff }); ```

❌ `"e"` for `exception` ```js // also error, exception, event arr.forEach(function (e) { // do stuff }); ```

❌ `"i"` for `item` ```js // item, but also index arr.forEach(function (i) { // do stuff }); ```

> The _category_ of the data _(collection)_

> The _category_ of the data _(collection)_ vs > The _story_ of the data _(interactions)_

## Booleans vs Enums

## Booleans vs Enums - allowed

## Booleans vs Enums - allowed - boolean

## Booleans vs Enums - admin

## Booleans vs Enums - isAdmin

## Booleans vs Enums - isAdmin - boolean

## Booleans vs Enums - hasAdminRights

## Booleans vs Enums - asAdmin

## Booleans vs Enums - hasChildren

## Booleans vs Enums - hasChildren - boolean

## Booleans vs Enums - public

## Booleans vs Enums - public - private

## Booleans vs Enums - public - private - unlisted

## Booleans vs Enums - public - private - unlisted - whitelist

## Booleans vs Enums - privacy - "public" - "unlisted" - "whitelist" - "private"

## Booleans vs Enums - privacy - "public" - "unlisted" - "whitelist" - "private"

## Common Conventions ```txt a,b - sortable values args - variadic arguments arr - Array el - Element err - Error (Exception) ev - Event i,j - index (or count) k - key ```

## Common Conventions ```txt n,m - Number (or quantity) opts - misc options r - record req - server request res - server response resp - client response v,x - value x,y,z - planer coords ```

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ph9HGYkAiWw?start=32" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <small>Video: <a href="https://www.youtube.com/watch?v=ph9HGYkAiWw&t=32s">https://youtu.be/ph9HGYkAiWw&t=32s</a></small>

Q&A

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

Thanks.

FIN