Day 13 — Execution context & hoisting

Lesson

Topic 1 Part 1
console.log(a);        
var a = 1;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 2 console.log(b);
//console.log(b);        
//let b = 2;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 3 console.log(c);
// console.log(c);       
// const c = 3;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 4 Part 4
greet();              
function greet() { console.log("Hi"); }

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 5 Part 5
// console.log(score);    // undefined            ← no error, but probably not what you wanted
// var score = 90;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 6 let — TDZ catches the bug for you
// let — TDZ catches the bug for you
// console.log(level);    // ReferenceError       ← TDZ — Cannot access 'level' before initialization
// let level = 5;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 7 The TDZ "ends" exactly when the let/const line runs:
// The TDZ "ends" exactly when the let/const line runs:
{
  // <-- start of block. 'mark' is in TDZ here
  // console.log(mark);  // would throw
  let mark = 87;
  console.log(mark);    // 87  ← TDZ has ended, mark is initialised
}

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 8 Function declaration — works BEFORE its definition
// Function declaration — works BEFORE its definition
sayHi();           // "Hi"      ← full body hoisted
function sayHi() {
  console.log("Hi");
}

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 9 Function expression with var — TypeError
// Function expression with var — TypeError
// greet1();           // TypeError: greet is not a function
//                    //   ↑ greet was hoisted with value 'undefined'.
//                    //     Calling undefined() throws TypeError.
// var greet1 = function () {
//   console.log("Hello");
// };

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 10 Function expression with const — ReferenceError (TDZ)
// Function expression with const — ReferenceError (TDZ)
// welcome();         // ReferenceError: Cannot access 'welcome' before initialization
// const welcome = function () {
//   console.log("Welcome");
// };

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 11 Arrow function — same as const above (always TDZ if let/const)
// Arrow function — same as const above (always TDZ if let/const)
const shout = () => console.log("HEY");
shout();           // ReferenceError

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 12 Part 12
let item = "Laptop"
const price = 60000;
const tax = 0.18;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 13 Part 13
const singleLine = `The ${item} costs ${price} + ${price * tax} GST = ${price + (price * tax)}`;

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.

Section 14 Part 14
const multiline = `
The ${item} costs:
Base Price: ${price}
GST 18%: ${price * tax}
Total: ${price + (price * tax)}
`;
console.log(singleLine)
console.log(multiline);

Code below mirrors ../js/lesson.js. Open DevTools → Console to see output when the script runs.