Içando em JavaScript

Içar é um comportamento no qual declarações de variáveis ​​e funções são movidas (ou "içadas") para o topo de seu escopo contendo (tanto o escopo global quanto o escopo da função) antes o código é executado. Isso significa que você pode usar variáveis ​​e funções antes que elas sejam realmente declaradas no código.

Içando em Variáveis

var

• Variáveis ​​declaradas com var são elevadas ao topo de seu escopo, mas seus valores não são inicializados até o ponto do código onde a atribuição ocorre.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

deixe e const

• Variáveis ​​declaradas com let e const também são içadas, mas são colocadas em uma "zona morta temporal" até que suas declarações sejam alcançadas. Acessá-los antes de serem declarados resultará em um ReferenceError.

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

// block scope
{
  let x = 5;
}

console.log(x); // ReferenceError: x is not defined

Içamento em Funções

Função Tradicional

• As declarações de função são totalmente içadas, o que significa que tanto a declaração quanto o corpo da função são movidos para o topo do escopo. Isso permite chamar uma função antes de sua declaração no código.

sayHello(); // "Hello!"
function sayHello() {
  console.log("Hello!");
}

• Em contraste, expressões de função (onde uma função é atribuída a uma variável) são apenas içadas como variáveis, portanto, chamá-las antes de a variável ser inicializada resultará em indefinido ou em TypeError.

greet(); // TypeError: greet is not a function
var greet = function () {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Função de seta

• Em contraste, expressões de função (onde uma função é atribuída a uma variável) são apenas içadas como variáveis, portanto, chamá-las antes de a variável ser inicializada resultará em indefinido ou em TypeError.

greet(); // TypeError: greet is not a function
var greet = () => {
  console.log("Hi!");
};

greet(); // ReferenceError: Cannot access 'one' before initialization
let greet = function () {
  console.log("Hi!");
};

Zona Morta Temporal (TDZ)

A zona morta temporal (TDZ) existe para variáveis ​​declaradas usando let e const porque o JavaScript foi projetado para impedir que você acesse essas variáveis ​​antes que elas sejam declaradas e inicializadas.

Por que var e let, const se comportam de maneira diferente no içamento

• É por causa da evolução histórica do JavaScript.
• Inicialmente, o JavaScript foi projetado para usuários que não são desenvolvedores, e o principal uso do JavaScript era adicionar pequenos elementos interativos à página da web.
• Então var suporta apenas escopo funcional. Também naquela época, não havia escopo de bloco.
• Mas na evolução posterior do JavaScript, tornou-se mais complicado trabalhar com var e corrigir bugs.
• Portanto, para tornar o JavaScript competitivo com outras linguagens modernas, mais recursos foram adicionados, como let, const, funções de seta, métodos ES6, etc.

Por que var não é atualizado como let e const

• É por causa da compatibilidade com versões anteriores.
• Naquela época, o JavaScript era amplamente utilizado por muitas empresas, portanto, atualizar ou fazer alterações nos recursos existentes levaria à quebra da base de código.
• Portanto, recursos modernos foram adicionados individualmente.

Perguntas comuns da entrevista

• O que é içar em JavaScript?
• O que é içado em JavaScript e o que não é?
• Qual é a diferença entre var, let e const em relação ao içamento?
• O que é a zona morta temporal (TDZ) em JavaScript?
• Você pode explicar o içamento com declarações de função versus expressões de função?
• O que é içamento em módulos ES6?
• Por que devemos evitar depender de içamento em código do mundo real?

Resumo

• Elevar é o comportamento padrão em JavaScript onde declarações de variáveis ​​e funções são movidas para o topo de seus respectivos escopos durante a fase de compilação.
• O içamento funciona apenas para variáveis ​​declaradas com var e funções tradicionais, não para funções let, const e arrow.
• Apenas a declaração da função é içada, então as funções tradicionais funcionam, mas se a função for atribuída a uma variável, ela não poderá ser chamada até que seja definida.
• A razão pela qual as funções var e tradicionais são içadas, mas as funções let, const e arrow não, é porque no estágio inicial, o JavaScript era usado principalmente para pequenas interações de UI.
• Mas mais tarde, como o JavaScript foi amplamente utilizado para a construção de aplicações pelas empresas, tornou-se mais difícil corrigir bugs apenas com escopo global.
• Portanto, em atualizações futuras, questões mais seguras foram abordadas.
• Além disso, a atualização de recursos existentes quebraria as bases de código, portanto, novos recursos foram adicionados separadamente.