KYLE SIMPSON GETIFY@GMAIL.

COM

DEEP JS FOUNDATIONS
Motivations?
Have you ever read
any part of the JS
specification?
https://twitter.com/YDKJS/status/1099716798088400899
Whenever there's a divergence
between what your brain thinks
is happening, and what the
computer does, that's where
bugs enter the code.
--getify's law #17
Course Overview Scope
• Nested Scope
• Hoisting
Types • Closure
• Primitive Types • Modules
• Abstract Operations
• Coercion Objects (Oriented)
• Equality • this
• TypeScript, Flow, etc. • class { }
• Prototypes
• OO vs. OLOO
...but before we begin...
Types
• Primitive Types
• Abstract Operations
• Coercion
• Equality
• TypeScript, Flow, etc.
"In JavaScript, everything
is an object."

false
Primitive Types
• undefined • undeclared?
• string • null?
• number • function?
• boolean • array?
• object • bigint?
• symbol

Primitive Types
• undefined • object
• string • function
• number • array
• boolean
• object
Objects
• symbol
• null
Not
• bigint (future)
Primitive Types
In JavaScript, variables
don't have types,
values do.
Primitive Types: typeof
Primitive Types: typeof
 undefined
vs.
undeclared
vs.
uninitialized (aka TDZ)
Primitive Types: staring into the emptiness
Special Values
NaN (“not a number”)

Special Values
Special Values: NaN
NaN: Invalid Number
don't: undefined
don't: null
don't: false
don't: -1
don't: 0

Special Values: NaN

Negative Zero

Special Values
Special Values: -0
Special Values: -0
Special Values: -0
Fundamental Objects
aka: Built-In Objects
aka: Native Functions
Use new: Don't use new:
• Object() • String()
• Array() • Number()
• Function() • Boolean()
• Date()
• RegExp()
• Error()
Fundamental Objects
Fundamental Objects
(aka "coercion")
ToPrimitive(hint) (7.1.1)

Abstract Operations
hint: "number" hint: "string"

valueOf() toString()
toString() valueOf()

Abstract Operations: ToPrimitive

ToString (7.1.12)

Abstract Operations
 null "null"
undefined "undefined"
true "true"
false "false"
3.14159 "3.14159"
0 "0"
-0 "0"
Abstract Operations: ToString
 ToString (object):
ToPrimitive (string)
aka: toString() / valueOf()

Abstract Operations: ToString (Array/Object)

 [] ""
[1,2,3] "1,2,3"
[null,undefined] ","
[[[],[],[]],[]] ",,,"
[,,,,] ",,,"

Abstract Operations: ToString (Array)

 {} "[object Object]"
{a:2} "[object Object]"

{ toString(){ return "X"; } } "X"

Abstract Operations: ToString (Object)

ToNumber (7.1.3)

Abstract Operations
 "" 0
"0" 0
"-0" -0
" 009 " 9
"3.14159" 3.14159
"0." 0
".0" 0
"." NaN
"0xaf" 175
Abstract Operations: ToNumber
 false 0
true 1
null 0
undefined NaN

Abstract Operations: ToNumber

 ToNumber (object):
ToPrimitive (number)
aka: valueOf() / toString()

Abstract Operations: ToNumber (Array/Object)

 (for [] and {} by default):
valueOf() { return this; }
--> toString()

Abstract Operations: ToNumber (Array/Object)

 [""] 0
["0"] 0
["-0"] -0
[null] 0
[undefined] 0
[1,2,3] NaN
[[[[]]]] 0
Coercion: ToNumber (Array)
 { .. } NaN
{ valueOf() { return 3; } } 3

Coercion: ToNumber (Object)

ToBoolean (7.1.2)

Abstract Operations
 Falsy Truthy
“” “foo”
0, -0 23
null { a:1 }
NaN [1,3]
false true
undefined function(){..}

...
Abstract Operations: ToBoolean
Coercion
You claim to avoid coercion
because it's evil, but...

Coercion
Coercion: we all do it...
Coercion: string concatenation (number to string)
Coercion: string concatenation (number to string)
Coercion: string concatenation (number to string)
Coercion: number to string
Coercion: number to string
Coercion: number to string
OK, OK... but, what about...?
Coercion: string to number
Coercion: string to number
Coercion: string to number
Coercion: string to number
Yeah, but...
Recall Falsy vs Truthy?

Coercion: __ to boolean
Coercion: __ to boolean
Coercion: __ to boolean
Coercion: __ to boolean
Ummmm.....
Boxing

