[{"data":1,"prerenderedAt":1003},["ShallowReactive",2],{"blog-hoisting-javascript-scope":3},{"id":4,"title":5,"author":6,"body":7,"date":990,"description":991,"extension":992,"image":993,"meta":994,"navigation":278,"path":995,"seo":996,"stem":997,"tags":998,"__hash__":1002},"blog\u002Fblog\u002Fhoisting-javascript-scope.md","Hoisting e Scope: como o JavaScript decide onde as coisas existem","Larissa Santos",{"type":8,"value":9,"toc":982},"minimark",[10,23,28,31,46,50,53,56,65,136,139,191,202,214,246,252,258,324,330,391,416,420,423,429,438,488,503,584,589,640,653,657,660,727,733,738,826,841,846,920,924,927,944,947,951,978],[11,12,13,14,18,19,22],"p",{},"Se você já tomou um ",[15,16,17],"code",{},"undefined"," inesperado, ou um ",[15,20,21],{},"ReferenceError"," em um lugar que parecia impossível, hoisting ou scope estavam envolvidos. Esses dois conceitos definem como o JavaScript enxerga o seu código antes e durante a execução.",[24,25,27],"h2",{"id":26},"por-que-isso-importa","Por que isso importa",[11,29,30],{},"O JavaScript não lê o código de cima para baixo da forma que parece. Antes de executar qualquer linha, o engine passa por uma fase de compilação onde registra todas as declarações. É nessa fase que o hoisting acontece.",[11,32,33,34,37,38,41,42,45],{},"Entender isso muda como você interpreta erros, como você organiza funções e por que ",[15,35,36],{},"var"," se comporta de forma diferente de ",[15,39,40],{},"let"," e ",[15,43,44],{},"const"," em contextos que parecem idênticos.",[24,47,49],{"id":48},"o-que-é-hoisting","O que é hoisting",[11,51,52],{},"Hoisting é o comportamento do engine de registrar declarações antes da execução começar. Popularmente se diz que as declarações \"sobem para o topo do código\", mas o que acontece de verdade é que elas são processadas na fase de compilação, antes de qualquer atribuição de valor.",[11,54,55],{},"O que sobe e o que fica no lugar depende do tipo da declaração.",[11,57,58,64],{},[59,60,61,62],"strong",{},"Com ",[15,63,36],{},", a declaração sobe, mas o valor não:",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-js shiki shiki-themes material-theme-lighter github-dark github-dark","console.log(nome) \u002F\u002F undefined\nvar nome = 'Ana'\nconsole.log(nome) \u002F\u002F \"Ana\"\n","js","",[15,73,74,98,122],{"__ignoreMap":71},[75,76,79,83,87,91,94],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"sMo7A","console",[75,84,86],{"class":85},"sG-J9",".",[75,88,90],{"class":89},"sK_r7","log",[75,92,93],{"class":81},"(nome) ",[75,95,97],{"class":96},"sutJx","\u002F\u002F undefined\n",[75,99,101,104,107,111,115,119],{"class":77,"line":100},2,[75,102,36],{"class":103},"sFsEu",[75,105,106],{"class":81}," nome ",[75,108,110],{"class":109},"sFfmW","=",[75,112,114],{"class":113},"sF_wb"," '",[75,116,118],{"class":117},"s0vBq","Ana",[75,120,121],{"class":113},"'\n",[75,123,125,127,129,131,133],{"class":77,"line":124},3,[75,126,82],{"class":81},[75,128,86],{"class":85},[75,130,90],{"class":89},[75,132,93],{"class":81},[75,134,135],{"class":96},"\u002F\u002F \"Ana\"\n",[11,137,138],{},"O que o engine processa é algo como:",[66,140,142],{"className":68,"code":141,"language":70,"meta":71,"style":71},"var nome \u002F\u002F içado, valor = undefined\nconsole.log(nome) \u002F\u002F undefined\nnome = 'Ana'\nconsole.log(nome) \u002F\u002F \"Ana\"\n",[15,143,144,153,165,178],{"__ignoreMap":71},[75,145,146,148,150],{"class":77,"line":78},[75,147,36],{"class":103},[75,149,106],{"class":81},[75,151,152],{"class":96},"\u002F\u002F içado, valor = undefined\n",[75,154,155,157,159,161,163],{"class":77,"line":100},[75,156,82],{"class":81},[75,158,86],{"class":85},[75,160,90],{"class":89},[75,162,93],{"class":81},[75,164,97],{"class":96},[75,166,167,170,172,174,176],{"class":77,"line":124},[75,168,169],{"class":81},"nome ",[75,171,110],{"class":109},[75,173,114],{"class":113},[75,175,118],{"class":117},[75,177,121],{"class":113},[75,179,181,183,185,187,189],{"class":77,"line":180},4,[75,182,82],{"class":81},[75,184,86],{"class":85},[75,186,90],{"class":89},[75,188,93],{"class":81},[75,190,135],{"class":96},[11,192,193,194,197,198,201],{},"A linha ",[15,195,196],{},"var nome"," vai ao topo. A atribuição ",[15,199,200],{},"= \"Ana\""," permanece exatamente onde foi escrita.",[11,203,204,210,211,213],{},[59,205,61,206,41,208],{},[15,207,40],{},[15,209,44],{},", o comportamento muda. As declarações também são içadas, mas ficam em uma zona morta temporal, a Temporal Dead Zone, até que a linha de declaração seja atingida em execução. Qualquer acesso antes disso gera um ",[15,212,21],{},":",[66,215,217],{"className":68,"code":216,"language":70,"meta":71,"style":71},"console.log(idade) \u002F\u002F ReferenceError\nlet idade = 25\n",[15,218,219,233],{"__ignoreMap":71},[75,220,221,223,225,227,230],{"class":77,"line":78},[75,222,82],{"class":81},[75,224,86],{"class":85},[75,226,90],{"class":89},[75,228,229],{"class":81},"(idade) ",[75,231,232],{"class":96},"\u002F\u002F ReferenceError\n",[75,234,235,237,240,242],{"class":77,"line":100},[75,236,40],{"class":103},[75,238,239],{"class":81}," idade ",[75,241,110],{"class":109},[75,243,245],{"class":244},"s_k96"," 25\n",[11,247,248,249,251],{},"Isso não é um bug. É intencional. O comportamento foi projetado exatamente para evitar leitura de variáveis em estado indefinido, um problema silencioso que ",[15,250,36],{}," carrega consigo.",[11,253,254,257],{},[59,255,256],{},"Com function declarations",", o hoisting é completo. Declaração e corpo sobem juntos:",[66,259,261],{"className":68,"code":260,"language":70,"meta":71,"style":71},"saudar() \u002F\u002F \"Olá!\"\n\nfunction saudar() {\n  console.log('Olá!')\n}\n",[15,262,263,274,280,294,318],{"__ignoreMap":71},[75,264,265,268,271],{"class":77,"line":78},[75,266,267],{"class":89},"saudar",[75,269,270],{"class":81},"() ",[75,272,273],{"class":96},"\u002F\u002F \"Olá!\"\n",[75,275,276],{"class":77,"line":100},[75,277,279],{"emptyLinePlaceholder":278},true,"\n",[75,281,282,285,288,291],{"class":77,"line":124},[75,283,284],{"class":103},"function",[75,286,287],{"class":89}," saudar",[75,289,290],{"class":85},"()",[75,292,293],{"class":85}," {\n",[75,295,296,299,301,303,307,310,313,315],{"class":77,"line":180},[75,297,298],{"class":81},"  console",[75,300,86],{"class":85},[75,302,90],{"class":89},[75,304,306],{"class":305},"sdv8B","(",[75,308,309],{"class":113},"'",[75,311,312],{"class":117},"Olá!",[75,314,309],{"class":113},[75,316,317],{"class":305},")\n",[75,319,321],{"class":77,"line":320},5,[75,322,323],{"class":85},"}\n",[11,325,326,329],{},[59,327,328],{},"Com function expressions e arrow functions",", a função é apenas um valor atribuído a uma variável. O hoisting se aplica à variável, não à função:",[66,331,333],{"className":68,"code":332,"language":70,"meta":71,"style":71},"cumprimentar() \u002F\u002F TypeError: cumprimentar is not a function\n\nvar cumprimentar = function () {\n  console.log('Oi!')\n}\n",[15,334,335,345,349,368,387],{"__ignoreMap":71},[75,336,337,340,342],{"class":77,"line":78},[75,338,339],{"class":89},"cumprimentar",[75,341,270],{"class":81},[75,343,344],{"class":96},"\u002F\u002F TypeError: cumprimentar is not a function\n",[75,346,347],{"class":77,"line":100},[75,348,279],{"emptyLinePlaceholder":278},[75,350,351,353,357,360,363,366],{"class":77,"line":124},[75,352,36],{"class":103},[75,354,356],{"class":355},"sqHAQ"," cumprimentar",[75,358,359],{"class":109}," =",[75,361,362],{"class":103}," function",[75,364,365],{"class":85}," ()",[75,367,293],{"class":85},[75,369,370,372,374,376,378,380,383,385],{"class":77,"line":180},[75,371,298],{"class":81},[75,373,86],{"class":85},[75,375,90],{"class":89},[75,377,306],{"class":305},[75,379,309],{"class":113},[75,381,382],{"class":117},"Oi!",[75,384,309],{"class":113},[75,386,317],{"class":305},[75,388,389],{"class":77,"line":320},[75,390,323],{"class":85},[11,392,393,396,397,399,400,402,403,406,407,409,410,412,413,415],{},[15,394,395],{},"var cumprimentar"," é içado como ",[15,398,17],{},". Chamar ",[15,401,17],{}," como função gera um ",[15,404,405],{},"TypeError",". Se fosse ",[15,408,44],{}," ou ",[15,411,40],{},", seria um ",[15,414,21],{}," pela TDZ.",[24,417,419],{"id":418},"o-que-é-scope","O que é scope",[11,421,422],{},"Scope define onde uma variável pode ser acessada. O JavaScript trabalha com três níveis.",[11,424,425,428],{},[59,426,427],{},"Scope global"," é o nível mais externo. Variáveis declaradas aqui estão disponíveis em qualquer parte do código. Em aplicações maiores, isso vira um problema rápido: qualquer coisa pode ler e sobrescrever essas variáveis.",[11,430,431,434,435,437],{},[59,432,433],{},"Function scope"," isola variáveis dentro de funções. Uma variável declarada com ",[15,436,36],{}," dentro de uma função não existe fora dela:",[66,439,441],{"className":68,"code":440,"language":70,"meta":71,"style":71},"function calcular() {\n  var resultado = 42\n}\n\nconsole.log(resultado) \u002F\u002F ReferenceError\n",[15,442,443,454,467,471,475],{"__ignoreMap":71},[75,444,445,447,450,452],{"class":77,"line":78},[75,446,284],{"class":103},[75,448,449],{"class":89}," calcular",[75,451,290],{"class":85},[75,453,293],{"class":85},[75,455,456,459,462,464],{"class":77,"line":100},[75,457,458],{"class":103},"  var",[75,460,461],{"class":81}," resultado",[75,463,359],{"class":109},[75,465,466],{"class":244}," 42\n",[75,468,469],{"class":77,"line":124},[75,470,323],{"class":85},[75,472,473],{"class":77,"line":180},[75,474,279],{"emptyLinePlaceholder":278},[75,476,477,479,481,483,486],{"class":77,"line":320},[75,478,82],{"class":81},[75,480,86],{"class":85},[75,482,90],{"class":89},[75,484,485],{"class":81},"(resultado) ",[75,487,232],{"class":96},[11,489,490,493,494,41,496,498,499,502],{},[59,491,492],{},"Block scope"," é o comportamento de ",[15,495,40],{},[15,497,44],{},". Qualquer bloco delimitado por ",[15,500,501],{},"{}"," cria um escopo próprio:",[66,504,506],{"className":68,"code":505,"language":70,"meta":71,"style":71},"if (true) {\n  let mensagem = 'dentro do bloco'\n  console.log(mensagem) \u002F\u002F \"dentro do bloco\"\n}\n\nconsole.log(mensagem) \u002F\u002F ReferenceError\n",[15,507,508,527,544,562,566,570],{"__ignoreMap":71},[75,509,510,514,517,521,524],{"class":77,"line":78},[75,511,513],{"class":512},"s3Er8","if",[75,515,516],{"class":81}," (",[75,518,520],{"class":519},"sMrrN","true",[75,522,523],{"class":81},") ",[75,525,526],{"class":85},"{\n",[75,528,529,532,535,537,539,542],{"class":77,"line":100},[75,530,531],{"class":103},"  let",[75,533,534],{"class":81}," mensagem",[75,536,359],{"class":109},[75,538,114],{"class":113},[75,540,541],{"class":117},"dentro do bloco",[75,543,121],{"class":113},[75,545,546,548,550,552,554,557,559],{"class":77,"line":124},[75,547,298],{"class":81},[75,549,86],{"class":85},[75,551,90],{"class":89},[75,553,306],{"class":305},[75,555,556],{"class":81},"mensagem",[75,558,523],{"class":305},[75,560,561],{"class":96},"\u002F\u002F \"dentro do bloco\"\n",[75,563,564],{"class":77,"line":180},[75,565,323],{"class":85},[75,567,568],{"class":77,"line":320},[75,569,279],{"emptyLinePlaceholder":278},[75,571,573,575,577,579,582],{"class":77,"line":572},6,[75,574,82],{"class":81},[75,576,86],{"class":85},[75,578,90],{"class":89},[75,580,581],{"class":81},"(mensagem) ",[75,583,232],{"class":96},[11,585,586,588],{},[15,587,36],{}," não respeita block scope. Ele respeita apenas o escopo da função mais próxima:",[66,590,592],{"className":68,"code":591,"language":70,"meta":71,"style":71},"if (true) {\n  var valor = 10\n}\n\nconsole.log(valor) \u002F\u002F 10\n",[15,593,594,606,618,622,626],{"__ignoreMap":71},[75,595,596,598,600,602,604],{"class":77,"line":78},[75,597,513],{"class":512},[75,599,516],{"class":81},[75,601,520],{"class":519},[75,603,523],{"class":81},[75,605,526],{"class":85},[75,607,608,610,613,615],{"class":77,"line":100},[75,609,458],{"class":103},[75,611,612],{"class":81}," valor",[75,614,359],{"class":109},[75,616,617],{"class":244}," 10\n",[75,619,620],{"class":77,"line":124},[75,621,323],{"class":85},[75,623,624],{"class":77,"line":180},[75,625,279],{"emptyLinePlaceholder":278},[75,627,628,630,632,634,637],{"class":77,"line":320},[75,629,82],{"class":81},[75,631,86],{"class":85},[75,633,90],{"class":89},[75,635,636],{"class":81},"(valor) ",[75,638,639],{"class":96},"\u002F\u002F 10\n",[11,641,642,643,645,646,648,649,652],{},"Esse é um dos motivos pelos quais ",[15,644,36],{}," costuma ser fonte de bugs difíceis de rastrear. Você declara dentro de um ",[15,647,513],{},", de um ",[15,650,651],{},"for",", de qualquer bloco, e a variável vaza para o escopo da função inteira.",[24,654,656],{"id":655},"como-os-dois-se-conectam","Como os dois se conectam",[11,658,659],{},"Hoisting e scope não operam de forma isolada. O hoisting sempre acontece dentro de um escopo. Uma variável é içada para o topo do escopo em que foi declarada, não para o topo do arquivo.",[66,661,663],{"className":68,"code":662,"language":70,"meta":71,"style":71},"function exemplo() {\n  console.log(x) \u002F\u002F undefined, não ReferenceError\n  var x = 5\n}\n\nconsole.log(x) \u002F\u002F ReferenceError\n",[15,664,665,676,694,706,710,714],{"__ignoreMap":71},[75,666,667,669,672,674],{"class":77,"line":78},[75,668,284],{"class":103},[75,670,671],{"class":89}," exemplo",[75,673,290],{"class":85},[75,675,293],{"class":85},[75,677,678,680,682,684,686,689,691],{"class":77,"line":100},[75,679,298],{"class":81},[75,681,86],{"class":85},[75,683,90],{"class":89},[75,685,306],{"class":305},[75,687,688],{"class":81},"x",[75,690,523],{"class":305},[75,692,693],{"class":96},"\u002F\u002F undefined, não ReferenceError\n",[75,695,696,698,701,703],{"class":77,"line":124},[75,697,458],{"class":103},[75,699,700],{"class":81}," x",[75,702,359],{"class":109},[75,704,705],{"class":244}," 5\n",[75,707,708],{"class":77,"line":180},[75,709,323],{"class":85},[75,711,712],{"class":77,"line":320},[75,713,279],{"emptyLinePlaceholder":278},[75,715,716,718,720,722,725],{"class":77,"line":572},[75,717,82],{"class":81},[75,719,86],{"class":85},[75,721,90],{"class":89},[75,723,724],{"class":81},"(x) ",[75,726,232],{"class":96},[11,728,729,730,732],{},"Dentro da função, ",[15,731,688],{}," é içado para o topo do function scope. Fora da função, ela simplesmente não existe.",[11,734,735,736,213],{},"Isso explica um comportamento que confunde bastante em loops com ",[15,737,36],{},[66,739,741],{"className":68,"code":740,"language":70,"meta":71,"style":71},"for (var i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F 3, 3, 3\n",[15,742,743,782,817,821],{"__ignoreMap":71},[75,744,745,747,749,751,754,756,759,762,764,767,770,772,775,778,780],{"class":77,"line":78},[75,746,651],{"class":512},[75,748,516],{"class":81},[75,750,36],{"class":103},[75,752,753],{"class":81}," i ",[75,755,110],{"class":109},[75,757,758],{"class":244}," 0",[75,760,761],{"class":85},";",[75,763,753],{"class":81},[75,765,766],{"class":109},"\u003C",[75,768,769],{"class":244}," 3",[75,771,761],{"class":85},[75,773,774],{"class":81}," i",[75,776,777],{"class":109},"++",[75,779,523],{"class":81},[75,781,526],{"class":85},[75,783,784,787,789,791,794,797,799,801,803,806,809,812,815],{"class":77,"line":100},[75,785,786],{"class":89},"  setTimeout",[75,788,306],{"class":305},[75,790,290],{"class":85},[75,792,793],{"class":103}," =>",[75,795,796],{"class":81}," console",[75,798,86],{"class":85},[75,800,90],{"class":89},[75,802,306],{"class":305},[75,804,805],{"class":81},"i",[75,807,808],{"class":305},")",[75,810,811],{"class":85},",",[75,813,814],{"class":244}," 100",[75,816,317],{"class":305},[75,818,819],{"class":77,"line":124},[75,820,323],{"class":85},[75,822,823],{"class":77,"line":180},[75,824,825],{"class":96},"\u002F\u002F 3, 3, 3\n",[11,827,828,831,832,834,835,837,838,86],{},[15,829,830],{},"var i"," não fica presa no bloco do ",[15,833,651],{},". Ela é içada para o escopo da função (ou global) e existe como uma única variável. Quando os callbacks executam, o loop já terminou e ",[15,836,805],{}," é ",[15,839,840],{},"3",[11,842,61,843,845],{},[15,844,40],{},", cada iteração cria um escopo próprio:",[66,847,849],{"className":68,"code":848,"language":70,"meta":71,"style":71},"for (let i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100)\n}\n\u002F\u002F 0, 1, 2\n",[15,850,851,883,911,915],{"__ignoreMap":71},[75,852,853,855,857,859,861,863,865,867,869,871,873,875,877,879,881],{"class":77,"line":78},[75,854,651],{"class":512},[75,856,516],{"class":81},[75,858,40],{"class":103},[75,860,753],{"class":81},[75,862,110],{"class":109},[75,864,758],{"class":244},[75,866,761],{"class":85},[75,868,753],{"class":81},[75,870,766],{"class":109},[75,872,769],{"class":244},[75,874,761],{"class":85},[75,876,774],{"class":81},[75,878,777],{"class":109},[75,880,523],{"class":81},[75,882,526],{"class":85},[75,884,885,887,889,891,893,895,897,899,901,903,905,907,909],{"class":77,"line":100},[75,886,786],{"class":89},[75,888,306],{"class":305},[75,890,290],{"class":85},[75,892,793],{"class":103},[75,894,796],{"class":81},[75,896,86],{"class":85},[75,898,90],{"class":89},[75,900,306],{"class":305},[75,902,805],{"class":81},[75,904,808],{"class":305},[75,906,811],{"class":85},[75,908,814],{"class":244},[75,910,317],{"class":305},[75,912,913],{"class":77,"line":124},[75,914,323],{"class":85},[75,916,917],{"class":77,"line":180},[75,918,919],{"class":96},"\u002F\u002F 0, 1, 2\n",[24,921,923],{"id":922},"conclusão","Conclusão",[11,925,926],{},"Hoisting e scope são a base de como o JavaScript organiza o seu código antes de executá-lo. Quando você entende que o engine processa declarações antes de valores, e que cada tipo de declaração tem um comportamento diferente nesse processo, os erros que antes pareciam aleatórios começam a fazer sentido.",[11,928,929,931,932,934,935,937,938,940,941,943],{},[15,930,36],{}," em loop vaza para fora do bloco porque ",[15,933,36],{}," não respeita block scope. ",[15,936,17],{}," antes da declaração acontece porque a declaração subiu mas o valor não. ",[15,939,21],{}," em ",[15,942,40],{}," acontece porque a TDZ protege você de ler uma variável que ainda não foi inicializada.",[11,945,946],{},"O JavaScript não está sendo imprevisível. Ele está seguindo regras bem definidas de onde as coisas vivem e quando ficam disponíveis.",[24,948,950],{"id":949},"referências","Referências",[952,953,954,964,971],"ul",{},[955,956,957],"li",{},[958,959,963],"a",{"href":960,"rel":961},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fpt-BR\u002Fdocs\u002FGlossary\u002FHoisting",[962],"nofollow","Hoisting - MDN Web Docs",[955,965,966],{},[958,967,970],{"href":968,"rel":969},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fpt-BR\u002Fdocs\u002FWeb\u002FJavaScript\u002FClosures",[962],"Closures - MDN Web Docs",[955,972,973],{},[958,974,977],{"href":975,"rel":976},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fpt-BR\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FStatements\u002Flet",[962],"let, const e block scope - MDN Web Docs",[979,980,981],"style",{},"html pre.shiki code .sMo7A, html code.shiki .sMo7A{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sG-J9, html code.shiki .sG-J9{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sK_r7, html code.shiki .sK_r7{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sFsEu, html code.shiki .sFsEu{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .sFfmW, html code.shiki .sFfmW{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .sF_wb, html code.shiki .sF_wb{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .s0vBq, html code.shiki .s0vBq{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s_k96, html code.shiki .s_k96{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sdv8B, html code.shiki .sdv8B{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sqHAQ, html code.shiki .sqHAQ{--shiki-light:#90A4AE;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .s3Er8, html code.shiki .s3Er8{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sMrrN, html code.shiki .sMrrN{--shiki-light:#FF5370;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}",{"title":71,"searchDepth":100,"depth":100,"links":983},[984,985,986,987,988,989],{"id":26,"depth":100,"text":27},{"id":48,"depth":100,"text":49},{"id":418,"depth":100,"text":419},{"id":655,"depth":100,"text":656},{"id":922,"depth":100,"text":923},{"id":949,"depth":100,"text":950},"2026-04-11T10:18:00-03:00","Se você já tomou um undefined inesperado, ou um ReferenceError em um lugar que parecia impossível, hoisting ou scope estavam envolvidos. Entender esses dois conceitos muda como você lê e escreve JavaScript.","md","\u002Fimages\u002Fblog\u002Fhoisting-scope.png",{},"\u002Fblog\u002Fhoisting-javascript-scope",{"title":5,"description":991},"blog\u002Fhoisting-javascript-scope",[999,1000,1001],"javascript","frontend","fundamentos","JfOLXRp65se4IPa33AGZpJRLS17VGwKyQ3ABVKCpro0",1776377614449]