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

Made with Slides.com

JavaScript Deep Dive

  • 718

More from Rohit Rai