Ninjas do Front

E os segredos da trindade

JavaScript

Escopo

var escopoGlobal;
function foo() {
    var escopoDeFuncao;
}

ES5

let escopoGlobal; // let ou var
function foo() {
    let escopoDeFuncao; // let ou var
    if (true) { // if, for, while
        let escopoDeBloco;
    }
}

ES6

JavaScript

Escopo - Hoisting

ES5

ES6

// equivale à:
var x;
x = 1;
x; // 1
// var hoisteia
x = 1;
var x;
x; // 1

ES5

// let não hoisteia
x = 1; // erro, TDZ
let x;
x;

Nota: Traceur 0.0.66 ainda não implementa TDZ

JavaScript

Escopo - redeclaração

var x = 1;
var x;
x; // 1

ES5

let x = 1;
let x; // erro, já declarado
x;

ES6

JavaScript

Escopo - for(let ...)

ES5

ES6

// equivale à:
var i;
for (i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}
// saída: 3, 3, 3


for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}
// saída: 3, 3, 3

ES5



for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 0);
}
// saída: 0, 1, 2

JavaScript

Escopo - shadowing

var x = 'global';
function fun() {
    var x = 'local';
    x; // 'local'
}
fun();
x; // 'global'

ES5 e 6

JavaScript

Escopo - hoisting + shadowing

var x = 'global';
function fun() {
    x; // undefined
    var x = 'local';
    x; // 'local'
}
fun();

ES5

let x = 'global';
function fun() {
    x; // erro, TDZ
    let x = 'local';
    x;
}
fun();

ES6

Ninjas do Front e os Segredos da Trindade #2

By Fabrício Matté

Ninjas do Front e os Segredos da Trindade #2

#SASPI5 minicurso ministrado por @Ult_Combo e @_jotavejv

  • 1,092