{"id":19583,"date":"2020-07-16T06:29:20","date_gmt":"2020-07-16T13:29:20","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19583"},"modified":"2020-12-29T13:48:15","modified_gmt":"2020-12-29T21:48:15","slug":"javascript-closure","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/javascript-closure\/","title":{"rendered":"Web Fundamentals: Scope and JavaScript Closure \u2013 a Primer"},"content":{"rendered":"\n

One of the biggest buzzwords in the JavaScript language is closure. It\u2019s the subject of many job interview questions at FAANG companies. In this article, we\u2019ll talk about closure and scope, illustrate its concepts with simple examples, and then finish out with a sample question from an interview with one of the bigger tech giants.<\/em>
<\/p>\n\n\n\n

Scope<\/h2>\n\n\n\n

When someone tells you something is or isn\u2019t in scope of a project, what does that mean? <\/em>
<\/p>\n\n\n\n

I\u2019d like to think of a periscope or a telescope when I think of the answer to this. These instruments show us all sorts of things within the confines of the lens it has:  it\u2019s in scope<\/em>. If it\u2019s outside the scope<\/em>, you can\u2019t see past the diameter of the lens. And shining a light on something outside the diameter is not possible. You should be thinking about this as we talk about three very important and distinct types of scope in JavaScript: local, global and lexical. <\/p>\n\n\n\n

Local Scope<\/h3>\n\n\n\n

Local Scope is the smallest of the three scopes we will be talking about today. When we declare a function, anything inside the brackets ({}) is considered to be local to the function. When the JavaScript engine reads the function it will declare the variables; when it ends it will destroy the variables. 
<\/p>\n\n\n\n

function greeting() {\n var websiteName = 'Career Karma';\n return `Hello ${websiteName}`;\n}\n \nconsole.log(greeting()); \/\/ Hello Career Karma\nconsole.log(websiteName); \/\/ ReferenceError: websiteName is not defined<\/pre><\/div>\n\n\n\n
As you can see, when we \u201cconsole.log()\u201d the outcome of the invoked greeting function, we are able to access the websiteName after the function was executed. This gives us the \u2018Hello Career Karma\u2019 string that we were looking for. The console.log()<\/code> of the variable that was declared inside the function throws an error because it\u2019s not defined.
<\/p>\n\n\n\n
As mentioned already, the reason why websiteName is undefined is because variables are created inside functions when they are invoked and then destroyed when the terminal statement runs. Anything outside of the function does not have access to stuff inside the function unless it has a special setup.<\/p>\n\n\n\n
Global Scope<\/h3>\n\n\n\n
This next scope is pretty much a literal translation of the phrase. A global scope takes the items declared outside of a function and reserves them in a space where all the scripts and methods and functions can access and use them for their logic. 
<\/p>\n\n\n\n
 \nlet counter = 0; \/\/ global -- declared outside function\n \nconst add = () => { \/\/ function declaration\n   let counter = 0; \/\/ local -- declared inside function\n   counter += 1; \n   \/\/ counter increased by 1 -- which counter variable increased?\n   return counter;\n}\n \nadd(); \/\/ invoke\nadd(); \/\/  three\nadd(); \/\/  times\nconsole.log(counter) \/\/ is this 3 or 0? Why? \n<\/pre><\/div>\n\n\n\n
What does the code above do if we console.log()<\/code> the counter at the end of the code? What do you expect to happen? 
<\/p>\n\n\n\n
Let\u2019s walk through the code: 
<\/p>\n\n\n\n
  1. Counter variable declared and initiated in the global environment. <\/li>
  2. Add function declared in the global environment. <\/li>
  3. Add is invoked.<\/li>
  4. Counter variable declared and initiated in the local environment. <\/li>
  5. The local counter increases by 1 \u21d0 why local and not global? <\/li>
  6. Counter is returned. Function terminates.<\/li>
  7. Add is invoked again<\/li>
  8. Walk through steps 4 to 6 again. <\/li>
  9. Repeat steps 3 to 6 again.<\/li>
  10. console.log(counter)<\/code>; \u21d0 What is returned? <\/li><\/ol>\n\n\n\n
    Because the function terminates when the counter is at 1 every time, our local counter variable is redeclared and re-initiated at 0 every time the function runs. No matter what happens, the counter will always stop at 1 on the local level. 
    <\/p>\n\n\n\n
    If a function finds a variable within its scope, it doesn\u2019t look to the global scope for the variable \u2013 so the global variable never changes. So, our console.log() <\/code>will output 0 as our closest defined variable within that statement\u2019s environment is in the global environment. <\/p>\n\n\n\n
    Lexical Scope<\/h3>\n\n\n\n
    The lexical scope is one of the most fundamental concepts in JavaScript. It\u2019s the idea that the creation of a function or of a variable will be accessible to certain parts of the code and then inaccessible to other parts of the code. It all depends on where the declaration of each variable and function is.
    <\/p>\n\n\n\n
    Let\u2019s take a look at this block of code: 
    <\/p>\n\n\n\n
    const init = () => { \/\/ <== This is our outer function\n const var1 = 'Career'; \/\/ outer scope\n const second = () => { \/\/ <== This is our inner function\n   const var2 = 'Karma'; \/\/ inner scope\n   console.log(var1); \/\/ Career\n   console.log(var2); \/\/ Karma\n   return var1 + " " + var2;\n };\n \n \/\/ console.log(var2); \/\/ undefined\n \n \n return second();\n};\ninit();\n \n<\/pre><\/div>\n\n\n\n
    Here we have a set of nested functions. The init() <\/code>function declares a variable called var1, declares a function called second and invokes second()<\/code>. 
    <\/p>\n\n\n\n
    When the compiler passes through this code the first time, it takes a high level look at what we have:<\/p>\n\n\n\n
    1. init() <\/code>function<\/li>
    2. invoke init()<\/code><\/li><\/ol>\n\n\n\n
      At this point, we can\u2019t see anything else inside the init() function \u2013 we just know the function exists. When our init() func is invoked, the compiler takes another high level look at what\u2019s inside the function:
      <\/p>\n\n\n\n
      1. var1<\/code><\/li>
      2. second() <\/code>function<\/li>
      3. invoke second()<\/code><\/li><\/ol>\n\n\n\n
        The init() <\/code>function knows nothing about what is going on inside the second() <\/code>block. It can only see what is in its lexical environment<\/em> \u2013 its surrounding state.
        <\/p>\n\n\n\n
        Each nested function is in a smaller container, like a set of those Russian matryoshka nesting dolls (see top of page for example if you\u2019re unsure of what they are). The dolls only know about what\u2019s going on inside their container and what\u2019s already occurred or declared\/read in the parent. The largest doll for example only knows that the next doll in its container exists. It doesn\u2019t know about any of the other dolls in the set, just what\u2019s in its lexical environment (its state) and what\u2019s already happened (the outer scope). 
        <\/p>\n\n\n\n
        In essence, we know two things:
        <\/p>\n\n\n\n
        1. The outer scope can\u2019t see the inner scope.<\/li>
        2. The inner scope has access to the outer scope. <\/li><\/ol>\n\n\n\n
          Because the outer cope can\u2019t see what\u2019s going on in the inner scope, we can safely say that this is a one-way relationship. Inner can see and use variables from the outer scope, but outer can\u2019t see inner. This is called lexical scope<\/em><\/strong>. 
          <\/p>\n\n\n\n
          The beauty of lexical scoping is that the value of a variable is determined by its placement in the code. The functions look for the meaning of a variable inside it\u2019s local environment first \u2013 if it can\u2019t find it, it moves to the function that defined that function. If it can\u2019t find it there, it moves up the chain to the next defined function.
          <\/p>\n\n\n\n
          This becomes a very important concept in JavaScript that will come up time and again as you learn more about JavaScript frameworks and how they work. You can pass down from the outer, but you can never pass \u201cup\u201d in the other direction. This is very important as we get to the major topic at hand: closure<\/strong>.<\/p>\n\n\n\n
          Closure<\/h2>\n\n\n\n
          Closure\u2019s definition is very similar to that of lexical scope. The main difference between the two is that closure is a higher order function and lexical scoping is not. A higher order function has one basic characteristic: it either returns a function or uses a function as a parameter. 
          <\/p>\n\n\n\n
          Closure is a function that can access its lexical scope, even when that function is being invoked later. 
          <\/p>\n\n\n\n
          Both closure and lexical scope have their own variables, can access a parent function\u2019s variables and parameters, and can use global variables. Let\u2019s walk through the following code: 
          <\/p>\n\n\n\n
          function greeting() { \/\/outer scope (parent function)\n const userName = "CrrKrma1952"; \/\/ parent variable\n function welcomeGreeting() { \/\/ inner function\n   console.log("Hello, " + userName); \/\/ accesses parent var\n   return "Hello, " + userName; \/\/ terminal statement\n }\n return welcomeGreeting; \/\/ returns a function (which makes it HOF)\n} \/\/ end of greeting()\n \nconst greetUser = greeting(); \/\/\ngreetUser(); \/\/  Hello, CrrKrma1952<\/pre><\/div>\n\n\n\n
          1. greeting() <\/code>function exists, but we don\u2019t know the contents yet. <\/li>
          2. greetUser<\/code> exists, but don\u2019t know contents yet<\/li>
          3. greetUser() <\/code>– this invokes the previous line, which, in turn, invokes the greeting() function. <\/li>
          4. userName declared<\/li>
          5. welcomeGreeting() <\/code>exists, but don\u2019t know contents yet<\/li>
          6. Return statement below the welcomeGreeting()<\/code> block returns that very same function<\/li>
          7. console.log(\u2018Hello, \u2018 + userName)<\/code>; Our console.log here can access the parent scope to get the value of userName<\/li>
          8. Terminal statement that ends the function and destroys the meaning of the variables inside the code block.<\/li><\/ol>\n\n\n\n
            In this code, we are passing around information by nesting functions together so that the parent scope can be accessed later.<\/p>\n\n\n\n