wk 3 Hoisting & closures - Sophievanderburg/blok-tech GitHub Wiki

πŸ“š Desk research: Hoisting & closures

πŸ” Hoisting

Before I start explaining hoisting, one thing is important. A variable contains of 2 things: a declaration and an initialization.
In the variable var greeting = "Hello", var greeting is the declaration & = "Hello" is the initialization.

Hoisting moves all declarations to the top of the current scope. This means that in Javascript, a variable can be used (in a function for example) before it has been declared.

Example 1

greeting = "Hello";

console.log(greeting) //This returns "Hello" in the console.

var greeting;

This works, because the declaration var greeting; is hoisted to the top of the scope (above greeting = "Hello";).

Example 2

console.log(greeting) //This returns undefined in the console.

var greeting = "Hello";

This wil not work, because only the declarations (var greeting) are hoisted and not the initializations (= "Hello";). So the value of greeting is undefined.

Const & let variables
With const & let variables, it does not work this way. These variables are hoisted in top of the code, but not initialized. So they can not be used until the variable is declared. If you use a let variable before it is declared, it will give you a Reference error. If you use a const variable before it is declare, it will give you a syntax error.

It is good to know what hoisting does. But if you want to avoid a lot of trouble, just place the code in the right order I think. πŸ˜„

πŸ” Closures

In JavaScript, a closure gives an inner function access to an outer function’s scope. This means that an inner function can use variables that are declared in the outer function. Closures are created every time a function is created, at function creation time.

An inner function has acces to three scopes:

  1. Its own scope
  2. The scope of the outer function
  3. The global scope

Example 1: Own scope

function sendGreeting() {
  function getGreeting() {
    var greeting = "Hello there";
    console.log(greeting)
  }
  getGreeting();
}
sendGreeting();

I think this one speaks for itself. πŸ˜„

Example 2: Outer function

function sendGreeting() {
  var greeting = "Hello there,";
  function makeGreeting() {
    console.log(greeting + " User!")
  }
  makeGreeting();
}
sendGreeting();

This also works, because inner functions have acces to variables that are declared in their outer function. So the function "makeGreeting" can use the variables in the function "sendGreeting".

Example 3: Global scope

var greeting = "Hello there,";

function sendGreeting() {
  function makeGreeting() {
    console.log(greeting + " User!")
  }
  makeGreeting();
}
sendGreeting();

This works, because inner functions have acces to the global scope. This means that the function "makeGreeting" can use all the variables that are not nested in any function (global variables). Of course, you should not use this code, but it explains closures. πŸ‘

Used sources