We all know that JavaScript quizzes can be... awful and confusing π The pointless foo bar baz questions ruin all the fun of JavaScript and often just cause even more confusion!
Last year, I made a GitHub Repo with tons of JavaScript questions that aren't questions like "tricky" or "NaN === NaN", but rather focus on more realistic situations. I thought it would be fun to make it into an interactive game series here on Dev.to, with animated explanations wherever possible! π₯³
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 β¨
1. What's the output?
Explanation
With the bind() and call() method, we can decide to which object the this keyword should refer. In this example, we're saying that the this keyword within the sayHi function should refer to the person object by calling both bind and call on the sayHi function π₯³
Although the bind() and call() methods both allow us to specify which object the this keyword should refer to, there's a tiny difference:
-
bind()only returns a copy of the bound function -
call()executes the bound function immediately
First, we log sayHi.call(person, 21). The call method executes the (bound) function immediately, which results in Lydia is 21.
Then, we log sayHi.bind(person, 21). The bind method returns a copy of the bound function, meaning that we're simply logging a new, copied function π
2. What's the output?
Explanation
Whenever we declare a set a variable equal to an object, we're not actually giving that variable the value of that object. Instead, we're giving it the value of a reference (or actually pointer) to that object in memory! β‘οΈ
In this case, we give the person variable the value of a reference (pointer) to the object { name: "Lydia" } in memory.
Then, we declare a variable called members. The value of members is a reference to that array in memory!
The first element in the array that members has a reference to, is the object that person has a reference to. When we set objects equal to each other, we're actually creating a copy of the reference. This means that now person and the first element in the members array point to the same object in memory! π
Then, we set person equal to null. This means that person no longer has the value of the reference to the { name: "Lydia" } object in memory: it now has a reference to null! π Since the first element in the array that members has a reference to has its own, copied reference, the change of the value of person does not affect the first element in that array!
Since the first element in the members array still has a reference to the object { name: "Lydia" }, that object gets returned when logging the first element!
3. What's the output?
Explanation
We have a list of groceries! One item in this list is our favorite item, and one item in this list is our least favorite item.
First, we want to get the value of our favorite item, the grapes! One way of doing this, is by using the find() method. The find method returns the value of the item in the array that we're trying to find: the string with the grapes in this case "π". We assign the variable favoriteItem to that returned value.
Since the string "π" is a primitive data type (it's a string! π₯³), the string gets passed by value. This means that the value of favoriteItem is a copy of the item "π" in the groceries array, without containing any references to the groceries array.
We no longer want the grapes as our favorite item! Instead, we want to make the avocado "π₯" our favorite item. The variable favoriteItem gets reassigned with the value "π₯".
Then, we want to find the index of our least favorite food: the string with the cheese "π§"! In order to find the index of the cheese, we can use the indexOf method. To the indexOf method, we pass the value of the element of which we're trying to get the index in the groceries array: "π§" in this case.
Perfect! We now have the index of our least favorite item. Time to replace the least favorite item with some good food: a pizza "π". By replacing the value of the item on a specific index, we're modifying the groceries array.
Cool! We just changed the least favorite item in the groceries array. When logging the groceries array, ["π
", "π", "π"] got returned.
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 (35)
My score: 1/3. I think that's expected, I have construction going on right now at home...always great explanation like every time!
Keep them coming! πͺ
Nice! π And thanks!
π, where can i find congratz-canvas snippet?
i like da postz
thankz π
Agreed! π
I prefer to use pointer (in fact I just added a quick change to that section), the main reason I keep on using "reference" is because I've noticed that there is tons of resources out there online that only talk about references, I'm afraid it'll lead to more confusion to not mention them here.
But it's definitely worth updating the explanation! Thanks!
Again your the hero that we dont need but we deserved!! GOAT!!
π³ 0/3!! π³
But I tried my hardest and i also had fun. Thanks you Ms. @theavocoder! π
Hey, I'm diggin these little quizes. Great content! π»
Hey, what do you use for the animations?
3/3!
Thanks for the quiz and explanations. I really like your quizes and articles!
As mentioned in comments, references, pointers, memory addresses might be little bit confusing. That's why I like Dan Abramov's JustJavascript course which explains things little bit differently. He creates robust and thoughtful mental model of things happening in JS. Just variables, values and wires between them π
0/1π€ thank a lot. I had fun. Wait more. π¨βπ»
Thanks for the awesome content! Looking forward to see more of these here on DEV! π