Coercion: primitive to object

 All programming languages
have type conversions, because
it's absolutely necessary.
 You use coercion in JS
whether you admit it or not,
because you have to.
Every language has type
conversion corner cases
Coercion: corner cases
The Root Of All (Coercion) Evil

Coercion: corner cases

Coercion: corner cases
You don't deal with these type
conversion corner cases by
avoiding coercions.
 Instead, you have to adopt a
coding style that makes value
types plain and obvious.
 A quality JS program embraces
coercions, making sure the types
involved in every operation are
clear. Thus, corner cases are
safely managed.
 Type Rigidity
Static Types
Type Soundness
JavaScript's dynamic typing is
not a weakness, it's one of its
strong qualities
 But... but...

what about the junior devs?
 Implicit != Magic
Implicit != Bad
Implicit: Abstracted
Hiding unnecessary details,
re-focusing the reader and
increasing clarity
Coercion: implicit can be good (sometimes)
Coercion: implicit can be good (sometimes)
 Is showing the reader the
extra type details helpful or
distracting?
 "If a feature is sometimes useful
and sometimes dangerous and if
there is a better option then always
use the better option."


-- "The Good Parts", Crockford

 Useful: when the reader is
focused on what's important
Dangerous: when the reader
can't tell what will happen
Better: when the reader
understands the code
 It is irresponsible to
knowingly avoid usage of a
feature that can improve code
readability
 Equality

== vs. ===
== checks value (loose)

=== checks value and type (strict)

? Loose Equality vs. Strict Equality

If you're trying to understand
your code, it's critical you
learn to think like JS
Loose Equality: still types, and ===
Coercive Equality: == and ===
Strict Equality: types and lies
Equality: identity, not structure
== checks value (loose)

=== checks value and type (strict)

== allows coercion (types different)

=== disallows coercion (types same)

Coercive Equality vs. Non-Coercive Equality
Like every other operation, is
coercion helpful in an equality
comparison or not?

Coercive Equality: helpful?

Like every other operation, do
we know the types or not?

Coercive Equality: safe?

Coercive Equality: null == undefined
Coercive Equality: null == undefined
Coercive Equality: prefers numeric comparison
Coercive Equality: prefers numeric comparison
Coercive Equality: only primitives
Coercive Equality: only primitives
Coercive Equality: only primitives
 == Summary:


If the types are the same: ===
If null or undefined: equal
If non-primitives: ToPrimitive
Prefer: ToNumber
Coercive Equality: summary
== Corner Cases
== Corner Cases: WAT!?
== Corner Cases: WAT!?
== Corner Cases: booleans
== Corner Cases: booleans
 Avoid:
1. == with 0 or "" (or even " ")
2. == with non-primitives
3. == true or == false : allow
ToBoolean or use ===
The case for preferring ==
 Knowing types is always
better than not knowing them
Static Types is not the only (or
even necessarily best) way to
know your types
== is not about comparisons
with unknown types
== is about comparisons
with known type(s), optionally
where conversions are helpful
 If you know the type(s) in a
comparison:
If both types are the same,
== is identical to ===
Using === would be unnecessary,
so prefer the shorter ==
Since === is pointless when the types don't match,
it's similarly unnecessary when they do match.
If you know the type(s) in a
comparison:
If the types are different, using
one === would be broken
Prefer the more powerful ==
or don't compare at all
 If you know the type(s) in a
comparison:
If the types are different, the
equivalent of one == would be
two (or more!) === (ie, "slower")
Prefer the "faster" single ==
If you know the type(s) in a
comparison:
If the types are different, two (or
more!) === comparisons may
distract the reader
Prefer the cleaner single ==
 If you know the type(s) in a
comparison:
Summary: whether the types match or
not, == is the more sensible choice
If you don't know the type(s) in
a comparison:
Not knowing the types means not
fully understanding that code
So, best to refactor so you
can know the types
If you don't know the type(s) in
a comparison:
The uncertainty of not knowing
types should be obvious to reader
The most obvious signal is ===
If you don't know the type(s) in
a comparison:
Not knowing the types is equivalent
to assuming type conversion
Because of corner cases, the only
safe choice is ===
If you don't know the type(s) in
a comparison:
Summary: if you can't or won't use
known and obvious types, === is
the only reasonable choice
 Even if === would always be
equivalent to == in your code,
using it everywhere sends a wrong
semantic signal: "Protecting myself
since I don't know/trust the types"
 Summary: making types
known and obvious leads to
better code. If types are
known, == is best.



