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.