DEV Community

loading...
Cover image for ⭐️ Interactive JavaScript Quiz #2

⭐️ Interactive JavaScript Quiz #2

Lydia Hallie
@theavocoder | i like da codez
・4 min read

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! πŸ˜ƒ

GitHub logo 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!

✨ Twitter πŸ‘©πŸ½β€πŸ’» Instagram πŸ’» GitHub πŸ’‘ LinkedIn πŸ“· YouTube πŸ’Œ Email

Discussion (22)

Collapse
karataev profile image
Eugene Karataev

2/3

  1. This was a warm up question πŸ™‚
  2. I thought that I'll fail with this one, because I have almost zero experience with generators/iterators, but somehow figured the right answer.
  3. My belief that typeof operator is always safe even with undeclared variables was wrong πŸ˜”. Watch out for TDZ!
Collapse
lydiahallie profile image
Lydia Hallie Author

That’s great!!

Yeah there are some pitfalls when using the uninitialized variables haha, it’s not always very clear what you can and cannot do, I agree

Collapse
codeboy1010 profile image
codeboy1010 • Edited

This is a bit advanced that my understanding in JS but the explanations are well structured. The goodexplained details why my answers were incorrect summarized it very well an honestly made me say "why did I miss that" to myself.enjoyable to go through.I hope there will be part 3, can't wait.

BTW,what extension or app did you use to make this especially the code animation snippets?

Collapse
lydiahallie profile image
Lydia Hallie Author

That’s great, also feel free to let me know if you think I could improve my explanations anywhere. I’d like to include people from all levels! πŸ˜ƒ

I use Keynote

Collapse
juansimon666 profile image
juansimon666

2/3

I don't know much about generators/iterators but i will check that out.

Thanks for this kind of posts πŸ‘πŸΌπŸ‘πŸΌ

Collapse
lydiahallie profile image
Lydia Hallie Author

Thats awesome! Yeah generators are pretty cool once you get them, but you won’t see them that often like this β€œin the wild” lol

Collapse
iamraviprakash profile image
Ravi Prakash

For 3rd, if the variable was declared with var then it would have been undefined(hoisting). let and const are not hoisted.

Collapse
lydiahallie profile image
Lydia Hallie Author

Even let and const are hoisted (meaning, the engine does store them in memory, as seen in this gif), they just don’t get initialized with the default value of undefined πŸ˜ƒ

Collapse
bobby_valenzuela profile image
Bobby Valenzuela • Edited

Is this why a Reference Error is thrown? Because the JS engine knows not to use the global 'randomValue' variable? I.e., JS knows that the variable 'randomValue' is within the current block scope and thus the value of this locally-scoped 'randomValue' should be the preferred variable. So, although JS is aware of this local variable (because of hoisting) nonetheless the reference error is thrown because the variable cannot be referenced prior to being initialized (since we're using const here). Am I right about this?

btw.. ABSOLUTELY loving EVERYTHING you've done. From articles, your personal site, just amazing content all around. Thanks so much for all this amazing material!

I signed up to dev.to just to like your articles haha.

Keep up the great work!

avocados

Collapse
bobbyiliev profile image
Bobby Iliev

Great article! Love it.

Would you mind sharing the name of the tool that you use for creating those awesome gifs?

Collapse
avneeshroks profile image
avneeshroks

This made me realize I need to understand generator functions a ton better haha!! Great post and really well explained! Please post more :)

Collapse
donnyverduijn profile image
Donny Verduijn

Even though its visual explanation is powerful, sometimes i feel that certain aspects of Javascript need more explanation on why they are bad choices and what the alternatives are. Like why is there no explanation that object mutations are inherently a bad idea and how problems can be solved using immutable data structures. That would make the ability to answer these questions trivial.

Collapse
hgerber7 profile image
Hans Gerber

2/3
I haven't been around JavaScript for a while and the last question got me since I'm still from the "good" old var days and not fully familiar with how well JavaScript has adapted to certain features I know from other languages like Java.
Would definitely be happy to see this series continue

Collapse
marioruizfont profile image
Mario Ruiz • Edited

On 2.) I tried on the browser's console and on node.js but for..in was not working. I used for..of instead. Thanks for this mini quiz.

Collapse
puneethr43 profile image
PuneethR43

Thank you for these quizzes.πŸ˜„
Both JavaScript quizzes are awesome and they are really helpful 😊
Add more quizzes and problems like these.
Really helps to improve a lot.πŸ˜€

Collapse
hyftar profile image
Simon Landry

ReferenceError* instead of Erorr in the 3rd one :)

Collapse
lydiahallie profile image
Lydia Hallie Author

Darn typos :(

Collapse
vaibhavkhulbe profile image
Vaibhav Khulbe

Wowowo! I got all three correct! 🀩 Thank you for making these interactive posts! Great explanations as always πŸ”₯

Collapse
lydiahallie profile image
Lydia Hallie Author

Yay way to go! πŸ₯³

Collapse
daviluis321 profile image
Davi Luis de Oliveira

Very good article, how do you make these terminals and gifs?

Collapse
marioruizfont profile image
Mario Ruiz • Edited

ItΒ΄s a JSFiddle code snippet. And with the icons probably is just hexa code... not sure. Or a library inside DEV, probably check the help docs section πŸ₯³.

Collapse
amstr1k profile image
Sergey Fedorov

3/3