This document is written to help JavaScript developers to understand JavaScript's weird parts deeply and to prepare for interviews, the following resources was really helpful to write this document:

• ECMAScript Language specification
• MDN
• The Modern JavaScript Tutorial

• No attribute is required for the script element.
• The benefit of a separate file is browser caching.
• If src attribute is set, the content is ignored.
• JavaScript interprets the line break as an implicit semicolon (not always).

• Execution Context
  • Active execution contexts logically form the call stack.
  • The top execution context on the call stack is the running execution context.
  • The interpreter starts by the global execution context.
  • Each invocation of a function, creates a new execution context appended to the top of the execution stack.
  • Low level explanation
    • Breaks into:
      • LexicalEnvironment
        • Is a lexical environment.
        • Holds let and const declarations.
        • Outer reference.
      • VariableEnvironment.
        • Is a lexical environment.
        • Holds bindings created by VariableStatements and FunctionDeclarations.
        • Outer reference.
      • ThisBinding
        • The value associated with the this keyword.
  • High level explanation
    • Can be devided to
      • Creation phase
        • Creates a variable object (aka. activation object)
          • Variables declarations.
          • Function declarations.
          • Arguments.
        • Create the scope chain.
        • Determine the value of this.
      • Execution phase
        • The code is interpreted and executed.
• Lexical Environment:
  • Is a specification type.
  • Like LexicalEnvironment and VariableEnvironment.
  • Consists of:
    • Environment Record: identifier bindings.
    • outer reference to the outer lexical environment or null.
• Context:
  • Object-based.
  • Is the value of this which is a reference to the object that owns the current executing code.
  • Determined by how a function is invoked.
• Scope:
  • Function-bases.
  • The region where the binding between a name (like variable name) to an entity is valid.
• Closure:
  • A closure is a function that remembers its outer variables and can access them.
  • Combination of a function and the lexical environment within which that function was declared
  • The closure is the function object itself.
  • Accessing variables outside of the immediate lexical scope creates a closure.
  • Happens when we have a nested functions.
  • JavaScript engines also may optimize, discard variables that are unused to save memory.
  • A Lexical Environment object lives in the heap as long as there is a function which may use it. And when there are none, it is cleared.
  • All functions in JavaScript are closures.
  • The internal property [[Environment]] of a function, refers to the outer lexical environment.
• IIFE
  • Immediately-invoked function expressions.
  • A design pattern used by most popular libraries to place all library code inside of a local scope.
  • No global property is created for the function (anonymous function expression).
  • All of the properties created inside of the function expression are scoped locally.
  • Encapsulation, preserve the global namespace as any variables declared within the function body will be local to the closure but will still live throughout runtime.
  • Benefits:
    • Local scoping.
• Hoisting:
  • Variable and function declarations are put into memory during the compile phase.
  • Stays exactly where you typed it in your coding (not actually moved to the top).
  • Only hoists declarations, not initializations.
  • Declarations contribute to the VariableEnvironment when the execution scope is entered (^).
• Callbacks:
  • A callback function is a function passed into another function as an argument.
  • To be invoked inside the called function at some point, like after an asynchronous operation has completed.
• Callback Hell:
  • Deeply nested callbacks.
  • Called also Pyramid of Doom.
• Promise
  • Represents a value that either avaliable or will be avaliable in the future.
  • Represents the completion or failure of an asynchronous operation, and its resulting value.
  • Represents placeholder for the eventual results of a deferred (and possibly asynchronous) computation.
  • The function passed with the arguments resolve and reject called the executor function.
  • Can either be:
    • Fulfilled with a value.
    • Rejected with a reason (error).
  • Internal properties of promise instances:
    • [[PromiseResult]] the value or the error.
    • [[PromiseState]] can be: pending, fulfilled or rejected.
    • [[PromiseFulfillReactions]] queue for then handlers.
    • [[PromiseRejectReactions]] queue for catch handlers.
  • Methods:
    • Promise.all(iterable)
    • Promise.race(iterable)
    • Promise.resolve(value) returns a resolved promise with the given value.
    • Promise.reject(reason) returns a rejected promise with the error.
• Pollyfills:
  • Scripts that fill in the gap and add missing implementations for JavaScript or modifing the existing onces to support the modern standard.
  • Use the same API.
  • Like pollyfill for the Function.prototype.bind which is not supported in IE8.
  • Or pollyfills for new methods in ES6 to be used in all browsers.
  • Examples:
    • Babel polyfill.
    • polyfill.io.
