JS/TSVanilla JavaScript

Hoisting

  1. Determine the type of variable

    1. typeof operator. Used to determine whether a variable is a primitive type or an object type.

      1
      console.log(typeof(a))

    2. instanceof operator: Mainly used to detect whether an object is an instance of a certain constructor.

      1
      2
      (new Array()) instanceof Array // true
      (new Date()) instanceof Date // true

    3. constructor property: You can determine the type of an object by accessing its constructor property.

      1
      2
      (new Array()) instanceof Array // true
      (new Date()) instanceof Date // true

    4. Null and Undefined checks: You can compare directly with null and undefined to determine whether a variable is null or undefined.

      1
      2
      if (variable === null) { /* ... */ }
      if (typeof variable === "undefined") { /* ... */ }

    5. User-defined type check

    In some cases, it may be necessary to implement your own type checking logic, especially if you are using custom objects or classes.


  2. if else statement

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    if (condition) {
        // Code to be executed when the condition is true
    } else {
        // Code to be executed when the condition is false
    }
       
    if (condition 1) {
        //Code to be executed when condition 1 is true
    } else if (condition 2) {
        // Code executed when condition 1 is false but condition 2 is true
    } else {
        // Code executed when condition 1 and condition 2 are both false
    }

    1. If the conditions of multiple if...else if...else statements are true, only the code block with the first true condition will be executed.

    2. You can use as many else if statements as you like, but there can be only one else statement, and it should always be last.


  3. Hoisting of variables

    When you use var to declare variables in JavaScript (especially in ES5 and earlier), you encounter a phenomenon called hoisting.

    Variable hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope.

    Consider the following code:

    1
    2
    3
    console.log(myVar); // Output: undefined
    var myVar = 5;
    console.log(myVar); // Output: 5

    Although the variable myVar is declared and initialized both before and after it is referenced, due to variable hoisting, the above code is actually interpreted as:

    1
    2
    3
    4
    var myVar; // promoted variable declaration
    console.log(myVar); // Output: undefined
    myVar = 5; // initialization
    console.log(myVar); // Output: 5

    Note that only the declaration is hoisted, the initialization remains in place.


  4. Hoisting of functions

    Function declarations are also hoisted, but this behaves slightly differently than variable hoisting. Both the function’s declaration and its body are hoisted. For example:

    1
    2
    3
    4
    console.log(foo()); // Output: Hello!
    function foo() {
        return "Hello!";
    }

    However, if you create a function using variable assignment, then only the declaration will be hoisted, not the assignment:

    1
    2
    3
    4
    5
    console.log(foo); // Output: undefined
    console.log(foo()); // TypeError: foo is not a function
    var foo = function() {
        return "Hello!";
    };

    To avoid potential confusion and errors caused by hoisting, it is recommended to always declare a variable or function before using it.


  5. let and const

    let and const introduced after ES6 (ES2015) also have hoisting behavior, but unlike var they are hoisted to the top of the block rather than the top of the function or global context. However, accessing these variables before their hoisted declaration will result in a ReferenceError because they have not actually been initialized. This zone is called the Temporal Dead Zone (TDZ).

    1
    2
    console.log(a); // ReferenceError
    let a = 5;

  6. Multiple Declarations

    If you declare the same variable multiple times in the same scope, var will not cause a problem, but using let or const to declare the same variable multiple times will cause an error.

    1
    2
    3
    4
    5
    var x = 5;
    var x = 10; // no problem
       
    let y = 5;
    let y = 10; // SyntaxError

  7. Hoisting is performed during the compilation phase

    Before JavaScript code is executed, it goes through the compilation phase, and promotion is completed at this stage. In this process, the JS engine first reads and promotes all declarations before executing the code.


Share