JavaScript Cheatsheet

This guide contains brief overview of JavaScript's main concepts and known pitfalls. It might be used as a reference for interview preparation.

Table of Contents

• 1. Variables
  • 1.1. var keyword
  • 1.2. let and const keywords
  • 1.3. Hoisting
  • 1.4. Destructuring
• 2. Data Types
  • 2.1. Number
  • 2.2. BigInt
  • 2.3. Boolean
  • 2.4. String
  • 2.5. null/undefined
  • 2.6. Symbol
  • 2.7. Object
  • 2.8. Type Conversion
    • 2.8.1. Conversion Rules
    • 2.8.2. Explicit Conversion
    • 2.8.3. Implicit Conversion
• 3. Collections and Data Structures
  • 3.1. Arrays
    • 3.1.1. Array Creation
    • 3.1.2. Array Elements Access
    • 3.1.3. Array Frequently Used API
  • 3.2. Sets
  • 3.3. Maps
    • 3.3.1. WeakMap
    • 3.3.2. Map API
• 4. Functions
  • 4.1. Parameters and Arguments
    • 4.1.1. Arguments Pseudo-Array
    • 4.1.2. Rest Parameters/Spread Arguments
    • 4.1.3. Default Arguments
    • 4.1.4. Argument Destructuring
  • 4.2. Lexical Environment
  • 4.3. Closure
  • 4.4. Constructor call with new
  • 4.5. this
    • 4.5.1. Context Binding Functions
    • 4.5.2. Context Binding Rules
  • 4.6. Arrow Functions
  • 4.7. Generators
    • 4.7.1. Generator Declaration and Usage
    • 4.7.2. Iterators
    • 4.7.3. Generator Delegation
    • 4.7.4. Generator API
• 5. Classes and Objects
  • 5.1. Objects
  • 5.2. Property Descriptors
  • 5.3. Prototype Inheritance
  • 5.4. Classes
  • 5.5. Class Inheritance
• 6. Asynchronous Programming
  • 6.1. Callbacks
  • 6.2. Timeouts and Intervals
  • 6.3. Promises
    • 6.3.1. States and Fates
    • 6.3.2. Promise API
  • 6.4. async/await
  • 6.5. Rendering
  • 6.6. Event Loop
    • 6.6.1. Call Stack
    • 6.6.2. Web API
    • 6.6.3. Callback Queue
    • 6.6.4. Event Loop Demo

Variables

Variables are references to memory blocks of certain size used to store data. When an undeclared variable is referenced an exception with message foo is not defined is thrown.

var keyword

The var keyword is used to declare function scoped variables in JavaScript. That is, a variable declared using var is visible anywhere inside of the enclosing function's body.

function foo() {
    var a = 1;

    {
        // visible anywhere inside foo()
        var b = a + 2;
    }

    function bar() {
        // visible only inside bar()
        var b = a + 1;

        return b;
    }

    console.log(a + b);
}

foo(); // 4

Once a variable is declared using var, it can be accessed as a property of the window object. It also works vice versa.

var a = 1;
window.b = 2;

console.log(window.a); // 1
console.log(b) // 2

When a var variable is referenced before declararion its value is evaluated to undefined.

console.log(a); // undefined
var a = 1;

let and const keywords

Starting from ECMAScript 2015 JavaScript allows variable declaration using let and const keywords.

• Unlike variables declared with var the ones declared using let and const are block scoped, that is, they are visible only inside of the enclosing block or, when it comes to loops, within a single iteration.
• let and const variables cannot be accessed via window and are not accessible before declaration statement.
• Any attempts to redeclare variables using let/const keywords will result in SyntaxError.

The only difference between let and const is that constants cannot be assigned new values in the future. However, const keyword cannot guarantee that the current value itself will not be modified - it protects only from reassignment and hence constants must be initialized right in the declaration statement.

let a = 1;

{
    console.log(b); // ReferenceError: b is not defined   
    let b = 2; // visible only inside this block
}

console.log(b); // ReferenceError: b is not defined

const arr = [];
console.log(arr); // []

arr = [1]; // TypeError: Assignment to constant variable

arr.push(1);
console.log(arr); // [1]

Hoisting

Hoisting is JavaScript behaviour of moving variable declarations to the top of the current scope during compilation. Note that only declarations get hoisted, while initialization remains unaffected.

Hoisting is the reason why var variables' values can be accessed before actual declaration statements. It also explains why those values are evaluated to undefined (because initialization is unaffected by hoisting).

However, values of let and const variables cannot be used before declaration statements as these variables do not get initialized until the declaration.

Destructuring