Otherwise, fall back to ===.
TypeScript, Flow, and
type-aware linting
 Benefits:
1. Catch type-related mistakes
2. Communicate type intent
3. Provide IDE feedback
 Caveats:
1. Inferencing is best-guess, not a
guarantee
2. Annotations are optional
3. Any part of the application that
isn't typed introduces uncertainty
TypeScript & Flow

Type-Aware Linting: inferencing

TypeScript & Flow

Type-Aware Linting: annotating

TypeScript & Flow

Type-Aware Linting: custom types & signatures

TypeScript & Flow

Type-Aware Linting: validating operand types

https://github.com/niieani/typescript-vs-flowtype

Type-Aware Linting: TypeScript vs. Flow

TypeScript & Flow:
Pros and Cons
They make types more
obvious in code

TypeScript/Flow: Pros
Familiarity: they look like other
language's type systems

TypeScript/Flow: Pros
Extremely popular these days

TypeScript/Flow: Pros
They're very sophisticated and
good at what they do

TypeScript/Flow: Pros
They use "non-JS-standard"
syntax (or code comments)

TypeScript/Flow: Cons
 They require a build process,
*

which raises the barrier to entry

TypeScript/Flow: Cons
 Their sophistication can be
intimidating to those without
prior formal types experience

TypeScript/Flow: Cons
 They focus more on "static
types" (variables, parameters,
returns, properties, etc) than
value types
TypeScript/Flow: Cons
The only way to have confidence
over the runtime behavior is to
limit/eliminate dynamic typing

TypeScript/Flow: Cons
Alternative?
 Typl
https://github.com/getify/Typl
 Motivations:
1. Only standard JS syntax
2. Compiler and Runtime (both optional)
3. Completely configurable (ie, ESLint)
4. Main focus: inferring or annotating
values; Optional: "static typing"
5. With the grain of JS, not against it
Typl: inferencing + optional "static types"
Typl: tagging literals
Typl: type assertion (tagging expressions)
Typl: type signatures (functions, objects, etc)
Typl: inline & persistent type signatures
Typl: powerful multi-pass inferencing
Typl: compiler vs runtime
Typl: compiled (some runtime removed)
Much more to come...
Wrapping Up
JavaScript has a (dynamic) type
system, which uses various
forms of coercion for value type
conversion, including equality
comparisons
 However, the prevailing
response seems to be: avoid as
much of this system as possible,
and use === to "protect" from
needing to worry about types
 Part of the problem with
avoidance of whole swaths of
JS, like pretending === saves
you from needing to know
types, is that it tends to
systemically perpetuate bugs
You simply cannot write quality
JS programs without knowing
the types involved in your
operations.
 Alternately, many choose to
adopt a different "static types"
system layered on top
While certainly helpful in some
respects, this is "avoidance" of
a different sort
 Apparently, JS's type system is
inferior so it must be replaced,
rather than learned and leveraged
Many claim that JS's type system
is too difficult for newer devs to
learn, and that static types are
(somehow) more learnable
My claim: the better approach is
to embrace and learn JS's type
system, and to adopt a coding
style which makes types as
obvious as possible
By doing so, you will make your
code more readable and more
robust, for experienced and new
developers alike
As an option to aid in that effort, I
created Typl, which I believe
embraces and unlocks the best
parts of JS's types and coercion.
Scope
• Nested Scope
• Hoisting
• Closure
• Modules
Scope: where to look
for things
Scope: sorting marbles
JavaScript organizes
scopes with functions
and blocks

Scope
Scope
 Suzy
React Scope
ReferenceError

Scope
ReferenceError Scope
 undefined
vs.
undeclared

Scope
Scope
ReferenceError

Scope: which scope?

Named Function Expressions
Named Function Expressions
1. Reliable function self-reference (recursion, etc)

2. More debuggable stack traces

3. More self-documenting code

Named Function Expressions: Benefits

Named Function Expressions vs. Anonymous Arrow Functions
Named (Arrow) Function Expressions? Still no...
 (Named) Function Declaration
>
Named Function Expression
>
Anonymous Function Expression
lexical scope

dynamic scope
Scope: lexical
Sublime-Levels
Scope: lexical
 A L
TI C
R E
H E O
T Scope: dynamic
Function Scoping
Function Scoping
Function Scoping
Function Scoping
http://benalman.com/news/2010/11/immediately-invoked-function-expression/

Function Scoping: IIFE

Function Scoping: IIFE
Function Scoping: IIFE
Function Scoping: IIFE
Block Scoping
Instead of an IIFE?