• Fallback:
  • Replaces the feature with:
    • Simplified functionality
    • Or Third-party plugin
    • Or an error message
  • Like if the browser doesn't support the video tag, replace it with flash plugin.

Notes:

• Every function invocation has both a scope and a context associated with it.
• When an execution context is created its LexicalEnvironment and VariableEnvironment components initially have the same value.
• The value of the VariableEnvironment component never changes.
• The value of the LexicalEnvironment component may change during execution of code within an execution context like when entering a block.
• Every run for a loop block has a separate Lexical Environment.

Bind pollyfill:

if (!('bind' in Function.prototype)) {
  Function.prototype.bind = function() {
    var func = this;
    var obj = arguments[0];
    var params = Array.prototype.slice.call(arguments, 1);
    return function() {
      func.apply(obj, params.concat(Array.prototype.slice.call(arguments)));
    }
  }
}

Is a wrapper around a function that alters its behavior. Like caching the results or formatting them.

To implement them we need:

• func.call(context, arg1, arg2…) calls func with given context and arguments.
• func.apply(context, args) calls func with given context and arguments passed as an array-like.
• func.bind(context, ...args) returns a bound variant of function func that fixes the context and first arguments if given.

Note:

• bind is really useful with:
  • Setting the context for setTimeout's callback function.
  • Partial functions.
  • Currying functions.

Creates a new function by fixing some parameters of the existing one.

• Translating a function from callable as f(a, b, c) into callable as f(a)(b)(c).
• To allow it to be called normally or get partials.

A wrapper function that passes everything it gets to another one.

function wrapper() {
  return printArgs.apply(this, arguments);
}

Using a method from another object on our object.

Array.prototype.slice.call(arguments);

• Objects are associative arrays, stores key-value pairs.
• Keys must be string or symbol, values can be anything.
• To access a property, we can use:
  • The dot notation: obj.key
  • The square brackets notation obj[key]
• An empty object can be created using:
  • Using the object constructor new Object().
  • Using the object literal {}.
• To remove a property we can use the delete operator.
• Existence check
  • Using typeof, typeof obj.key !== 'undefined'.
  • Using key in obj, better because if we have properties that store undefined.
• The equality == and strict equality === operators for objects work exactly the same.
• Cloning and merging
  • Shallow copy and merge
    • Object.assign(dest[, src1, src2, src3...]);
    • Object.assign({}, user);
    • Object.assign not supported in IE, we can use for..in.
    • var clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));
  • Deep copy
    • _.cloneDeep() from Lodash
• There is other types of object other than the the Object (aka. plain object):
  • Array
  • Date
  • Error
• To check if object literal: Object.prototype.toString.call(obj) === '[object Object]'
• Global object in browsers is window.
• Global object in Node.js is global.

• Are regular functions.
• As convention it should be named with capital letter first, and not called without new.
• When the function is executed as new User(), it does:
  • Create an empty object.
  • Assign the [[prototype]] of the created object to User.prototype.
  • Execute the function and assign this to the created object.
  • Return the value of this or the value of the return statement if the returned is an object.
• The default prototype is an object with the only property constructor that points back to the function itself.
• If we replace the default prototype as a whole, then there will be no constructor in it, unless we define manually.
• myObj.constructor is helpful, when we want to create another object from the same constructor that we don't know. var myObj2 = new myObj.constructor().
• Any function can be run with new.
• To check if the function is called with new or without we can use new.target inside it.

To allow creating an object with new or without:

function User(name) {

  // Not called with new
  if (!new.target) {
    return new User(name);
  }

  this.name = name;
  
}

The new function() { … } pattern to encapsulate the creation of a single object:

var user = new function() {
  this.name = 'Anas';
  this.age = 'Ali';
}

• All objects have a hidden [[Prototype]] property that’s either another object or null.
• That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype.
• Can be only one [[Prototype]] no multiple inheritance.
• The prototype is only used for reading properties.
• Write/delete operations work directly with the object.
• delete obj.property will have no effect if the property is inherited (prototype chain).
• obj.property = 'value' will create a property on this object regardless if there is property called property that inherited.
• this is not affected by prototypes at all.
• No matter where the method is found: in an object or its prototype. In a method call, this is always the object before the dot.
• null has no prototype, and acts as the final link in this prototype chain.
• Nearly all objects in JavaScript are instances of Object.
• To access the [[Prototype]]:
  • Use the non-standard property __proto__.
  • Use ES2015 Object.getPrototypeOf(), Object.setPrototypeOf().
