JavaScript Deep Dive
Rohit Rai
Software Engineer @ Red Hat
github.com/rohitkrai03
@rohitkrai293
Content
-
Types
-
Coercion
-
Scope
-
Closure
-
this
-
Prototypes
-
Inheritance
-
ES6 Classes
Types, Coercion
-
Primitive Types
-
Natives
-
Coercion
-
Equality
Primitive Types
-
undefined
-
string
-
number
-
boolean
-
object
-
function
-
null
NaN
Natives
- String
- Number
- Boolean
- Function
- Object
- Array
- RegExp
- Date
- Error
Native Types?
Native Objects?
- String()
- Number()
- Boolean()
- Function()
- Object()
- Array()
- RegExp()
- Date()
- Error()
Native Functions
Coercion
Explicit: it’s obvious from the code that you’re doing it
Implicit: happens as a side effect of some other operation
Explicit Coercion
Implicit Coercion
Coersive Equality
== vs. ===
== checks value
=== checks value and type
== allows coercion === doesn't allow coercion
Scopes, Closure
-
Nested Scope
-
Hoisting
-
Closure
-
Modules
Scopes: Where to look for things
JavaScript has function scope only*
Named Function Expressions
-
Handy function self-reference
-
More debuggable stack traces
-
More self-documenting code
Lexical Scope
Dynamic Scope
Function Scoping
IIFE
Block Scoping
let introduced in ES6
Sometimes, var > let
Const Confusion
var Hoisting
function Hoisting
let Gotcha
Closure
Closure is when a function “remembers” its lexical scope even when the function is executed outside that lexical scope.
Closure in shared scope
Closure in loops
Closure in loops + block scoping
Modules
Not a module
Module Design Pattern
ES6 Modules
Object Oriented JavaScript
-
this
-
Prototypes
-
Inheritance
-
class { }
this
Every* function, while executing, has a reference to its current execution context, called this.
Remember lexical scope vs. dynamic scope?
JavaScript’s version of “dynamic scope” is this.
this: Default & Implicit Binding
this: Explicit Binding
this: Hard Binding
this: new binding
-
Creates an empty object
- Links that object to another object
- Passes that object as a this context to that function call
- Returns that this context
Prototypes
Objects are built by constructor calls
A constructor makes an object “based on” its own prototype
A constructor makes an object linked to its own prototype
Inheritance
Classical Inheritance
Prototypal Inheritance
ES6 Classes {}
Deeply Inspired from Talks by Kyle Simpson
Thanks!
Further Reading - https://github.com/getify/You-Dont-Know-JS
Slides - https://slides.com/rohitrai/js-deep-dive
@getify
JavaScript Deep Dive
By Rohit Rai
JavaScript Deep Dive
- 470