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! 😃

💡🎁 JavaScript Visualized: Generators and Iterators

Lydia Hallie ・ Jan 16 '20

#javascript #node

🎉👨‍👩‍👧‍👧 JavaScript Visualized: Prototypal Inheritance

Lydia Hallie ・ Jan 3 '20

#javascript #computerscience #webdev

lydiahallie / javascript-questions

A long list of (advanced) JavaScript questions, and their explanations ✨

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?

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 }.

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 }.

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

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

2. What's the output?

Explanation

In this code snippet, we have a generator function 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}.

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 😃

We want to get the resolved values of each promise. We can do so, by awaiting each promise in a for await .. in loop.

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?

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.

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!