• __proto__ is not the same as [[Prototype]]. That’s a getter/setter for it.
• __proto__ is setter/getter for the [[Prototype]], defined in Object.prototype.
• If an object that its prototype chain not end with the Object, the __proto__ will not be avaliable.
• The object instanceof contructor operator examines the prototype chain for the check.
  • var myObj = {}; console.log(myObj instanceof Object) is true because myObj.__proto__ == Object.prototype

Creates an empty object with given proto as [[Prototype]] (can be null) and optional property descriptors.

Object.create(proto[, descriptors])

We can use Object.create to perform an object cloning:

var clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj));

To create an empty object without a prototype

Object.create(null)

• JavaScript is prototype-based.
• There is no additional [[Prototype]] in the chain above Object.prototype.
• Object.prototype.__proto__ is null.
• Array.prototype.__proto__ == Object.prototype.
• arr.__proto__.__proto__ == Object.prototype.
• Modifying native prototypes is not recommended unless for polyfills.

• Functional class pattern.
  • Create an object using new and function constructor that has everything inside it.
  • Public properties are defined inside the constructor function.
  • Public methods are defined inside the constructor function.
  • Can have private methods/variables that are not accessed from the outside.
• Factory class pattern.
  • Create an object by calling a function that returns a new object.
  • Public properties are defined inside the returned object.
  • Public methods are defined inside the returned object.
  • Can have private methods/variables that are not accessed from the outside.
• Prototype-based class pattern.
  • Create an object using new and function constructor.
  • Public properties are defined inside the constructor function.
  • Public methods are defined inside the constructor's prototype property.
  • Can't have private methods/variables, prefixing with _ is a convention to indicate that a member should not be used from the outside.
  • The constructor only initializes the current object state.
  • More memory-efficient because all methods are shared between all objects.
  • Is the best and mostly used.

• Classical model
  • Classes are represented by constructor functions.
  • To inherit methods Rabbit.prototype = Object.create(Animal.prototype);.
  • Reset the constructor property Rabbit.prototype.constructor = Rabbit;.
  • To inherit properties Animal.call(this, name); inside the Rabbit constructor function.
• Prototypal model
  • Classes are just object litterals.
  • To inherit var rabbit = Objct.create(animal).

4 Ways to create a function:

• Function declaration:
  • Hoisted, Processed before the code block is executed. They are visible everywhere in the block.
  • Declarations contribute to the VariableEnvironment when the execution scope is entered.
• Function expression:
  • Created when the execution flow reaches them.
  • If they have a name assigned to them it is only visible by itself var myFunc = function func() {...}
• Function constructor new Function('a', 'b', 'return a + b');
• Arrow function.
  • Do not have this.
  • Do not have arguments.
  • Can’t be called with new.
  • Doesn't have their own context, works in the current one.

Notes:

• Properties of a function:
  • name: the name of the function
  • length: number of arguments
  • prototype
  • prototype.constructor
• __proto__: Function.prototype

• Using setTimeout and setInterval functions.
• setTimeout can be used to implement setInterval.
• They are not a part of JavaScript specification (ES).
• Zero-timeout scheduling setTimeout(...,0):
  • Is used to schedule the call as soon as possible, but after the current code is complete.
  • To split CPU-hungry tasks into pieces, so that the script doesn’t hang.
  • Let the browser do something else while the process is going on.

• Dynamically typed.
• There are data types, but variables are not bound to any of them.
• No function type, they belong to the object type, but typeof treats them differently.
• An old bug in JavaScript is typeof null == 'object'.
• Seven basic data type:
  • number
    • Serves both for integer and floating point numbers.
    • There are special numeric values: Infinity, -Infinity and NaN.
    • Maths is safe in JavaScript, will never stop with a fatal error.
    • NaN represents a computational error.
    • 1/0 == Infinity;
    • -1/0 == -Infinity;
    • "hello" / 2 evaluated to NaN.
  • string
    • Encoded using UTF-16.
    • Immutable, impossible to change a character.
  • boolean
  • null
    • A standalone type that has a single value null.
    • To indicate empty or unknown values.
  • undefined
    • A standalone type that has a single value undefined.
    • To indicate value not assigned
    • Only used for checks.
  • object
    • Not a primitive type.
    • Collection of data.
  • symbol
    • For unique identifiers.

