SCOPE IN JAVASCRIPT

When you visit a government building and you want to use the restroom; there are restrooms that are available (accessible) to everyone (both staff and non-staff), there are some accessible to the staff working in the building, and there are some to senior government officials ONLY. The hierarchy of these officials determines the restroom they have access to.
This basic example, explains how scope works in JavaScript. Basically, Scope is all about visibility and accessibility. It is the idea that where you defined a variable, determine if other pieces of your code, may have or may not have access to that variable.
In JavaScript, we have two types of scope

1. Global scope
2. Local scope

GLOBAL SCOPE
In JavaScript, variables that are declared outside of a function or block are global scope. These are variables that are accessible everywhere in our program. Using our restroom example to analyze this; the global scope can be alike to the public restroom that is accessible to everyone in the building.

let a = "Global scope";
let b = "JavaScript";
function globalScope() {
  console.log(a);
  console.log(b);
}

globalScope();
//Global scope: accessible everywhere in the program
//JavaScript: accessible everywhere in the program

LOCAL SCOPE
Every scope outside of the global scope is a local scope and in local scope we have;

1. Block scope
2. Function scope
3. Lexical scope

BLOCK SCOPE
In JavaScript, any code that is inside two curly braces {} is called a block of code. E.g conditional statement and loop. Any variables that are defined here are visible and accessible to that block of code ONLY. They are not accessible everywhere as the global scope are;

let a = "Global scope";
let b = "JavaScript";
if (true) {
  let c = "Block scope";
  console.log(a); //Global scope: accessible because of Global scope
  console.log(b); //JavaScript: accessible because of Global scope
  console.log(c); // Block scope: accesible because it is inside the block
}

console.log(a); //Global scope: accessible because of Global scope
console.log(b); //JavaScript: accessible because of Global scope
console.log(c); // Uncaught ReferenceError: c is not defined.

// c is not defined because we are assessing it outside of the block.

Using the previous example, let’s declare a variable with let, const and var (the 3 methods for declaring a variable) to check if any difference between them

if (true) {
  let a = 1;
  const b = 2;
  var c = 3;
  console.log(a); //1
  console.log(b); //2
  console.log(c); //3
}

console.log(a); //Uncaught ReferenceError: a is not defined
console.log(b); // Uncaught ReferenceError: b is not defined
console.log(c); //3

our c was accessible outside of the block scope, why? Because there is an exception when using var. if we use var to declare a variable inside of a block, you can be able to access it outside the block.
Var is not scope to block because you can be able to access it outside the block which is not what you will want in your program.

FUNCTION SCOPE
When you declare a variable inside of a function. It is called function scope. Let’s check some examples below;

let a = "Global scope";
let b = "JavaScript";

function globalScope() {
  let a = "Function scope";
  let b = "local scope";
  var c = 3;
  console.log(a); //Function Scope: this is a function scope, so it will print our value for **a** inside of our funciton
  console.log(b); //local scope: function scope also
  console.log(c); //3 function scope also
}

console.log(a); //Global scope: this is a global scope, accessible, everywhere in our program
console.log(b); //JavaScript: This is also accessible everywhere in our program
console.log(c); //Uncaught ReferenceError: c is not defined

console.log(c) will throw an error, because var is scope to function, but not scope to block ie we can't access our value of var declaration outside of our function.

Summary of the three variable declaration

1. Var: scoped to function but not scope to block
2. Let and const: scoped to both function and block scope.

LEXICAL SCOPE
Lexical scope refers to the fact that nested functions are bound to the scope of their parent function. This means that we can access a parent variable from the child variable i.e a variable declare in one function is visible to the nested functions within it.

function outer() {
  let sport = "football";
  function inner() {
    console.log(sport.toUpperCase());
  }
  inner();
}
outer();

//FOOTBALL

From the above example, we defined a parent function called outer and declare a variable, still inside the function we declared another function and console.log the value of the variable, making it upper case. It is possible because the inner function is lexically bound to the outer function, which means in a nested function, we can access the outer function from the inner function.
Let’s look at a different example;

function outer() {
  let sport = "football";
  function inner() {
    let sport = "tennis";
    console.log(sport.toUpperCase());
  }
  inner();
}
outer();
//TENNIS

Its output is TENNIS, how is that possible? Because when looking out at the inner function, It checks if there is a sport defined in the inner function, if YES? It prints it out and if NO, it looks out for the sport defined in the outer function. This is what we mean by lexically bound (nested functions are lexically bound to their outer function)

CONCLUSION
Scope is the idea that where you defined a variable, determine if other pieces of your code, may have or may not have access to that variable. We related it to the restroom in a government building.

Please feel free to follow me for more content, post your comment, and questions and also follow me on Twitter and Linkedln.