# ES6 Exercise 1

**URL:** <https://group.classcentral.com/t/es6-exercise-1/35766>\
**Category:** JavaScript Bootcamp\
**Created:** [September 20, 2022, 6:58pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766 "2022-09-20T18:58:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![stevenr2945563](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@stevenr2945563](https://group.classcentral.com/u/stevenr2945563)\
**Post date:** [September 20, 2022, 6:58pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/1 "2022-09-20T18:58:03Z")

</div>

Ramon skipped over some of the write-up on this first exercise, but I am a bit confused by this bit of code:

```auto
let printNumTwo;
for (let i = 0; i < 3; i++) {
  if (i === 2) {
    printNumTwo = function() {
      return i;
    };
  }
}
console.log(printNumTwo());
console.log(i);

```

Since `i` is declared entirely within the scope of the `for` loop, doesn’t it cease to exist once the `for` loop completes? So then how does it even work to call `printNumTwo()` after the fact? By the time the function is called, the value it needs to return is based on a variable that seems like it should no longer exist.

---

<div class="post-metadata">

**Author:** ![syllie](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/syllie/32/6257_2.png) [@syllie](https://group.classcentral.com/u/syllie)\
**Post date:** [September 20, 2022, 9:37pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/2 "2022-09-20T21:37:17Z")

</div>

Hi Steven,

This is **really** a good question, and the explanation would probably go way beyond the scope of this bootcamp. The reason we have the ES6 section in the first place is because it _solves_ a few concrete problems that existed in earlier versions of JS. Notably “closures and loops”, which all have to do with scope. Before we had `let` and `const` there was no ‘block scoping’ but only function scoping and that caused quite some side effects.

I will link you to a (maybe too complex) example of a discussion, to see if that makes sense. A comment on that post explains largely what is going on:

> JS functions “close over” the scope they have access to upon declaration, and retain access to that scope even as variables in that scope change. Each function in the array above closes over the global scope (global, simply because that happens to be the scope they’re declared in). Later those functions are invoked logging the most current value of `i` in the global scope. That’s JS : ) `let` instead of `var` solves this by creating a new scope each time the loop runs, creating a separated scope for each function to close over. Various other techniques do the same thing with extra functions.

The full discussion is here:

> <https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example>

And a technical discussion of scoping here (this one requires quite some grit to get through)

> **[Variables and scoping in ECMAScript 6](https://2ality.com/2015/02/es6-scoping.html)**
>
> This blog post examines how variables and scoping are handled in ECMAScript 6 \[^1\].

Perhaps not the easy answer you were after, but I hope it provides some insights. Let me know if you have follow up questions.

---

<div class="post-metadata">

**Author:** ![stevenr2945563](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@stevenr2945563](https://group.classcentral.com/u/stevenr2945563)\
**Post date:** [September 21, 2022, 1:30pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/3 "2022-09-21T13:30:55Z")

</div>

So by “close over,” it means that the function kind of “locks in” the variable as it existed when it was declared? That would make sense, because if it didn’t work that way, the function would be otherwise fundamentally broken and uncallable.

---

<div class="post-metadata">

**Author:** ![syllie](https://sea2.discourse-cdn.com/flex016/user_avatar/group.classcentral.com/syllie/32/6257_2.png) [@syllie](https://group.classcentral.com/u/syllie)\
**Post date:** [September 21, 2022, 8:28pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/4 "2022-09-21T20:28:50Z")

</div>

Yes - you are on your way understanding that! But in our ‘var’ time this would yield undesired side effects (try it using var like the examples in the linked post). Thus the concept of ‘block scoping’ was introduced in ES6, using ‘let’ and ‘const’. It made some code less complex and solved some issues along the way. I believe that is the main reason for this particular lesson.

There are some videos ‘out there’ that describe JavaScript ‘the weird parts’ and explain this in close detail definitely worth watching when you are ready to move beyond the ‘beginner’ stage (don’t do that yet, it may be a bit too complex). But this one, explains succinctly what a closure is AND as bonus it shows what happens if you do use the ‘var’ variable instead. It used to be a trick JS interview question (and may still be used now):

[![](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/2X/3/3a19da6b02c13a47755aedadd1ad7c4d61a80927.jpeg "Closures Explained in 100 Seconds // Tricky JavaScript Interview Prep") ](https://www.youtube.com/watch?v=vKJpN5FAeF4)

(and it is less than 5 minutes 🙂 )

I hope that helps too!

---

<div class="post-metadata">

**Author:** ![stevenr2945563](https://avatars.discourse-cdn.com/v4/letter/s/bc79bd/32.png) [@stevenr2945563](https://group.classcentral.com/u/stevenr2945563)\
**Post date:** [September 22, 2022, 5:22pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/5 "2022-09-22T17:22:21Z")

</div>

This was super helpful. Thanks so much! And it’s good to know to be on the lookout for a trick question involving this concept.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/ccstudygroup/original/1X/36206832181ed26910a18e33d8bfef087cf661b1.svg) [@system](https://group.classcentral.com/u/system)\
**Post date:** [November 6, 2022, 5:22pm UTC](https://group.classcentral.com/t/es6-exercise-1/35766/6 "2022-11-06T17:22:44Z")

</div>

This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.