Note: You can ask students to explain a concept or summerise the last lecture themselves

Scopes define the visiblity of declarations of variables and functions.

The top level outside all your functions is called the _global scope_. Values defined in the global scope are accessible from everywhere in the code. Whereas, variables defined in local scope can only be accessed and altered inside the scope they were created.

- `var` and `function` declarations are visible with function scope.

- `let` and `const` declarations are visible with block scope. A block can be seen as a set of statements enclosed in curly brackets({}).

Global scope:

- Can be a real useful tool or a nightmare.

- Useful in scenarios where we want to export JS modules, use third party libraries like jQuery etc.

- Big risk of causing namespace clashes with multiple variables with same name being created in different places.

Local Scope:

- Think of local scope as any new scope that is created within the global scope.

- Each function written in JavaScript creates a new local scope.

- Variables defined within a function aren't available outside it. They are created when a function starts and are _in a way_ destroyed/hidden when a function ends.


let villan = "Joker"; // | global scope

// |

function myFunction() { // | | function scope

let hero = "Batman"; // | |

if (hero === "Batman") { // | | | block scope

let coHero = "Robin"; // | | |

console.log(hero); // | | |

console.log(coHero); // | | |

console.log(villan); // | | |

} // | | |

console.log("------") // | |

console.log(hero); // | |

console.log(coHero); // | |

console.log(villan); // | |

} // | |

// |

myFunction(); // |

And the same link as Explanation

What happens if we use the same variable name in different scopes?

function myFunction() {

let hero = "Batman";

if (true) {

let hero = "The Flash";

console.log(hero);

}

console.log(hero);

}

myFunction();

Same link as Explanation