Em resumo, segundo a MDN, Hoisting é o processo de elevar declarações de variáveis, funções e classes para o topo de seu escopo. Essa funcionalidade foi introduzida no ES6 com a finalidade de permitir que esses recursos possam ser acessados de forma segura antes de sua declaração.

Em resumo, segundo a MDN, Hoisting é o processo de elevar declarações de variáveis, funções e classes para o topo de seu escopo. Essa funcionalidade foi introduzida no ES6 com a finalidade de permitir que esses recursos possam ser acessados de forma segura antes de sua declaração.É graças à essa funcionalidade que o seguinte código funciona:<pre>console.log(age);

var age = 20;</pre>Se as declarações não fossem elevadas, o seguinte código emitiria um erro: Uncaught ReferenceError: age is not defined.Voltando ao exemplo acima, um detalhe importante à se destacar é que o JavaScript aplica Hoisting apenas às declarações, ou seja, o valor de inicialização não é considerado, logo o resultado do console.log do exemplo acima é o seguinte:<pre>console.log(age); // undefined

var age = 20;</pre>Vamos observar o antes e depois do processo de hoisting de um outro exemplo:<pre>var name = &#39;giga&#39;;

console.log(name);</pre>Após o Hoisting teremos a seguinte sequência: Declaração, atribuição e a execução do console.log:<pre>var name; 
name = &#39;giga&#39;; 

console.log(name); </pre><h2>Hoisting de variáveis</h2>Observamos como o processo de Hoisting funciona com var, porém se tentarmos algo semelhante utilizando const ou let notaremos um comportamento diferente:<pre>console.log(name); // ReferenceError: name is not defined

let name = &#39;giga&#39;;</pre>Assim como variáveis declaradas com var, os demais tipos (const e let) também sofrem o processo de Hoisting, porém, diferente do que acontece quando utilizamos var, as variáveis não são inicializadas com um valor padrão (undefined no caso do var). Então, apesar da declaração ser movida para o topo do escopo, um erro será lançado caso a variável seja lida antes de sua inicialização.Ou seja, nesses casos, a variável só poderá ser utilizada após sua declaração. O espaço em que a variável está indisponível (Inicio do bloco até a sua inicialização) é chamada de Temporal Dead Zone (TDZ).<pre>console.log(name); // ReferenceError: name is not defined

let name = &#39;giga&#39;; // Final da TDZ</pre><h2>Hoisting de funções</h2>O processo de Hoisting também se aplica à declaração de funções, ou seja, é possível utilizar funções antes mesmo de declará-las:<pre>console.log(sum(1, 1)); // 2

function sum(num1, num2) {
 return num1 + num2;
}</pre>Um ponto importante é que function expressions não sofrem Hoisting, o que significa que não é possível utilizar uma função anônima antes de sua declaração:<pre>console.log(sum(1, 2)); // ReferenceError: sum is not defined

const sum = (num1, num2) =&gt; num1 + num2;</pre>Nesse caso, o hoisting é aplicado à const sum e, como vimos, apesar de sofrerem Hoisting, elas só ficam disponíveis depois de sua inicialização. As regras que abordamos para var e let também se aplicam nesse cenário:<pre>console.log(sum(1, 2)); // ReferenceError: sum is not defined

let sum = (num1, num2) =&gt; num1 + num2;

// -------------------

console.log(sum(1, 2)); // TypeError: sum is not a function

