|
1 | | -# Episode 8 : let, const and temporal dead zone |
| 1 | +# Episode 8 : let, const, temporal dead zone, types of errors |
| 2 | + |
| 3 | +> let and const declarations are hoisted. But its different from var |
| 4 | +
|
| 5 | +``` |
| 6 | +
|
| 7 | +console.log(a); // ReferenceError: Cannot access 'a' before initialization |
| 8 | +console.log(b); // prints undefined as expected |
| 9 | +let a = 10; |
| 10 | +console.log(a); // 10 |
| 11 | +var b = 15; |
| 12 | +
|
| 13 | +``` |
| 14 | +It looks like let isn't hoisted, **but it is** |
| 15 | + |
| 16 | +- Both a and b are actually initialized as *undefined* in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory(script), where it can be |
| 17 | +accessed only after assigning some value to it first. |
| 18 | +- ie. one can access 'a' only if it is assigned. Thus, it throws error. |
| 19 | +- **Temporal Dead Zone** : Time since when the let variable was hoisted until it is initialized some value. |
| 20 | +- So any line till before "let a = 10" is the TDZ for a |
| 21 | +- Since a is not accessible on global, its not accessible in *window/this* also |
| 22 | +> window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere) |
| 23 | +
|
| 24 | +``` |
| 25 | +let a = 10; |
| 26 | +let a = 100; //this code is rejected upfront as SyntaxError. (duplicate declaration) |
| 27 | +------------------ |
| 28 | +let a = 10; |
| 29 | +var a = 100; // this code also rejected upfront as SyntaxError. |
| 30 | +(can't use same name in same scope) |
| 31 | +
|
| 32 | +``` |
| 33 | +Let is a stricter version of var. Now, **const** is even more stricter than let. |
| 34 | + |
| 35 | +-const holds all above properties of let. |
| 36 | + |
| 37 | +``` |
| 38 | +let a; |
| 39 | +a = 10; |
| 40 | +console.log(a) // prints 10 properly. Note declaration and assigning of a is in different lines. |
| 41 | +------------------ |
| 42 | +const b; |
| 43 | +b = 10; |
| 44 | +console.log(b); // SyntaxError: Missing initializer in const declaration. |
| 45 | +(This type of declaration won't work with const. const b = 10 only will work) |
| 46 | +------------------ |
| 47 | +const b = 100; |
| 48 | +b = 1000; |
| 49 | +//this gives us TypeError: Assignment to constant variable. |
| 50 | +
|
| 51 | +``` |
| 52 | +- Till now 3 types of errors have been covered: Syntax, Reference, and Type. |
| 53 | + |
| 54 | +* Uncaught ReferenceError: x is not defined at ... |
| 55 | + |
| 56 | + * This Error signifies that x has never been in the scope of the program. This literally means that x was never defined/declared and is being tried to be accesed. |
| 57 | + |
| 58 | +* Uncaught ReferenceError: cannot access 'a' before initialization |
| 59 | + |
| 60 | + * This Error signifies that 'a' cannot be accessed because it is declared as 'let' and since it is not assigned a value, it is its Temporal Dead Zone. Thus, this error occurs. |
| 61 | + |
| 62 | +* Uncaught SyntaxError: Identifier 'a' has already been declared |
| 63 | + |
| 64 | + * This Error signifies that we are redeclaring a variable that is 'let' declared. No execution will take place. |
| 65 | + |
| 66 | + ``` |
| 67 | + //code example 1.1 |
| 68 | + let a=10; |
| 69 | + let a=100; |
| 70 | + ``` |
| 71 | + ``` |
| 72 | + //code example 1.2 |
| 73 | + let a=10; |
| 74 | + var a=100; |
| 75 | + ``` |
| 76 | + |
| 77 | + Will throw this Syntax error and no code will be run and be rejected affront. |
| 78 | + 'let' is a strict form of declaration and thus can be done only once. |
| 79 | +* Uncaught SyntaxError: Missing initializer in const declaration |
| 80 | + * This Error signifies that we haven't initialized or assigned value to a const declaration. |
| 81 | + |
| 82 | +* Uncaught TypeError: Assignment to constant variable |
| 83 | + * This Error signifies that we are reassigning to a const variable. |
| 84 | + |
| 85 | + |
| 86 | +### Type Error: |
| 87 | + |
| 88 | +The Errors that occur due to conflicts with the declaration type. For example re-assigning const type declaration will throw this. |
| 89 | + |
| 90 | +### Syntax Error: |
| 91 | + |
| 92 | +The Errors that occur due to wrong syntax that doesn't match with JS Engine syntactical rules. |
| 93 | + |
| 94 | +For example, if const is not initialized, it will throw syntax error as by syntax, it must initialize if it sees a const declaration. |
| 95 | + |
| 96 | +Also, if variable that is assigned with 'let' declaration is tried to re-declared, then it throws Syntax Error. |
| 97 | + |
| 98 | +### Reference Error |
| 99 | + |
| 100 | +The Errors that occurs if no reference is available for access. Can occur when the variable is no where in scope or maybe it is in temporal dead zone. |
| 101 | + |
| 102 | + |
| 103 | +### SOME GOOD PRACTICES: |
| 104 | + |
| 105 | +* Try using const wherever possible. |
| 106 | +* If not, use let. |
| 107 | +* Avoid var. |
| 108 | +* Declare all variables with let at the top to avoid errors to shrink temporal dead zone to zero. |
| 109 | + |
| 110 | + |
2 | 111 |
|
3 | | -> let and const declarations are hoisted. |
|
0 commit comments