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! π
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 π
lydiahallie / javascript-questions
A long list of (advanced) JavaScript questions, and their explanations β¨
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!
Oldest comments (25)
2/3
typeofoperator is always safe even with undeclared variables was wrong π. Watch out for TDZ!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
Great article! Love it.
Would you mind sharing the name of the tool that you use for creating those awesome gifs?
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?
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
Wowowo! I got all three correct! π€© Thank you for making these interactive posts! Great explanations as always π₯
Yay way to go! π₯³
3/3
2/3
I don't know much about generators/iterators but i will check that out.
Thanks for this kind of posts ππΌππΌ
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
ReferenceError* instead of Erorr in the 3rd one :)
Darn typos :(
For 3rd, if the variable was declared with var then it would have been undefined(hoisting). let and const are not hoisted.
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 π
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
Very good article, how do you make these terminals and gifs?
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 π₯³.
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.π