Scope~ Popular concepts ~

At the job interviews for JavaScript developers, two questions are almost always asked - the first one is about the this keyword (covered in the previous chapter), and the other one is about scope. I like to think that the scope is an environment that holds a specific set of variables, constants, functions, etc. And as part of that environment, all the actors inside are visible to each other. Understanding scope is important mainly because of that visibility. We have to know well what we can access and whatnot.

There are four scopes: global, function, block, and module. Let's illustrate each one of them with a quick example:

let total = 0;
function calculate(a, b, c) {
  const sum = a + b + c;
  if (a > b) {
    const diff = a - b;
    return diff + c;
  }
  return sum;
}

total lives in the global scope. Being part of that environment is accessible (visible) for all the nested environments (scopes). For example, we can use it from within the if statement. sum lives in the calculate function scope. It is not accessible outside that function. diff is defined in block scope and is not accessible outside the if statement. The module scope is the one that is usually defined by a file.

// A.js
let inc = 0;
export default function calculate(a, b, c) {
  inc += 1;
  return a + b + c;
}

// B.js
import calculate from './A.js';
console.log(calculate(1, 2, 3));

In this example, the code in file B.js doesn't have access to the inc variable defined in A.js file.