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(' - ')