var sum = (num1, num2) =&gt; num1 + num2;</pre><h2>Hoisting de classes</h2>No JavaScript, declarações de classes também sofrem Hoisting, porém, assim como variáveis let e const, elas não são inicializadas por padrão, o que significa que uma classe não poderá ser utilizada até ser inicializada e, como no tópico acima, class expressions não sofrem Hoisting.<pre>const dog = new Dog(&#39;Cão&#39;); // ReferenceError: Dog is not defined

class Dog {
 constructor (name) {
 this.name = name
 }
}</pre><h2>Referências</h2><a href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting" target="undefined" rel="noopener noreferrer">MDN Web Docs - Hoisting</a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz" target="undefined" rel="noopener noreferrer">MDN Web Docs - Temporal Dead Zone</a>

O que é Hoisting no JavaScript?

Fala, gente! Tudo certo? Recentemente me lembrei de uma situação onde, por um deslize, fiquei horas e horas batendo cabeça. Depois de rever as mesmas linhas milhares de vezes, percebi que se tratava de um erro bem bobinho: passar valores por referência. Na verdade, passar valores por referência não é um problema ou um erro, mas não entender o que isso significa, é. Hoje entenderemos a diferença de valor e referência no JavaScript, e veremos alguns cuidados que devemos tomar.

Fala, gente! Tudo certo? Recentemente me lembrei de uma situação onde, por um deslize, fiquei horas e horas batendo cabeça. Depois de rever as mesmas linhas milhares de vezes, percebi que se tratava de um erro bem bobinho: passar valores por referência. Na verdade, passar valores por referência não é um problema ou um erro, mas não entender o que isso significa, é. Hoje entenderemos a diferença de valor e referência no JavaScript, e veremos alguns cuidados que devemos tomar.Perguntinha rápida: qual a saída do console.log do código abaixo?<pre>var x = 1;

function change(j) {
 j = 2;
}

change(x);
console.log(x);</pre>Se você pensou em 1, parabéns! Resposta correta.Agora que você se provou ser um verdadeiro mestre, aí vai outra: o que deve ser exibido pelo console.log abaixo?<pre>var x = [1, 2, 3];

function change(j) {
 j.push(4);
}

change(x);
console.log(x);</pre>Desta vez, o valor da variável x realmente é modificado. Mas, por quê? Dois comportamentos diferentes para a mesma coisa? Não exatamente. O que aconteceu no primeiro exemplo é que a variável foi passada por valor, enquanto, no segundo, por referência.<img src="https://images.prismic.io/blog-gabriel-gigante/905df58c-bf0b-4c52-8d68-71a2dc2cafb0_pass-by-reference-vs-pass-by-value-animation.gif?auto=compress,format" alt="Passar por referência vs passar por valor" /><h2>Tipos primitivos e objetos</h2>Para entender o que de fato acontece, é necessário saber que o JavaScript possui dois tipos de dados: primitivos e objetos.Os primitivos são tipos de dados que não são representados por objetos, ou seja, não possuem métodos. Já um objeto é definido por uma coleção de propriedades que são definidas por associações entre uma chave e um valor. Observe os exemplos abaixo:<pre>// Primitivos (number, boolean, string, null, undefined)
var age = 20;
var isEven = true;
var name = &quot;Joãozinho&quot;;
var nullValue = null;
var undefinedValue = undefined;

// Objetos (objetos, arrays, funções)
var car = {
 name: &#39;marea turbo&#39;,
 color: &#39;black&#39;,
 wheels: 4,
 doors: 4,
 category: &#39;sedan&#39;,
};
var oddNumbers = [1, 3, 5, 7, 9];
var sum = (a + b) =&gt; a + b;</pre><h2>Valor</h2>Passar por valor significa criar uma cópia do valor de uma variável no momento de uma atribuição (Através do operador =). Isso quer dizer que apenas valores serão salvos nos endereços de memória. Para visualizar isso, vamos declarar algumas variáveis em endereços fictícios na memória:<pre>var x = 10; // valor: 10 endereço: #1
var y = x; // valor: 10 endereço: #2</pre>O que acontece acima é que, ao atribuir x a y, uma cópia do valor de x é salvo no endereço da memória da variável y. Isso significa que alterações na variável x não impactam na variável y e vice-versa, porque cada uma tem seu próprio endereço na memória.<img src="https://images.prismic.io/blog-gabriel-gigante/cd877cfe-5319-4c5c-89ba-0da5a12f60d7_separated-var-address.png?auto=compress,format" alt="Variáveis alocadas na memória" />Vamos revisitar o primeiro exemplo:<pre>var x = 1;

function change(j) {
 j = 2;

 console.log(&#39;j = &#39;, j); // j = 2
}

change(x); // o valor de x é passado para dentro da função
console.log(&#39;x = &#39;, x); // x = 1</pre>Acima, observamos que x foi passado como valor para a função change, ou seja, ao atribuir o valor 2 ao argumento recebido dentro da função (j), o valor de x não é modificado, mas sim o valor de j, que existe apenas dentro do escopo da função.Essa dinâmica acontece com qualquer valor que seja do tipo primitivo.<h2>Referência</h2>Já passar por referência significa o oposto. Neste caso, o que é atribuído não é o valor, mas sim uma referência a esse valor. Então, se duas variáveis possuem a mesma referência, alterações em qualquer uma delas, significa que haverá alteração em ambas. No JavaScript, objetos são sempre passados por referência.Objetos são alocados na memória de um modo diferente dos tipos primitivos. Ao declarar um objeto, o que é alocado em um endereço de memória é uma referência a esse valor, e não o valor propriamente dito.<pre>var x = [1, 2, 3]; // valor: #0 endereço: #1 conteúdo: [1, 2, 3]
var y = x; // valor: #0 endereço: #2 conteúdo: [1, 2, 3]</pre><img src="https://images.prismic.io/blog-gabriel-gigante/8073a8cb-ef81-46b7-8f51-06fbbc286cf7_vars-with-same-reference.png?auto=compress,format" alt="Variáveis com mesma referência" />No exemplo acima observamos variáveis que possuem a mesma referência a um valor. Veja o que acontece ao alterar o valor de uma das variáveis:<pre>var x = [1, 2, 3];
var y = x;

y.push(4);

console.log({ x, y }); // { x: [1, 2, 3, 4], y: [1, 2, 3, 4] }</pre>Se revisitarmos o segundo exemplo desse post, veremos isso acontecendo:<pre>var x = [1, 2, 3];

function change(j) { 
 j.push(4); // O valor atrelado à referência é modificado

 console.log(&#39;j = &#39;, j); // j = [1, 2, 3, 4]
}

change(x); // a referência ao valor contido em x é passado para dentro da função
console.log(&#39;x = &#39;, x); // x = [1, 2, 3, 4]</pre>Não seria JavaScript se não tivesse mais uma pegadinha... O que deve ser exibido nos console.log abaixo?<pre>var x = [1, 2, 3];

function change(j) {
 j = [1, 2];

 console.log(&#39;j = &#39;, j);
}

change(x);
console.log(&#39;x = &#39;, x);</pre>Se você pensou que o valor de x seria [1, 2], você errou. Segue os valores de j e x impressos no console:<ul><li>J = [1, 2];</li><li>X = [1, 2, 3];</li></ul><img src="https://images.prismic.io/blog-gabriel-gigante/91370f76-6aae-48c9-8756-c08afc20499b_think-smash.gif?auto=compress,format" alt="Mind blowing" />Para entendermos o que houve, basta prestar um pouco mais de atenção na primeira linha da função change. Lá, o valor de j, que é uma referência ao conteúdo presente em x ([1, 2, 3]), não é modificado. O que de fato acontece é que um novo objeto é declarado ([1, 2]) e associado à variável j, que só existe no escopo da função. Então, o valor de j passa a ser uma referência ao valor [1, 2], deixando a referência que carrega o valor [1, 2, 3] intacta.<pre>var x = [1, 2, 3];

function change(j) {
 j = [1, 2]; // um novo objeto é criado e uma referência de seu valor é atribuído à variável j

 console.log(&#39;j = &#39;, j); // [1, 2]
}

change(x); // a referência ao valor contido em x é passado para dentro da função
console.log(&#39;x = &#39;, x); // x = [1, 2, 3]</pre><h2>Clonar valores sem mutar</h2>Com tipos primitivos não precisamos nos preocupar, porque, como vimos, atribuições com tipos primitivos são feitas por valor, e não referência. Por outro lado, com os objetos, devemos tomar cuidado ao realizar atribuições, de modo que não causem efeitos colaterais não desejados.Para atribuir o valor de uma variável para outra sem que elas tenham a mesma referência, como já observamos, devemos criar um novo objeto, e então atribuí-lo à variável. Para fazer isso, existem alguns caminhos:<pre>var x = [1, 2, 3];
var y = [...x]; // copiar array utilizando sintaxe de espalhamento (spread operator)
var z = [].concat(x); // copiar array utilizando concat (Array.prototype.concat())

y.push(4);
z.push(4);

console.log({ x, y, z }); // { x: [1, 2, 3], y: [1, 2, 3, 4], z: [1, 2, 3, 4] }</pre>No exemplo acima, copiamos o valor da variável x nas variáveis y e z, de modo que as alterações nelas não causem efeitos colaterais, pois cada uma possui como valor a referência para um objeto diferente. Também é possível utilizar essa estratégia com objetos:<pre>var x = { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; };
var y = {...x}; // copiar objeto utilizando sintaxe de espalhamento (spread operator)
var z = Object.assign({}, x); // copiar array utilizando assign

y.lastName = &#39;Silva&#39;;
z.lastName = &#39;Silva&#39;;

console.log({ x, y, z }); // { x: { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; }, y: { name: &#39;Gabriel&#39;, lastName: &#39;Silva&#39; }, z: { name: &#39;Gabriel&#39;, lastName: &#39;Silva&#39; } }</pre>Apesar dos exemplos acima funcionarem muito bem para muitos casos, essa estratégia não serve para todos os casos. Tente encontrar um problema no exemplo abaixo:<pre>var x = [1, 2, [1, 2, 3], { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; }];
var y = {
 name: &#39;Gabriel&#39;,
 lastName: &#39;Gigante&#39;,
 techs: [&#39;JavaScript&#39;, &#39;TypeScript&#39;],
 social: {
 github: &#39;gagigante&#39;,
 linkedIn: &#39;gagigante&#39;,
 }
};

var a = [...x];
var b = {...y};

a[2].push(4);
a[3].lastName = &#39;Silva&#39;;

b.techs.push(&#39;React&#39;);
b.social.github = &#39;blablabla&#39;;</pre>E aí? Conseguiu identificar algum erro no código acima? Há um grande problema nele e, para observar isso, vamos complementar o exemplo com alguns console.log.<pre>var x = [1, 2, [1, 2, 3], { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; }];
var y = {
 name: &#39;Gabriel&#39;,
 lastName: &#39;Gigante&#39;,
 techs: [&#39;JavaScript&#39;, &#39;TypeScript&#39;],
 social: {
 github: &#39;gagigante&#39;,
 linkedIn: &#39;gagigante&#39;,
 }
};

var a = [...x];
var b = {...y};

a[2].push(4);
a[3].lastName = &#39;Silva&#39;;

b.techs.push(&#39;React&#39;);
b.social.github = &#39;blablabla&#39;;

console.log({ x, a, y, b });</pre>Clonamos as variáveis x e y, que são objetos (Array e Objeto, respectivamente), portanto passados por referência, utilizando o spread operator. Segundo o que vimos, alterações em qualquer uma dessas variáveis não deveriam causar efeitos colaterais, pois cada uma tem uma referência diferente, certo...? Errado!Existe uma sutil diferença desses objetos para os demais utilizados nos exemplos anteriores. Esses objetos possuem dentro de si outros objetos e, já que são objetos, são passados por referência 🤯.<pre>var x = [1, 2, [1, 2, 3], { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; }];
var y = {
 name: &#39;Gabriel&#39;,
 lastName: &#39;Gigante&#39;,
 techs: [&#39;JavaScript&#39;, &#39;TypeScript&#39;],
 social: {
 github: &#39;gagigante&#39;,
 linkedIn: &#39;gagigante&#39;,
 }
};

var a = [...x]; // cria um novo array com todos os dados de x e atribui à variável a, porém os dois últimos elementos, por serem objetos, são passados por referência
var b = {...y}; // cria um novo objeto com todos os dados de y e atribui à variável b, porém os atributos techs e social, por serem objetos, são passados por referência

a[2].push(4); // modifica um array (tipo não primitivo) que é referenciado por duas variáveis (x e a) e, portanto, causa alterações em ambas
a[3].lastName = &#39;Silva&#39;; // modifica um objeto (tipo não primitivo) que é referenciado por duas variáveis (x e a) e, portanto, causa alterações em ambas

b.techs.push(&#39;React&#39;); // modifica um array (tipo não primitivo) que é referenciado por duas variáveis (y e b) e, portanto, causa alterações em ambas
b.social.github = &#39;blablabla&#39;; // modifica um objeto (tipo não primitivo) que é referenciado por duas variáveis (y e b) e, portanto, causa alterações em ambas

console.log({ x, a, y, b });
/**
 * { 
 * x: [ 1, 2, [ 1, 2, 3, 4 ], { name: &#39;Gabriel&#39;, lastName: &#39;Silva&#39; } ],
 * a: [ 1, 2, [ 1, 2, 3, 4 ], { name: &#39;Gabriel&#39;, lastName: &#39;Silva&#39; } ],
 * y: {
 * name: &#39;Gabriel&#39;,
 * lastName: &#39;Gigante&#39;,
 * techs: [ &#39;JavaScript&#39;, &#39;TypeScript&#39;, &#39;React&#39; ],
 * social: { github: &#39;blablabla&#39;, linkedIn: &#39;gagigante&#39; }
 * },
 * b: {
 * name: &#39;Gabriel&#39;,
 * lastName: &#39;Gigante&#39;,
 * techs: [ &#39;JavaScript&#39;, &#39;TypeScript&#39;, &#39;React&#39; ],
 * social: { github: &#39;blablabla&#39;, linkedIn: &#39;gagigante&#39; }
 * },
 * }
 */</pre>Com isso podemos ver que clonar objetos que possuem sub objetos pode causar problemas, porque no caso desses sub objetos, não são criados novos objetos; a referência do mesmo objeto é passada.Isso é o que chamamos de shallow clonning (clonagem rasa), o que significa que apenas o objeto principal está sendo verdadeiramente clonado. Para fazer uma verdadeira cópia dessas variáveis, será necessário fazer um deep clonning (clonagem profunda):<pre>var x = [1, 2, [1, 2, 3], { name: &#39;Gabriel&#39;, lastName: &#39;Gigante&#39; }];
var y = {
 name: &#39;Gabriel&#39;,
 lastName: &#39;Gigante&#39;,
 techs: [&#39;JavaScript&#39;, &#39;TypeScript&#39;],
 social: {
 github: &#39;gagigante&#39;,
 linkedIn: &#39;gagigante&#39;,
 }
};

var a = [x[0], x[1], [...x[3]], { ...x[4] }];
var b = {...y, techs: [...y.techs], social: { ...y.social } };

a[2].push(4);
a[3].lastName = &#39;Silva&#39;;

b.techs.push(&#39;React&#39;);
b.social.github = &#39;blablabla&#39;;

console.log({ x, a, y, b });</pre>No exemplo modificado, não só o objeto principal foi clonado, mas também os sub objetos contidos nele. O <a href="https://www.instagram.com/imateus.silva/" target="_blank" rel="noopener noreferrer">Matheus Silva</a> ilustra bem esse tema em um de seus posts: <a href="https://www.instagram.com/p/CWrPQr2ghyI/?utm_source=ig_web_copy_link" target="_blank" rel="noopener noreferrer">Cuidados ao clonar objetos com spread!</a><h2>Comparar valores e referencias</h2>Para finalizar, um último cuidado que devemos tomar é que, no momento de comparar valores, também existe uma diferença de se comparar valores primitivos e objetos. Observe os exemplos abaixo:<pre>x = 1;
y = 1;
z = x;

console.log(x === y); // true
console.log(x === z); // true

// basiquinho né

arr = [1, 2, 3];
arr2 = [1, 2, 3];
arr3 = arr;

console.log(arr === arr2) // false
console.log(arr === arr3) // true</pre>O ponto de atenção fica na comparação entre objetos. No exemplo acima, temos uma comparação entre dois objetos com o mesmo conteúdo que retorna false. Isso acontece porque cada um deles é um objeto diferente, apesar de possuírem o mesmo conteúdo. A comparação só retornaria true caso ambas as variáveis na comparação apontassem para o mesmo objeto, como é o caso da última comparação feita no exemplo.Com isso, esse post vai chegando ao fim. Espero que tenha gostado e que tenha aprendido algo aqui. Se, no momento em que você estiver lendo este blog, já tiver um campo dedicado a comentários, sinta-se à vontade para deixar dúvidas, correções e sugestões de temas para eu abordar por aqui. Obrigado pela a audiência e a gente se vê no próximo post. Até lá!<h2>Referências</h2><a href="https://dmitripavlutin.com/value-vs-reference-javascript/" target="_blank" rel="noopener noreferrer">Dmitri Pavlutin - The Difference Between Values and References in JavaScript</a><a href="https://medium.com/@aabi01/javascript-understanding-the-difference-between-value-type-and-reference-type-1f0c8c53e37b" target="_blank" rel="noopener noreferrer">Abdullah A Malik - Javascript: Understanding the difference between Value Type and Reference Type</a><a href="https://www.braziljs.org/p/diferencas-entre-valor-e-referencia-em-javascript" target="_blank" rel="noopener noreferrer">Eduardo Rabelo - Diferenças entre &quot;Valor&quot; e &quot;Referência&quot; em JavaScript</a>

O que é Hoisting no JavaScript?

Valor vs Referência no JavaScript