JS Scope
Scopes defenition
Nested scope
Shadowing
Hoisting
No block scope
Global Scope
Global Object
Global variables are evil
ES6 let and const
The locations where the variable is accessible.
A logical boundaries in which a variable (or expression) has its meaning.
var thanos;
// or
var window.thanos;
function protectEarth(){
var ironMan;
var thor;
var doctorStrange;
/*...*/
}
var a = 5;
function f(arg) { /*...*/ }
var g = function(arg) { /*...*/ };
window = { a: undefined, f: function, g: undefined }
window = { a: 5, f: function, g: function }
alert( a ); // undefined
var a = 5;
alert( a ); // error, a is not defined
a = 5;
(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;
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);
}
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();
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';
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();
un-predictable
non-reusable
naming collisions
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
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
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 apple = 42;
apple = 10; // error
const AVENGER = {
name: "Captain America"
};
AVENGER.name = "Hydra spy"; // ok
AVENGER = 42; // error