typeof undefined // "undefined"
typeof 0 // "number"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object"
typeof null // "object"
typeof alert // "function"

• alert automatically converts any value to a string.
• Mathematical operations convert values to numbers.
• If condition expression converted to boolean.

• String(null) become 'null'
• String(undefined) become 'undefined'
• String(false) become 'false'
• String(true) become 'false'
• String(10.1) become '10.1'

• Number(null) become 0
• Number(undefined) become NaN
• Number(false) become 0
• Number(true) become 1
• Number('10.1') become 10.1
• Number(' 10.1 \t\n ') become 10.1
• Number(' 10.1z \t\n ') become NaN
• Number(' \t\n ') become 0
• Number('') become 0

Notes:

• To convert a string into a number
  • Trim whitespaces (spaces, tabs, new lines).
  • An empty string becomes 0
  • An error gives NaN.
• Concatenation operation vs plus
  • 1 + 2 + 'a' == '3a'
  • 'a' + 1 + 2 == 'a12'
• Can convert to numbers with + and - also.
  • +'10' == 10
  • -'10' == -10

False: values that are intuitively empty

• Boolean(null) become false
• Boolean(undefined) become false
• Boolean('') become false
• Boolean(0) become false
• Boolean(NaN) become false

True: otherwise

• Boolean(' ') become true
• Boolean('0') become true
• Boolean('abc') become true
• Boolean(123) become true

Notes:

• happens in logical operations
• Methods of primitives:
  • Primitives except null and undefined provide many helpful methods.
  • These methods work via temporary objects, but JavaScript engines are well tuned to optimize that internally.
  • Like 'hello'.toUpperCase(), 13.123.toFixed(2)
• new Number(10) returns an object not primitive.

• All objects will become true if converted to boolean.
• To convert to string, the toString() methods will be used or valueOf().
• To convert to number, the valueOf() methods will be used or toString().

• The , comma operator.
  • 10,20 == 10
  • Evaluates both, returns the last one.

• Comparison operators return a logical value.
• Strings are compared letter-by-letter in the “dictionary” order.
• When values of different types are compared, they get converted to numbers (with the exclusion of a strict equality check).
• Values null and undefined equal == each other and do not equal any other value.
  • null == null is true.
  • null == undefined is true.
  • undefined == undefined is true.
• An incomparable undefined, same as NaN (always false):
  • undefined > 0 is false.
  • undefined == 0 is false.
  • undefined < 0 is false.
  • undefined <= 0 is false.

• Or (||)
  • OR returns the first truthy value or the last one if no such value is found.
• And (&&)
  • AND returns the first falsy value or the last value if none were found.
• The precedence of the && is higher than ||.

(x > 0) && alert( 'Greater than zero!' );

null || 2 || undefined // 2

alert(1) || 2 || alert(3) // 2, since alert evaluated to undefined

1 && null && 2 // null

Multiple arguments

var sum = (a, b) => a + b;

Single argument

var double = n => n * 2;

Multiline arrow functions

var double = (n) => {
  return n * 2;
};

• If a parameter is not provided, then its value becomes undefined.
• Default value for the parameter (not supported in IE) function func(name = 'Anas').
• Checking for undefined by typeof name === 'undefined'.
• By using || operator, name = name || 'Anas'.

Notes:

• A variable declared inside a function is only visible inside that function.
• The function is an object that its prototype points to Function.prototype

hello.__proto__ == Function.prototype

• Applies to entire scripts or to individual functions.
• Strict mode changes semantics. Relying on those changes will cause mistakes and errors in browsers which don't implement strict mode.
• 'use strict' or "use strict" can be located at the top of a script or at the start of a function.
• Only comments may appear above "use strict".
• There’s no way to cancel use strict.
• It is recommended.

Makes it impossible to accidentally create global variables.

mistypeVariable = 17;

Throws an error when trying to delete undeletable property.

delete Object.prototype;

Throws an error when trying to change unwritable property.

var person = {};

Object.defineProperty(person, 'age', {
  value: 10,
  writable: false
});

person.age = 13; // TypeError

Throws an error when the a function arguments names are not unique.

function func(a, a) {
  console.log(a);
}

No longer possible to reference the global object through this inside a function.

function func() {
  console.log(this); // undefined
}

func();

The caller, callee, and arguments properties may not be accessed on strict mode functions.

function func() {
  console.log(arguments.callee); // TypeError
}

func();