⭐️ Interactive JavaScript Quiz #2
Published: 2020-03-09 06:28:11

This is the **second** post of the JavaScript Quiz series! Make sure to check out the first one 🥳 Before starting this quiz, it may be useful to read through some of my older Dev.to posts! 😃

> {% link https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 %} {% link https://dev.to/lydiahallie/javascript-visualized-prototypal-inheritance-47co %} {% github lydiahallie/javascript-questions no-readme %} Of course, the examples are still minimal and don't show "the best/most performant way to do it". Sometimes I have to do things a certain way in order to be able to show certain behavior that may happen, and explain it that way 🙂

Okay, ready? Let's get started!

---

#### 1. What's the output? 

{% jsfiddle https://jsfiddle.net/lydiahallie/wt3cafde/4/ result %}


##### Explanation

In this code snippet, we have a `person` object and two arrow functions: `changeAge` and `changeAgeAndName`. The two arrow functions expect a parameter `x`. If we don't provide a value  (or provide `undefined`) for `x` while invoking either `changeAge` or `changeAgeAndName`, the value of `x` will be equal to `{...person}`. 

First, we invoke the `changeAge` function. We pass an object: the `person` object! The default variable `{ ...person }` won't be used: we provided a value after all 😊

The `changeAge` function increments the value of the `age` property on the object that `x` holds a reference to, by `1`. This means that the value of `age` on the `person` object will be incremented by one. 
The `person` object is now `{ name: "Lydia", age: 22 }`.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/j5hwu1hwa40wymvz6v95.gif" width="600" />

Then, we invoke the `changeAgeAndName` function _without_ providing a value. This means that the value of `x` will be equal to the default value `{ ...person }`, which is a new object with the copied properties of the `person` object: `{ name: "Lydia", age: 22 }`.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/ha5kudoh10qt0qhb5rev.gif" width="600" />

The `changeAgeAndName` function increments the value of the `age` property by `1`, and sets the value of `name` equal to `"Sarah"`. 

<img src="https://dev-to-uploads.s3.amazonaws.com/i/kg3o6ijyg3mchloknz4c.gif" width="600" />

When we log the `person` object, we'll only see the modification that was made by the `changeAge` function: `{ name: "Lydia", age: 22 }` 🎉

<img src="https://dev-to-uploads.s3.amazonaws.com/i/tj4a3ot10s6m2jvsu7ud.gif" width="600" />

---

#### 2. What's the output?

{% jsfiddle https://jsfiddle.net/lydiahallie/ofpL19t3/2/ result %}


##### Explanation

In this code snippet, we have a <a href="https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36">generator function</a> `range`, which receives a `start` and `end` value. It loops over the values that range between the value of `start` and `end`, and yields a resolved promise for each value 🔥

When we invoke the _immediately invoked function_, we set the variable `gen` equal to the iterator that got returned by the `range` generator function.

If we were to manually call the `next` method on the `gen` iterator, we'd see the _resolved promises_ for the values within the range that we provided.  We passed the values `1` to `3`, meaning that when we iterate over the iterator, it first yields `Promise {1}`, then `Promise {2}`, then `Promise {3}`.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/wye586k7406drj1hi165.gif" width="600" />

We can iterate over the yielded values of the iterator with a `for..in` loop. This way, we don't have to manually call the `next()` method each time 😃

<img src="https://dev-to-uploads.s3.amazonaws.com/i/aqw02ofjaukc8bxn5oj1.gif" width="600" /> 

We want to get the _resolved values_ of each promise. We can do so, by `awaiting` each promise in a `for await .. in` loop. 
 
<img src="https://dev-to-uploads.s3.amazonaws.com/i/yiictvu6lgysysl32lax.gif" width="600" />

With the `for await...in` loop, we can loop over the iterator and `await` each value. By awaiting the resolved promises, the resolved values get returned: `1`, `2`, and `3` in this case 💪🏼

---

#### 3. What's the output?

{% jsfiddle https://jsfiddle.net/lydiahallie/4chdotqw/3/ result %}


##### Explanation

We invoke the `getInfo` function. On the very first line of this function, we're trying to log the value of the `randomValue` variable.

<img src="https://dev-to-uploads.s3.amazonaws.com/i/7pujts4gc7ngmgd5zv27.gif" width="600" /> 

In this snippet, we see two variables called `randomValue`, both declared with the `const` keyword. Variables declared with the `const` keyword are block-scoped, and not _initialized_ until we get to the line where we actually declare them. 

Within the `getInfo` function, we try to access the block-scoped `randomValue` before the line on which we declare the variable. The "zone" within a block scope that cannot reference the variable yet, is called the _temporal dead zone_. When we try to reference an uninitialized variable, like we try to do by trying to log `typeof randomValue`, a `ReferenceError` gets thrown! ❌

----- 

How'd it go? Did you get all 3 right? If yes, awesome! 🎉 If you made some mistakes, no worries at all! 

Hopefully you can learn something from the explanations, and take that new information into consideration the next time you may run into behavior that may seem "unexpected" 🙂

Feel free to reach out to me!

<table>
  <tr>
 <td>✨ <a href="https://www.twitter.com/lydiahallie">Twitter</a></td>
<td>👩🏽‍💻 <a href="https://www.instagram.com/theavocoder">Instagram</a></td>
<td>💻 <a href="https://www.github.com/lydiahallie">GitHub</a></td>
<td>💡 <a href="https://www.linkedin.com/in/lydia-hallie">LinkedIn</a></td>
<td>📷 <a href="https://www.youtube.com/channel/UC4EWKIKdKiDtAscQ9BIXwUw">YouTube</a></td>
<td>💌 <a href=mailto:lydiahallie.dev@gmail.com">Email</a></td>

</tr>
</table>