{"_path":"/blog/variables-and-scopes-in-js","_draft":false,"_partial":false,"_empty":false,"title":"Variables & Scopes in JS.","description":"New to JavaScript? Let me help you to dive in.","excerpt":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This article will overview variables and scopes in JavaScript and other related things."}]},{"type":"element","tag":"h2","props":{"id":"global-scope"},"children":[{"type":"text","value":"Global Scope."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's declare "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" variables in our JS file.\nIf variables are not in the function, like in the example below, they become a part of Global Scope."}]},{"type":"element","tag":"code","props":{"code":"var a = 10;\nlet b = 10;\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"var a = 10;\nlet b = 10;\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is bad for a few reasons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason one: a lifetime of variables in Global Scope is infinite until a user closes the tab in the browser. If you store a lot of data in Global Scope, it may affect performance and memory consumption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason two: declaring a variable in Global Scope without a good reason is an efficient way to write poor code,\nbecause the code written this way is harder to support, test, and understand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason three (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" only): If you are not using 'strict mode' in your JS file, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" in Global Scope will become the property of the window object. With this, you can accidentally overwrite the window’s object variable or function, and that would lead only to pain, fear, and bugs."}]},{"type":"element","tag":"h2","props":{"id":"function-scope"},"children":[{"type":"text","value":"Function Scope. "}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" variable behaves differently than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" when declared in the function."}]},{"type":"element","tag":"code","props":{"code":"function outer() {\n  var x = 12;\n\n  function inner() {\n    console.log(x); // 12\n  }\n\n  if (2 + 2 == 4) {\n    console.log(x); // 12\n  }\n\n  inner();\n}\n\nouter();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function outer() {\n  var x = 12;\n\n  function inner() {\n    console.log(x); // 12\n  }\n\n  if (2 + 2 == 4) {\n    console.log(x); // 12\n  }\n\n  inner();\n}\n\nouter();\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As you can see, we can access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable anywhere in the function where it was declared. Independent of nesting level. In that case, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable lifetime ends only with a closing bracket of function where it was declared."}]},{"type":"element","tag":"h2","props":{"id":"block-scope"},"children":[{"type":"text","value":"Block Scope."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Opposite of Function Scope is the Block Scope. When you declare a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" variable, its lifetime ends with a closing bracket of its block."}]},{"type":"element","tag":"code","props":{"code":"{\n  let x = 10;\n} // lifetime of x ends.\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"{\n  let x = 10;\n} // lifetime of x ends.\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, you can access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable only from inside the block where it was declared."}]},{"type":"element","tag":"code","props":{"code":"function func() {\n  if (2 + 2 == 4) {\n    let x = 10;\n    console.log(x); // 10\n  }\n\n  console.log(x); // Uncaught ReferenceError: x is not defined\n}\n\nfunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function func() {\n  if (2 + 2 == 4) {\n    let x = 10;\n    console.log(x); // 10\n  }\n\n  console.log(x); // Uncaught ReferenceError: x is not defined\n}\n\nfunc();\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"const-variable"},"children":[{"type":"text","value":"const Variable. "}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" is the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":", but you can't change the variable value after initialization."}]},{"type":"element","tag":"code","props":{"code":"const x = 10;\n\nx = 5; // Uncaught TypeError: Assignment to constant variable.\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const x = 10;\n\nx = 5; // Uncaught TypeError: Assignment to constant variable.\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_03","src":"/blog/vars_scopes_js/meme_03.webp"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"temporal-dead-zone-tdz"},"children":[{"type":"text","value":"Temporal Dead Zone (TDZ)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And this is where all the fun begins."}]},{"type":"element","tag":"code","props":{"code":"function simpleFunc() {\n  console.log(x); // Reference error\n\n  let x = 10;\n}\n\nsimpleFunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function simpleFunc() {\n  console.log(x); // Reference error\n\n  let x = 10;\n}\n\nsimpleFunc();\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And what is going to happen if we change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":"?"}]},{"type":"element","tag":"code","props":{"code":"function simpleFunc() {\n  console.log(x); // undefined\n\n  var x = 10;\n}\n\nsimpleFunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function simpleFunc() {\n  console.log(x); // undefined\n\n  var x = 10;\n}\n\nsimpleFunc();\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interesting. To understand this, we need to talk about hoisting. \nHoisting is JavaScript's mechanism that moves variables and function declarations to the top of their scope. And if you try to use a variable before it was declared in the code, you will get an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" value or the reference error depending on which variable you try to access "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"JavaScript binds a variable or a function to its scope that way. \nNote that only variable declaration pops up, not the variable initialization!\nSo what is TDZ? \nTDZ is the term to describe a state when a variable/function is unreachable. Like in the example above, we can't access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable before it was declared because "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log(x)"}]},{"type":"text","value":" is in Temporal Dead Zone. \nAlso, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"/"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" behaviors are different in TDZ. In the case of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"/"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":", you would get a Reference Error while trying to access a variable in TDZ. In the case of var, you get "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", which may lead to problems."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_1","src":"/blog/vars_scopes_js/meme_01.jpeg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"arguments-in-functions--lexical-environment"},"children":[{"type":"text","value":"Arguments in functions & Lexical Environment."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Arguments that you pass into the function are attached to the scope of that function."}]},{"type":"element","tag":"code","props":{"code":"function func(x) {\n  console.log(x); // undefined\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function func(x) {\n  console.log(x); // undefined\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Wow! We get "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" here! The reason is we don't pass a value to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"func()"}]},{"type":"text","value":" when calling it, but in the function declaration, func(x) has x as the argument. So when JavaScript calls "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log(x)"}]},{"type":"text","value":", it finds the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable in the function's scope. But since we don't pass any value as an argument, the value of x is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's change the example a bit."}]},{"type":"element","tag":"code","props":{"code":"function func(a) {\n  console.log(x); // I'm outside the function!\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function func(a) {\n  console.log(x); // I'm outside the function!\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So in this example, JavaScript does the next thing, it searches for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable in the function's scope and doesn't find it. Then JavaScript moves to the outer scope and searches for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable there, and now JavaScript finds it and passes the value of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log()"}]},{"type":"text","value":";"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When JavaScript looks for a variable, it starts from the local scope and moves to outer scopes until it reaches the Global Scope. If JavaScript did not find a variable in Global Scope, you would get a Reference Error."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This mechanism is called the Lexical Environment. To easily understand how it works, imagine when you create a function and declare a variable in it. JavaScript creates the object for this function, containing all functions, variables, and ref to an outer object. When you try to access a variable and JavaScript does not find it in the current Lexical Environment, the JavaScript goes to the outer Lexical Environment by the ref."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This diagram shows Lexical Environment conditionally but can help you understand this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_03","src":"/blog/vars_scopes_js/diagram.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this diagram, coffee and name are variables in functions lexical environment, and ref leads to outer Lexical environment. Ref of Global Scope is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"closures"},"children":[{"type":"text","value":"Closures."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Imagine we want to create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" that counts how much ice latte we have drunk.  But there is one condition, we want to make the counter variable accessible only within the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"function"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"function drinkLatte() {\n  let counter = 0;\n  return ++counter;\n}\n\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function drinkLatte() {\n  let counter = 0;\n  return ++counter;\n}\n\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Have you noticed the issue? Is the counter variable accessible only with the function? Yes. Does this code work properly? No.\nEvery time we call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drinkLatte()"}]},{"type":"text","value":", it will return 1. It works because the counter’s variable lifetime ends with the function’s close bracket. So in this example, we create a counter variable three times with a value of 0, then increment the counter to a value of 1 and return. We need a mechanism that can save the state of variables.\nClosures can help us with that. Here is another example of using closures."}]},{"type":"element","tag":"code","props":{"code":"function getLatte() {\n  let counter = 0;\n  return function drinkLatte() {\n    return ++counter;\n  };\n}\n\nconst latte = getLatte();\n\nconsole.log(latte()); // 1\nconsole.log(latte()); // 2\nconsole.log(latte()); // 3\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"function getLatte() {\n  let counter = 0;\n  return function drinkLatte() {\n    return ++counter;\n  };\n}\n\nconst latte = getLatte();\n\nconsole.log(latte()); // 1\nconsole.log(latte()); // 2\nconsole.log(latte()); // 3\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It works! We created a new function named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getLatte"}]},{"type":"text","value":" which wrapped our previous function. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getLatte"}]},{"type":"text","value":" function has a counter variable declared in it, and it returns the drinkLatte function, which increments the counter variable from the outer function.\nThen we initialize the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"latte"}]},{"type":"text","value":" variable with returned function, so now we can call the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"text","value":" function from that variable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With Closures, we can expand the lifetime of a variable and use it in inner functions."}]},{"type":"element","tag":"h2","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_02","src":"/blog/vars_scopes_js/meme_02.jpeg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using Global Variables without good reason.\nUse "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" & "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" as it is much safer.\nBe aware of TDZ and keep in mind how Lexical Environment works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"That’s all! Thanks for reading. If you liked the article, you could help Ukraine. Even $1 would help."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Come Back Alive Fund: "},{"type":"element","tag":"a","props":{"href":"https://savelife.in.ua/en/donate-en/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://savelife.in.ua/en/donate-en/"}]},{"type":"text","value":"."}]}]},"topic":"Variables & Scopes in JavaScript","createdAt":1660075676825,"category":"Web development","image":"/blog/vars_scopes_js/js-logo.png","head":{"image":"/blog/vars_scopes_js/js-logo.png"},"author":{"name":"Nikita Tovstyga","bio":"Front-end Developer","img":"/blog/authors/nikita.webp"},"tags":["JavaScript"],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This article will overview variables and scopes in JavaScript and other related things."}]},{"type":"element","tag":"h2","props":{"id":"global-scope"},"children":[{"type":"text","value":"Global Scope."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's declare "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" variables in our JS file.\nIf variables are not in the function, like in the example below, they become a part of Global Scope."}]},{"type":"element","tag":"code","props":{"code":"var a = 10;\nlet b = 10;\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" a "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" b "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is bad for a few reasons."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason one: a lifetime of variables in Global Scope is infinite until a user closes the tab in the browser. If you store a lot of data in Global Scope, it may affect performance and memory consumption."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason two: declaring a variable in Global Scope without a good reason is an efficient way to write poor code,\nbecause the code written this way is harder to support, test, and understand."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reason three (for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" only): If you are not using 'strict mode' in your JS file, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" in Global Scope will become the property of the window object. With this, you can accidentally overwrite the window’s object variable or function, and that would lead only to pain, fear, and bugs."}]},{"type":"element","tag":"h2","props":{"id":"function-scope"},"children":[{"type":"text","value":"Function Scope. "}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" variable behaves differently than "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" when declared in the function."}]},{"type":"element","tag":"code","props":{"code":"function outer() {\n  var x = 12;\n\n  function inner() {\n    console.log(x); // 12\n  }\n\n  if (2 + 2 == 4) {\n    console.log(x); // 12\n  }\n\n  inner();\n}\n\nouter();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"outer"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"12"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"inner"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 12"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 12"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"inner"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"outer"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As you can see, we can access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable anywhere in the function where it was declared. Independent of nesting level. In that case, the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable lifetime ends only with a closing bracket of function where it was declared."}]},{"type":"element","tag":"h2","props":{"id":"block-scope"},"children":[{"type":"text","value":"Block Scope."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Opposite of Function Scope is the Block Scope. When you declare a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" variable, its lifetime ends with a closing bracket of its block."}]},{"type":"element","tag":"code","props":{"code":"{\n  let x = 10;\n} // lifetime of x ends.\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"{"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"} "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// lifetime of x ends."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Also, you can access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable only from inside the block where it was declared."}]},{"type":"element","tag":"code","props":{"code":"function func() {\n  if (2 + 2 == 4) {\n    let x = 10;\n    console.log(x); // 10\n  }\n\n  console.log(x); // Uncaught ReferenceError: x is not defined\n}\n\nfunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"+"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"2"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"=="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"4"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 10"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// Uncaught ReferenceError: x is not defined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"const-variable"},"children":[{"type":"text","value":"const Variable. "}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" is the same as "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":", but you can't change the variable value after initialization."}]},{"type":"element","tag":"code","props":{"code":"const x = 10;\n\nx = 5; // Uncaught TypeError: Assignment to constant variable.\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"5"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"; "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// Uncaught TypeError: Assignment to constant variable."}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_03","src":"/blog/vars_scopes_js/meme_03.webp"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"temporal-dead-zone-tdz"},"children":[{"type":"text","value":"Temporal Dead Zone (TDZ)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And this is where all the fun begins."}]},{"type":"element","tag":"code","props":{"code":"function simpleFunc() {\n  console.log(x); // Reference error\n\n  let x = 10;\n}\n\nsimpleFunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"simpleFunc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// Reference error"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"simpleFunc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And what is going to happen if we change "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":"?"}]},{"type":"element","tag":"code","props":{"code":"function simpleFunc() {\n  console.log(x); // undefined\n\n  var x = 10;\n}\n\nsimpleFunc();\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"simpleFunc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"10"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"simpleFunc"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Interesting. To understand this, we need to talk about hoisting. \nHoisting is JavaScript's mechanism that moves variables and function declarations to the top of their scope. And if you try to use a variable before it was declared in the code, you will get an "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" value or the reference error depending on which variable you try to access "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" or "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"JavaScript binds a variable or a function to its scope that way. \nNote that only variable declaration pops up, not the variable initialization!\nSo what is TDZ? \nTDZ is the term to describe a state when a variable/function is unreachable. Like in the example above, we can't access the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable before it was declared because "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log(x)"}]},{"type":"text","value":" is in Temporal Dead Zone. \nAlso, "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"/"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" behaviors are different in TDZ. In the case of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":"/"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":", you would get a Reference Error while trying to access a variable in TDZ. In the case of var, you get "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", which may lead to problems."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_1","src":"/blog/vars_scopes_js/meme_01.jpeg"},"children":[]}]},{"type":"element","tag":"h2","props":{"id":"arguments-in-functions--lexical-environment"},"children":[{"type":"text","value":"Arguments in functions & Lexical Environment."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Arguments that you pass into the function are attached to the scope of that function."}]},{"type":"element","tag":"code","props":{"code":"function func(x) {\n  console.log(x); // undefined\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// undefined"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'I'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"m outside the "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"!';"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Wow! We get "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" here! The reason is we don't pass a value to "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"func()"}]},{"type":"text","value":" when calling it, but in the function declaration, func(x) has x as the argument. So when JavaScript calls "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log(x)"}]},{"type":"text","value":", it finds the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable in the function's scope. But since we don't pass any value as an argument, the value of x is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's change the example a bit."}]},{"type":"element","tag":"code","props":{"code":"function func(a) {\n  console.log(x); // I'm outside the function!\n}\nvar x = 'I'm outside the function!';\nfunc();\n\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#953800"}},"children":[{"type":"text","value":"a"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"(x); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// I'm outside the function!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"var"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" x "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0A3069"}},"children":[{"type":"text","value":"'I'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"m outside the "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"!';"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"func"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So in this example, JavaScript does the next thing, it searches for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable in the function's scope and doesn't find it. Then JavaScript moves to the outer scope and searches for the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" variable there, and now JavaScript finds it and passes the value of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":" to the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"console.log()"}]},{"type":"text","value":";"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When JavaScript looks for a variable, it starts from the local scope and moves to outer scopes until it reaches the Global Scope. If JavaScript did not find a variable in Global Scope, you would get a Reference Error."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This mechanism is called the Lexical Environment. To easily understand how it works, imagine when you create a function and declare a variable in it. JavaScript creates the object for this function, containing all functions, variables, and ref to an outer object. When you try to access a variable and JavaScript does not find it in the current Lexical Environment, the JavaScript goes to the outer Lexical Environment by the ref."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This diagram shows Lexical Environment conditionally but can help you understand this."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_03","src":"/blog/vars_scopes_js/diagram.png"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this diagram, coffee and name are variables in functions lexical environment, and ref leads to outer Lexical environment. Ref of Global Scope is "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"closures"},"children":[{"type":"text","value":"Closures."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Imagine we want to create a "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" that counts how much ice latte we have drunk.  But there is one condition, we want to make the counter variable accessible only within the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"function"}]},{"type":"text","value":"."}]},{"type":"element","tag":"code","props":{"code":"function drinkLatte() {\n  let counter = 0;\n  return ++counter;\n}\n\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\nconsole.log(drinkLatte()); // 1\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" counter "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"counter;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 1"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Have you noticed the issue? Is the counter variable accessible only with the function? Yes. Does this code work properly? No.\nEvery time we call "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drinkLatte()"}]},{"type":"text","value":", it will return 1. It works because the counter’s variable lifetime ends with the function’s close bracket. So in this example, we create a counter variable three times with a value of 0, then increment the counter to a value of 1 and return. We need a mechanism that can save the state of variables.\nClosures can help us with that. Here is another example of using closures."}]},{"type":"element","tag":"code","props":{"code":"function getLatte() {\n  let counter = 0;\n  return function drinkLatte() {\n    return ++counter;\n  };\n}\n\nconst latte = getLatte();\n\nconsole.log(latte()); // 1\nconsole.log(latte()); // 2\nconsole.log(latte()); // 3\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"getLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" counter "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"++"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"counter;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"  };"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#0550AE"}},"children":[{"type":"text","value":"latte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#CF222E"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"getLatte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"();"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"latte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"latte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 2"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"console."}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"log"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#8250DF"}},"children":[{"type":"text","value":"latte"}]},{"type":"element","tag":"span","props":{"style":{"color":"#24292F"}},"children":[{"type":"text","value":"()); "}]},{"type":"element","tag":"span","props":{"style":{"color":"#6E7781"}},"children":[{"type":"text","value":"// 3"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It works! We created a new function named "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getLatte"}]},{"type":"text","value":" which wrapped our previous function. The "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"getLatte"}]},{"type":"text","value":" function has a counter variable declared in it, and it returns the drinkLatte function, which increments the counter variable from the outer function.\nThen we initialize the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"latte"}]},{"type":"text","value":" variable with returned function, so now we can call the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"drinkLatte"}]},{"type":"text","value":" function from that variable."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With Closures, we can expand the lifetime of a variable and use it in inner functions."}]},{"type":"element","tag":"h2","props":{"id":"conclusion"},"children":[{"type":"text","value":"Conclusion."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"article-img","props":{"alt":"meme_02","src":"/blog/vars_scopes_js/meme_02.jpeg"},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Avoid using Global Variables without good reason.\nUse "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" & "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" instead of "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"var"}]},{"type":"text","value":" as it is much safer.\nBe aware of TDZ and keep in mind how Lexical Environment works."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"That’s all! Thanks for reading. If you liked the article, you could help Ukraine. Even $1 would help."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Come Back Alive Fund: "},{"type":"element","tag":"a","props":{"href":"https://savelife.in.ua/en/donate-en/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://savelife.in.ua/en/donate-en/"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"global-scope","depth":2,"text":"Global Scope."},{"id":"function-scope","depth":2,"text":"Function Scope. "},{"id":"block-scope","depth":2,"text":"Block Scope."},{"id":"const-variable","depth":2,"text":"const Variable. "},{"id":"temporal-dead-zone-tdz","depth":2,"text":"Temporal Dead Zone (TDZ)"},{"id":"arguments-in-functions--lexical-environment","depth":2,"text":"Arguments in functions & Lexical Environment."},{"id":"closures","depth":2,"text":"Closures."},{"id":"conclusion","depth":2,"text":"Conclusion."}]}},"_type":"markdown","_id":"content:blog:variables-and-scopes-in-JS.md","_source":"content","_file":"blog/variables-and-scopes-in-JS.md","_extension":"md"}