Javascript - keshavbaweja-git/guides GitHub Wiki

Features

• High level
• Garbage collected
• Interpreted with JIT compilation
• Multi paradigm
  • Procedural
  • Functional
  • Object oriented
• Multi Paradigm
• Imperative
• Declarative
• Object oriented with Prototypal inheritance
• First class functions, functions are values that can be assigned/passed as args to functions/returned from functions
• Dynamically typed (data types are bound at runtime)
• Single threaded
• Non blocking event loop

Javascript Engine

• Call stack - stack of execution contexts
• Heap - Unstructured memory to hold variables

Javascript Runtime

• Javascript Engine
  • Call stack (stack of execution contexts)
  • Heap
• Web/HTML APIs
• Callback Queue
• Event loop

What is inside an Execution Context

• Variable Environment
  • let, const, var declarations
  • Function declarations
  • arguments object
• Scope Chain
• this keyword
  • Special variable that points to the owner of the function in which "this" keyword is used
  • Value of "this" is bound at runtime, depending on how the function is invoked
  • Method, this = Object on which the method is invoked
  • Function call, this = undefined (in strict mode)
  • Arrow Function, this = (this of surrounding function (lexical this))
  • Event Listener, this = (DOM element to which the listener has been attached)

Arrow functions do not have access to arguments object and this keyword. They use the arguments and this keyword of closest enclosing scope. Do not use Arrow functions as methods. Use Arrow functions for functions declared inside methods.

When is an Execution Context created

In the Creation phase, right before Execution phase

What is Scope Chain

• Scope Chain is defined by the order in which functions are written in code,
• Scope Chain is governed by Lexical Scoping Rules
• A scope has access to all variables from it's parent scope

Three scopes

• Global scope
• Function scope
• Block scope
  • Only let and const are block scoped, var end up in the closest function scope

What is Call Stack

• Order in which functions are executed

Hoisting

Type	Hoisted	Initial Value	Scope
function declarations	Yes	Function Body	Block
var	Yes	undefined	Function
let & const	No	uninitialised, TDZ	Block
function expression & Arrow functions	Based on declaration type - let, const vs var

Functions

• Arguments are always passed by value
• JS does not have pass by reference
• An Object argument is a value which references an object on heap
• Function is an Object, Object is a value => Function is a value
• Functions can be
  • assigned to variables,
  • passed as arguments to other functions
  • returned from functions
• Function methods - bind(), call(), apply()
• Function properties - name

this keyword

• this keyword inside a function points to undefined
• this keyword inside a method points to the Object on which method is invoked
• fn.call(thisValue, ...fnArguments) // invoke function fn with this set to thisValue and ...fnArguments as arguments
• fn.apply(thisValue, [fnArguments]) // invoke function fn with this set to thisValue and [fnArguments] as arguments
• fn.bind(thisValue) // creates a new function with this set to thisValue
• fn.bind(thisValue, arg1Value) // creates a new function with this set to thisValue and arg1 set to arg1Value

Higher order function

• A function that receives another function as an argument or returns a new function or both

Array methods

arr.slice() // returns a shallow copy of arr
[...arr] // create a shallow copy of arr using spread operator
arr.slice(startIndex) // returns a new array from startIndex
arr.slice(startIndex, endIndex) // returns a new array from startIndex, endIndex is excluded
arr.slice(-startIndex) // startIndex is computed from end. -1 is the last index

arr.splice(startIndex) // mutates arr
arr.splice(-1) // removes last element from arr

arr.reverse() // mutates arr

arr1.concat(arr2) // concatenates arr2 to end to arr1
[...arr1, ...arr2] // returns a new array, does not mutate arr1 or arr2

arr.join(' - ')