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!
Top comments (41)
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!
You're subtly wrong. Of course, you're completely right within the terminology of C++, but it is wrong on a moral level to use that terminology when explaining JS.
Many young people learn JS today. They have no idea a dinosaur such as C++ even exists, let alone that it has some quite technical definitions for notions such as references. It served Bjarne well (he had no choice, because he had to be backward compatible with C terminology), but it is high time we leave those exotic redefinitions behind. (Gosling tried to do it, but he did it halfway and the result it even more confusion.)
Young people today (in general, not CS-minded population) have no idea what "pointer" means (except as a designation for a certain finger:)), but they have a very good idea of what is a "reference" (google.com/search?q=define+reference). It is something that refers to the object in question. When we refer people to certain books in bibliography, it's perfectly understood that there are not books themselves in the bibliography (nor their aliases:-P), but references to them.
Let's use the word as it's intended to be used, and in the process demystify at least a bit of that impenetrable CS lingo. Yes, calling the JS variables "object references" will confuse you if you intend to implement JS in C++, but who would want to do that? :-D
Note: this is going to be a long discussion. I enjoy it very much, but I don't understand DEV enough to know whether it is a good etiquette to hijack a top comment like this. So, Lydia, if you feel we're not providing value to your readers, just say so and we'll find a different venue.
I agree with everything in that sentence except "early on". Seriously, has the first language you've learned been C++?? I know it wasn't in my case. The concepts that are important in the early stages of programming are quite different from ones that are important in the long term, and that's fine -- in all human endeavors. That is what separates apprentices from masters.
If you knock down a beginner (who is just trying to grasp the syntax) with undefined behavior, there is a good chance they'll never get up anymore. They'll just conclude programming isn't for them. (I've seen it!) Which you might say is just fair, but I think that is the real shame. Just a clash of value systems, I guess.
Absolutely. Languages are relevant for many different reasons. COBOL was relevant because of a huge library, FORTRAN because of its numeric capabilities, C because of portability, JS because it runs in a browser, Python because the programs are a joy to read, Lisp because... well, Lisp was never relevant. :-Q
C++ is mainly relevant because modern C compilers (which were goaded into compiling C++ too) are the most complex software the humankind has ever produced, by an order of magnitude. Many decades will pass before we accomplish something similar for any other paradigm. (See Rust as a perfect example of how hard it is to get such a project off the ground, despite having intelligent hardworking people and a much better paradigm.) So if we just want to get as close to the metal as possible without tying our code to a particular type of metal, there really is no choice.
But of course, that criteria mean perfectly nothing to beginners. For them, "runs in a browser" or "natural readability" are much more relevant. And we can not blame them for that. For me, the criteria was "It is hardwired in my machine, so I don't have to wait while it loads from tape", so I chose BASIC.
So do a test. Take someone without C-centered education, draw such a diagram and ask them to put in words what they see. They'll use "connected to", "describes" or even "is a value of", and you might get them to produce the word "reference", but you'll never get them to say "pointer". Simply because they've never heard of that word in that context.
It hasn't. Bibliographers use it all the time. Even programmers, for example when they write LaTeX documents, use \ref to refer to a label. They don't use \point. :-P It just seems so if you live in a C-centered world.
Absolutely. Only, in my opinion, "precise" is precisely opposite from what you say. To be precise is to call a concept we're discussing, a reference. To use "a reference" for "an alias" is imprecise to the point of being incorrect. Nobody does that, except C++ programmers.
About passing by reference: that's a completely separate can of worms, but if you insist, we can discuss that too. There are two undeniable truths: first, everything is "pass by value", if we call that what is passed "a value". Pass by address in C is nothing more than passing the address by value, for example. The true importance of the phrase comes only when speaking of a concrete variable, say "pass x by ...". Then we want to say that ... of x is passed (by value, of course:). ... might be x's address, reference, its value, or even its name (in some old versions of ALGOL).
Second undeniable truth is that if you only know of two types of passing from Pascal, and you speak about them in the context of previous paragraph, you'll inevitably be confused here, because passing in JS is neither of those. It's only by serious language twisting "when you declare a Dog d, d is not really a dog, but a pointer to a dog" that you manage to shoehorn it into one of these buckets. But it explains nothing, precisely because of the first undeniable truth: every pass is by value if we call that what is passed "a value". But if it doesn't correspond to what people usually think when they speak about the value of the object, it's simply misleading.
That's emphatically not what I'm saying. I'm asking to use the proper terminology, "proper" being defined more broadly than Bjarne Stroustrup.
You probably mean "pointers exist in the implementations of all languages, and that's really true if those implementations are written in C (which they usually are). But they don't have to be. You can write a Python in Java (Jython), and its implementation really has no pointers. Anywhere.
If you really think pointers exist at the lanuage level, then you're simply not thinking broadly enough. There are no pointers in PROLOG, Haskell or Turing machines. Really. :-)
Ah, good old reductionism. It has never got us anywhere, but people still try. :-) OK, let's do this one too.
There is no "lowest possible level" (that we know of). I could as equally say that there is no way to store bytes, you can only store electrical impulses or magnetic orientations -- or even lower below, quantum states. On an even lower level, you don't store anything, you simply collapse the wave function of the memory into some observable state.
Now you'll say that this is ridiculously low, and more importantly, irrelevant for the topic. And that is completely true. But it is equally true for the modern beginner when you tell them about registers, bytes (in the context of memory), or machine instructions. It simply doesn't enter their mental model until much later. And that's a good thing. Our ability to progress depends on the always heightening the level of abstraction, leaving the details of implementation deep below. We must: there is a long journey upwards ahead of us. ;-)
About beginning with C++: it seems you agree with me. Only, I wouldn't say it's "irony", it's just a normal way the things are. It would be surprising if it were different. And wouldn't it be a great shame if you weren't a programmer today, just because C++ knocked you over one time too much when you were fragile? For example, you wouldn't have this discussion with me. :-F
Absolutely! But if you face the same circumstances on your first encounter with programming, that's not the lesson you will extract from it. Trust me, I've seen it (I teach many young people programming, usually using languages I didn't choose -- as you probably realized by now.) C++ has the highest "screw this, programming is just not for me" rate. (I'm sure Malbolge would have even higher one, but no school in my vicinity starts with that.;))
I hope I showed you that "low level" is very relative. I've seen people telling other people things like "Yeah, Django is very nice, but I like to think at a low level, how the Python beneath it actually executes -- it really helps me in my work." :-D
Yes, I see where you're coming from, but I must regretfully inform you that most of the things you've learned are by now false or at least obsolete. L1 cache is more important than registers, vectorized operations are a thing, execution is not sequential, memory access is not atomic, processors actually use quantum effects when executing some instructions, and ALUs do speculate about what's going to come next, being at some points more superstitious than my grandma. :-P
Low-level thinking might be useful when it is correct. With modern advances in technology, it's less and less so.
That's all I wanted you to admit. But in the meantime we've opened a bunch of other subjects... :-D
I understand that. I just hoped I could avoid this line of discussion since JS is neither. (Yes, it is pass by value if you redefine value, but I hope I have explained why I think it's unsatisfactory.) We don't pass values, and we don't pass references. We pass objects themselves. It's just a false dilemma (from my perspective, though I understand yours).
... and so the notion is finally free to be used in the true linguistical sense. Horray! :-)
So the solution is simple: don't teach it to them. :-) In fact, you can teach it to them using the true notion of reference. In Java, you can say truthfully that primitives are passed by value, and objects are passed by reference -- it will only confuse them if they heard from some C++ programmers that "reference" means "alias". But I'm sure no-one would do that to poor Java programmers. :-]
Hm, interesting. For a low level thinker, that's really strange. May I suggest you do that sometime? I think it will be a fulfilling experience. :-) I teach a course on compiler/interpreter design, but unfortunately it's in Croatian. I'm sure you can find decent ones in your preferred language. (If you want tips, Appel cs.princeton.edu/~appel/modern/ is really good, though verbose.)
Ah, in that sense, of course. Though even that's not a given: some early versions of Fortran had no dynamic memory allocation at all. Everything was static, and so could run directly from memory. Yes, you lose various niceties like recursion (you can't have a stack without indirection, of course), and functions could call other functions only to the depth of two:-), but people actually programmed in that monstrosity 50 years ago. (I'm sure someone will say that sentence for C in 50 years.:)
And about strings: do learn about Hollerith constants some time. Loaded directly from the source, together with the length, statically. Beautiful stuff. :-D There are more things in heaven and Earth, Horatio, Than are dreamt of in your philosophy. ;-)
So, it seems we agree on everything after all. How nice. :-D
About that compiler course... I didn't tell you the most important thing. I teach it using Python (and a little framework of mine, just to do bureaucratic tasks like counting lines and characters for nice error messages, and buffering characters and tokens in case you want to go back in the stream). That's the only way I can produce a working compiler in 20 hours. And that's why I told you there are no pointers in it. (Yes, we use CPython, so there are pointers in the implementation of Python, but as you said, if you just mean "indirect access to memory", it's bound to appear somewhere down the ladder of abstraction. The point (yeah, bad pun:) is that there are no pointers in the source language, no pointers in the target language (we mostly compile expressions to some stack-based VM, and transpile commands to things like JS, which is pretty much the universal architecture nowadays -- se webassembly;), and no pointers in the implementation language. The people writing those certainly don't think in terms of pointers.
Of course, being a low level thinker, you'll probably say it's cheating, and you'd want to use C++ as implementation language, and (if I estimated your age correctly) something like x86 as the target. But my perspective is that you'll just spend more time (and increase the risk of giving up) while not learning anything essentially new. "I guess it depends on what type of thinker you are and what you enjoy in programming.", as you said. :-)
As they say, necessity is the mother of invention. You don't know you can do many things (like survive 4 days without food) until you have to. ;-) BTW both things (surviving 4 days without food and using Hollerith constants regularly) are extremely bad for your health. There are good reasons we don't do them anymore. Kids, don't do this at home. ;-)
Youth is neither good nor bad---at least that's something we old farts say to each other for consolation. ;-)
x86, on the other hand, is mostly obsolete, but that shouldn't necessarily stop you---since your aim is not to produce something useful, but to understand things better.
π³ 0/3!! π³
But I tried my hardest and i also had fun. Thanks you Ms. @theavocoder! π
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 π
2/3, not so bad π.
I didn't know about the difference between bind and call, actually I've never used call ,just bind. But know I've some idea how it work xD thanks a lot
Make more quizzes like this, plx
Again your the hero that we dont need but we deserved!! GOAT!!
2/3!
I totally loved it @theavocoder! I always get confused b/w
function.prototype.callandfunction.prototype.bindhence, I got it wrong! But hopefully, it will help me remember for the next time.Also, an amazing way of teaching via clear GIF explanations. Wonder how did you make them? Found super helpful in understanding.
Keep 'em coming! π
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?
Hey, I'm diggin these little quizes. Great content! π»
Hey, hey, confettis FTW! Nice work Lydia.
It reminds me of some old exercises I've set up for DOM selection using JS. I've added some sound effects to spice up the game a bit. :)
Still remains under development: codepen.io/kostasx/pen/WLmdwe
Thank you for all the work that you put in making these concepts as comprehensible as possible.
Keep it up!
3/3 :)
Thanks !
What do you use for creating your animated explanations ?
Hi @lydia,
What did you used to your GIF animations/illustrations?
Hi Lydia! Just dropping by to say that your quiz is fantastic, and I can't wait to see the next parts. Amazing job β€οΈβ€οΈ
Can I just say thanks @lydiahallie . I like your visual concept and one thing I find particularly interesting about this quiz is your use of 'let' and 'const' where it really matters.
Hey, what do you use for the animations?
i like da postz
thankz π