0

[JAVASCRIPT] Uso de variáveis Var e Let

H
Higor Santana

Antes de entender o uso de Var e Let, devemos entender o que é e como funciona os escopos. Existem no Javascript três tipos de escopos: Escopo global, escopo de função e escopo de bloco. (Vocês podem ver na capa do artigo)


Escopo global: Variáveis declaradas como "var" no escopo global podem ser usadas tanto no escopo de função quanto no escopo de bloco.

var variavelGlobal = 'Minha variável global';


function escopoFuncao() {
    
    // Var usada no escopo de função
    console.log(variavelGlobal)


    // Var usada no escopo de bloco
    if (true) {
        console.log(variavelGlobal)
    }

}


Escopo de função: Caso a variável seja declarada dentro de um escopo de função, ela estará disponivel apenas para o escopo de função e escopo de bloco dentro do escopo de função. Elas não sofrem o hosting, ou seja, não são elevadas para o nivel global.

// var global
var variavel = 'Minha variável';


function escopoFuncao() {
    
    // var no escopo de função
    // alterada
    var variavel = 'Minha variavel de escopo'
    console.log('Escopo de Função: ' + variavel)


    // Var no escopo de bloco
    // alterada
    if (true) {
    console.log('Escopo de bloco dentro do escopo de função: ' + variavel)
    }
}


escopoFuncao()
// Não alterada, pois, a alteração não foi feita no escopo global
console.log('Global: ' + variavel)


escopoFuncao()
console.log('Global: ' + variavel)

Saída:

Escopo de Função: Minha variavel de escopo
Escopo de bloco dentro do escopo de função: Minha variavel de escopo
Global: Minha variável


Escopo de bloco: Se você declarar variáveis fazendo o uso de var, elas sofrem elevação (hosting). Ela estando dentro de uma escopo de bloco, ela se elevará para um escopo global, como também para um escopo de função.

function escopoFuncao() {
    // var sendo chamada
    console.log('Escopo de Função: ' + variavelEscopoBloco)
}

// Var declarada dentro de um escopo de bloco
if (true) {
    var variavelEscopoBloco = 'Minha variavel no Escopo de bloco'
    console.log('Bloco: ' + variavelEscopoBloco)
}

// obrigatoriamente a função deve ser chamada
// pois, o escopo bloco foi criado
// depois da criação da função
escopoFuncao()

// var sendo chamada globalmente
// neste momento ela sofreu elevação para o global
console.log('Global: ' + variavelEscopoBloco)

Saída:

Bloco: Minha variavel no Escopo de bloco
Escopo de Função: Minha variavel no Escopo de bloco
Global: Minha variavel no Escopo de bloco


Obs: Se a var tivesse sido declarada dentro de um escopo de bloco e esse escopo de bloco estivesse dentro de um escopo de função, ela seria elevada apenas para o escopo de função.


O uso do "let" faz com que a variável preserve o escopo em que foi criada. Variáveis criadas com "var" sofrem hosting, ou seja, são elevadas para o bloco superior, e isso não acontece com o uso do "let".

Caso a variável com o uso do let seja criada em um escopo de bloco, e for chamada em um escopo global, gerará um erro. Veja:

// Escopo de bloco
if (true) {
    // let declarada em um escopo de bloco
    let variavel = 'Variável let em um bloco'
    console.log('Bloco: ' + variavel)
}

// chamando o let em um escopo global
console.log('Global: ' + variavel)

Saída:

Bloco: Variável let em um bloco
Uncaught ReferenceError: variavel is not defined


A diferença entre let e var, é a preservação de escopo.

O var por muitas vezes pode acabar dando conflito no seu codigo, pela sua falta de atenção talvez, você pode acabar declarando um var dentro de um escopo de bloco, e esse bloco se eleva, assim, podendo causar um conflito.

Já com o uso do let isso não ocorre, pois ele não tem a capacidade de hosting (elevação).

0
0

Comentários (0)

None

Brasil