Destructuring is the feature that has come to JavaScript with ECMAScript 2015 It allows for mapping values of arrays and object fields to new variables.

var { a } = { a: 42 }; // value of 'a' field is assigned to a new variable 'a'
let [b] = [1, 2]; // first value is assigned to 'b'
const { c: foo } = { a: 10, b: 20, c: 30 }; // value of 'c' field is assigned to a new constant 'foo' 

console.log(a); // 42
console.log(b); // 1
console.log(foo); // 30

Data Types

JavaScript has 8 built-in data types. Those are: number, bigint, boolean, string, null, undefined, symbol and object.

Number

The Number type is a double-precision 64-bit binary format IEEE 754 value. It is capable of storing positive floating-point numbers between Number.MIN_VALUE and Number.MAX_VALUE as well as > negative floating-point numbers between -Number.MIN_VALUE and -Number.MAX_VALUE, but it can only safely store integers in the range Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER.

Besides, number type contains some special values:

• Infinity - Positive Infinity, can also be referenced by Number.POSITIVE_INFINITY. Used to refer to numbers greater than Number.MAX_VALUE.
• -Infinity - Negative Infinity, can also be referenced by Number.NEGATIVE_INFINITY. Used to refer to numbers lower than Number.MIN_VALUE.
• +0 / -0 - Positive/Negative zeroes, equivalent to unsigned zero 0.
• NaN - Refers to values that cannot be represented as valid numbers. Can also be referenced by Number.NaN. It's unsafe to use equality operations to determine whether or not a value is NaN - isNaN() and Number.isNaN() functions must be used for this purpose. isNaN() returns true in case an argument is NaN after performing implicit conversion to number whereas Number.isNaN() does not perform any implicit conversions and returns true only if an argument is NaN.

BigInt

Introduced in ECMAScript 2020, BigInt is a primitive type that represents an integer value of arbitrary size. It is not limited to a particular bit-width. To represent bigInt values n is appended to a numeric literal e.g. 1n.

BigInt and Number values are not interchangable: bigInts cannot be used to represent floating-point numbers whereas number cannot be used to represent numeric values of any size. Hence, a type conversion must be performed before any operations between values of these types.

Boolean

The Boolean type represents a logical entity having two values - true and false.

String

The String type represents textual data and is encoded as a sequence of 16-bit unsigned integer values representing UTF-16 code units. Each element in the string occupies a position in the string which corresponds to a non-negative integer index.

Strings can be defined either by using quotes (' and " - there is no difference between single and double quotes) or by using template string literals (or backticks `).

String templates were introduced in ECMAScript 2015 and allow value interpolation:

console.log(`2 + 2 = ${2 + 2}`); // 2 + 2 = 4

JavaScript strings are immutable. This means that once a string is created, it is not possible to modify it. String methods create new strings based on the content of the current string.

null/undefined

The Null type has exactly one value, called null. Note that typeof null will return 'object' - that's a known bug that remains solely for backward compatibility reasons.

The Undefined type has exactly one value, called undefined. Any variable that has not been assigned a value has the value undefined.

Symbol

Symbol is a built-in object whose constructor returns a symbol primitive — a Symbol value or just a Symbol — that's guaranteed to be unique.

Symbols are often used to add unique property keys to an object that won't collide with keys any other code might add to the object, and which are hidden from any mechanisms other code will typically use to access the object.

Every Symbol() call is guaranteed to return a unique Symbol. Every Symbol.for("key") call will always return the same Symbol for a given value of "key". When Symbol.for("key") is called, if a Symbol with the given key can be found in the global Symbol registry, that Symbol is returned. Otherwise, a new Symbol is created, added to the global Symbol registry under the given key, and returned.

Object

Object is a collection of key-value pairs also called properties. Property keys can be values of either String or Symbol types - keys of any other type will be converted to strings according to these types' toString() method implementation.

Despite the fact that typeof (function(){}) returns 'function' - functions are actually objects but with the additional capability of being callable. Arrays are also objects.

Read more about objects: 5.1. Objects

Type Conversion

Conversion Rules

Number conversion rules:

• undefined gets converted to NaN.
• null gets converted to 0.
• true gets converted to 1, false gets converted to 0.
• String is parsed as if it contained a valid numeric literal. Parsing failure results in NaN. String is considered valid if:
  • It only has a valid binary, octal, decimal or hexadecimal numeric literal. (no numeric separators _ allowed)
  • It might have trailing or/and leading whitespace characters (any non-numeric characters in the middle are disallowed)
  • It Infinity literal. Both -Infinity and +Infinity are supported.
  • It is empty or contains only whitespace. The conversion results in 0 in these cases.
• BigInt throws TypeError to