Block Scoping: encapsulation

Block Scoping: encapsulation
Block Scoping: intent
Block Scoping: let
Block Scoping: "well, actually, not all vars..."
Block Scoping: let + var
Block Scoping: sometimes var > let
Block Scoping: explicit let block
Block Scoping: const(antly confusing)
Hoisting
Scope: hoisting
Scope: hoisting
Scope: hoisting
Scope: hoisting
 undefined

Scope: hoisting
Scope: hoisting
"let doesn't hoist"? false

Hoisting: let gotcha

"let doesn't hoist"? false

Hoisting: let gotcha

Closure
Closure is when a function “remembers” its
lexical scope even when the function is
executed outside that lexical scope.

Closure
Closure
Closure
 Suzy
Closure: NOT capturing a value
Closure: loops
Closure: loops
Closure: loops
Modules
Namespace, NOT a module
 Modules encapsulate data and behavior
(methods) together. The state (data) of a
module is held by its methods via closure.
Classic/Revealing module pattern
Module Factory
workshop.mjs:

ES6 module pattern

Objects (Oriented)
• this
• class { }
• Prototypes
• “Inheritance” vs. “Behavior Delegation”
(OO vs. OLOO)
this
A function's this references the execution
context for that call, determined entirely by
how the function was called.

this
A this-aware function can thus have a
different context each time it's called, which
makes it more flexible & reusable.

this
Recall: dynamic scope
Dynamic Context ~= JS's Dynamic Scope
this vs. Scope
this: implicit binding
this: dynamic binding -> sharing
this: explicit binding
this: hard binding
"constructor calls"

this: new binding

1. Create a brand new empty object
2.* Link that object to another object
3. Call function with this set to the new object
4. If function does not return an object,
assume return of this
new: steps
this: default binding
this: binding rule precedence?
1. Is the function called by new?
2. Is the function called by call() or apply()?
Note: bind() effectively uses apply()
3. Is the function called on a context object?
4. DEFAULT: global object (except strict mode)
this: determination
this: arrow functions
An arrow function is this-bound
(aka .bind()) to its parent function.

this: arrow functions

this: arrow functions
 An arrow function is this-bound
(aka .bind()) to its parent function.

An arrow function doesn't define a this,

so it's like any normal variable, and
resolves lexically (aka "lexical this").

this: arrow functions

this: arrow functions
Only use => arrow functions when you need
lexical this.

https://github.com/getify/eslint-plugin-arrow-require-this

this: arrow functions

class { }

ES6
ES6 class
ES6 class: extends (inheritance)
ES6 class: super (relative polymorphism)
ES6 class: still dynamic this
ES6 class: "fixing" this?
https://gist.github.com/getify/86bed0bb78ccb517c84a6e61ec16adca

ES6 class: hacktastrophy

ES6 class: inheritable hard this-bound methods
Prototypes
 Objects are built by

"constructor calls" (via new)

Prototypes
A "constructor call" makes an object
“based on” its own prototype

Prototypes
 A "constructor call" makes an
object linked to its own prototype

Prototypes
Prototypes: as "classes"
Prototypes
Prototypes
Prototypes: shadowing
Prototypes: shadowing
“Prototypal Inheritance”

Prototypes
Prototypes: objects linked
Clarifying Inheritance

OO
 Workshop deepJS
reactJS

AnotherWorkshop JSRecentParts

OO: classical inheritance

 Workshop.prototype
deepJS
reactJS
AnotherWorkshop.prototype
JSRecentParts

(another design pattern)

OO: “prototypal inheritance”

JavaScript “Inheritance”

“Behavior Delegation”

OO: js
 Let's Simplify!

OLOO:

Objects Linked to Other Objects

OLOO
OLOO: recall class?
OLOO: prototypal objects
OLOO: delegated objects
OLOO: Object.create()
Delegation: Design Pattern
 AuthControllerClass

LoginFormControllerClass

pageInstance

Composition Thru Inheritance

LoginFormControllerClass AuthControllerClass

pageInstance
authInstance

Composition Over Inheritance

LoginFormControllerClass AuthControllerClass

pageInstance authInstance

Mixin Composition
LoginFormController AuthController

Delegation (Dynamic Composition)

Parent-Child Peer-Peer

Delegation-Oriented Design
Delegation-Oriented Design
 More Testable

MockLoginFormController MockAuthController

LoginFormController AuthController

Delegation-Oriented Design
Know Your JavaScript
 THANKS!!!!

KYLE SIMPSON [email protected]

DEEP JS FOUNDATIONS