JS Scope

Avengerda

Scopes defenition
Nested scope
Shadowing
Hoisting
No block scope
Global Scope
Global Object
Global variables are evil
ES6 let and const

Scopes definition

The locations where the variable is accessible.

A logical boundaries in which a variable (or expression) has its meaning.

Scope

Global

Local

window
global

var thanos;
// or
var window.thanos;

function protectEarth(){
    var ironMan;
    var thor;
    var doctorStrange;
    /*...*/
}

Object
Function

1. Initialization

2. Executing

var a = 5;

function f(arg) { /*...*/ }

var g = function(arg) { /*...*/ };

window = { a: undefined, f: function, g: undefined }

window = { a: 5, f: function, g: function }

a =42;

alert( a ); // undefined

var a = 5;

alert( a ); // error, a is not defined

a = 5;

would work, but

for, while, if

(up to ES2015 aka ES6)

function iDontFeelSoGood() {
    var ironMan = 'Mr Stark';
    if(/*...*/){
        var spiderMan = 'Peter Parker';
        console.log(ironMan + ' I dont feel so good');
    }
    console.log(spiderMan); // undefined or Peter Parker ???
}

var i = 10;

for (var i = 0; i < 20; i++) {
  /*...*/
}

var i = 5;

var i;

i = 10;

for (i = 0; i < 20; i++) {
  /*...*/
}

i = 5;

Nested Scope

var bruceBanner = 'Hulk';

function saySomething() {
  console.log( bruceBanner + ',smash!' );
}

function calculate(a, b) {
    var c = 2;

    function multiply(num){
        return num * c;
    }

    return multiply(a) + multiply(b);
}

Scope's shadowing

var loki = 'loki';

function space() {
  var loki = 'god';

  function planet() {
    var loki = 'cat';

    console.log(loki);
  }

  planet();
}

space();

var loki = 'loki';

function space() {
  var loki = 'god';

  function planet() {

    console.log(loki);
  }

  planet();
}

space();

var loki = 'loki';

function space() {

  function planet() {

    console.log(loki);
  }

  planet();
}

space();

Hoisting

all variables' and functions are moved (hoisted) to the top of their direct scope

function saySomething() {
  console.log( bruceBanner + ',smash!' );
}

var bruceBanner = 'Hulk';

var bruceBanner; // undefined

function saySomething() {
  console.log( bruceBanner + ',smash!' );
}

bruceBanner = 'Hulk';

function saySomething() {
  console.log( bruceBanner + ',smash!' ); // undefined, smash!
}

var bruceBanner = 'Hulk';

Hoisting issue

var loki = 'god';

function whoAmI() {

  console.log(loki);

  var loki = 'human';

  console.log(loki);
}

whoAmI();

var loki = 'god';

function whoAmI() {
  var loki;

  console.log(loki); // undefined

  loki = 'human';

  console.log(loki);// human
}

whoAmI();

Boo, I'm global variable

un-predictable
non-reusable
naming collisions

Let & Const

Block scope

var StanLee = 42;

if (true) {
  var StanLee = 10;

  alert(StanLee); // 10
}

alert(StanLee); // 10

let StanLee = 42;

if (true) {
  let StanLee = 10;

  alert(StanLee); // 10
}

alert(StanLee); // 42

Let is visible only after declaration

alert(a); // undefined

var a = 5;

alert(a); // error

let a = 5;

var a = 5;
var a = 20;

console.log(a); //20

let a = 5;
let a = 20; //error

console.log(a); //20

Separate Let for each iteration

for(let i = 0; i<10; i++) { /* … */ }

alert(i); // error

for(var i=0; i<10; i++) { /* … */ }

alert(i); // 10

function makeChitauriArmy() {

  let aliens = [];

  for (let i = 0; i < 10; i++) {
    aliens.push(function() {
      alert( i );
    });
  }

  return aliens;
}

var army = makeChitauriArmy();

army[0](); // 0
army[5](); // 5

function makeChitauriArmy() {

  let aliens = [];

  for (var i = 0; i < 10; i++) {
    aliens.push(function() {
      alert( i );
    });
  }

  return aliens;
}

var army = makeChitauriArmy();

army[0]();
army[5]();

Const

const apple = 42;
apple = 10; // error

const AVENGER = {
  name: "Captain America"
};

AVENGER.name = "Hydra spy"; // ok
AVENGER = 42; // error

javascript-visualizer

JS SCOPE

By Victoria Budyonnaya