DEV Community

Take 'this' Quiz, Understand How 'this' Works in JavaScript

Annie Liao on February 09, 2020

Among all the abstract ideas JavaScript has to offer, the 'this' keyword can be one of the most challenging concepts to grasp. On the surface, 'thi...

Read full post

Patrick Charles-Lundaahl • Feb 10 '20

Nice! A quick, well-done test of this knowledge.

My goto whenever anyone asks about this is always You Don't Know JS (github.com/getify/You-Dont-Know-JS...).

Chi • May 20 '20 • Edited

As someone who learned about the self keyword (Smalltalk) and learning about this in JS, the article helps a lot! Especially that arrow function! So does this mean that it is better to create a Class for call instead of just a block variable? That way you can instantiate the Class call.

Annie Liao • May 21 '20 • Edited

Glad it helps, Chi! And thanks for mentioning Smalltalk -- I had to look it up haha. I don't think there's a preferred way, it all depends on your use case. Also, JavaScript's class keyword is not really a true class as in other object-oriented languages like Smalltalk. I found this deep-dive article, hope it helps as well: scotch.io/tutorials/better-javascr...

Eugene Karataev • Feb 10 '20

Thanks for the fun quiz.
I was able to answer every question correctly thankfully to this post here on dev.

JavaScript - The "this" key word in depth

Sagiv ben giat ・ Aug 21 '19 ・ 9 min read

#javascript #webdev #vue #react

It helps to figure out this value for every possible case in 5 simple steps.

Annie Liao • Feb 10 '20

Loved the flow chart in that post. Thanks, Eugene!

James Nylen • Feb 10 '20

Hi Annie, a couple of small corrections...

In the explanation for examples 2 and 3:

And because the global object does not know anything about say() function, 'this' is undefined.

Should be something like this instead...

And because the global object does not have a caller property, this.caller is undefined.

In the explanation for example 2:

(if you're using a browser console, you might see "null" (Firefox) or "[url referring to the window object]"(Chrome) instead of "undefined")

I tested in Chrome and Firefox and I get undefined in both browsers. This makes sense, because in these examples this.caller is equivalent to window.caller, which is undefined (unless some code on the current page has set this property).

Annie Liao • Feb 10 '20

Thank you, James! Yes. That makes much more sense. I was googling around trying to find the simplest explainer, only to complicate my own thought process. Really appreciate your input :)

z2lai • Feb 16 '20 • Edited

It's good to practice 'this' like this but there's always a whole bunch of other scenarios that might still trip people up. The best thing to do is to have some theory to solidify the understanding:

'this' is an object created for every Execution Context that is created (on program startup and on every function invocation).
'this' can change based on how/where the function is called/invoked.
There are four patterns of invoking functions that define the context of the function being called:

function invocation (e.g. says())
method invocation (e.g. call.says())
constructor invocation pattern (when you call a constructor function with the 'new' keyword - e.g. var person = new Caller())
apply invocation pattern (when you provide your own context while calling the function with say.call() or say.apply(), or if you explicitly bind the context with say.bind()) Here's a really good article about these four patterns (read until the React part): reactkungfu.com/2015/07/why-and-ho...

LeeWhite98 • Mar 16 '22

1) 'this' is an object created for every Execution Context that is created (on program startup and on every function invocation).

I think it's also important to mention that arrow functions don't get own this keyword - they can use this keyword of their closest regular function parent

Annie Liao • Feb 16 '20

Couldn't agree more. Thanks so much for providing an overarching concept around 'this'. That could've been a better opening for 'this' post (pun intended).

Sam • Feb 10 '20

I actually got 100% on this but I am constantly getting 'this' wrong.

Having it in this format really made me think about where the invocations and definitions were happening.

Really helpful exercise for a relative novice like me - thanks Annie!

Annie Liao • Feb 10 '20

Just gotta keep practicing. Thanks for following along, Sam! Made my day.

Django Janny • Feb 10 '20 • Edited

Nice !! You should add other tricky ones with something like :

newCall.call(call);

and :

newCall.bind(call)();

Annie Liao • Feb 11 '20

Thanks, Django! I actually thought about that, but then I'd have to introduce call, apply and bind, which might turn this little quiz into a full-fledged code challenge lol.

xr280xr • Aug 20 '21

Very nice! I've been reading other's attempts at this and have just been getting more confused but this lays out some straight forward rules.

FWIW, This sentence is confusing to me, "Here, we assign a new variable to the says function inside the call object." Unless I'm misinterpreting, I would describe it more as, "Here we assign the says function inside the call object to a new variable."

Thank you for writing this up!

Annie Liao • Aug 26 '21

Glad you find this quiz helpful! And thanks for the feedback – I have rephrased it accordingly:
"Here, we declare a new variable, newCall, and assign the says function inside the call object to newCall."
Hope this clarifies.

Peter Hoffmann • Feb 11 '20

Just to be nitpicking the correct solution for challenge #4 is not "Undefined called, too!" but "undefined called, too!" (lowercase).
Besides, thanks for the refresh.
The hardest part for me was to remember that an object doesn't have to be new'd to create it's context.

Annie Liao • Feb 11 '20

Haha, good call. Thanks, Peter! That's a good reminder for me too, especially when working on more complex projects.

Andrey Smolko • May 6 '20

Hey, there are nice tasks=)
If you have a plan to prepare next episode of this keyword challenges then have a look at my post about this in setTimeout callback:
dev.to/smlka/easyspec-how-does-set...

Maria Ines Montenegro • Feb 12 '20

Nice quiz! Just had challenge # 2 wrong...helped me realize I didn't have a full understanding of arrow functions

Annie Liao • Feb 12 '20

Thanks Maria! Yeah, that one messed me up too. That’s why I put them side by side. Glad it helps :)

Anirudh Ramesh • Feb 29 '20

This was pretty great! Thanks :)

Justin Wozniak • Feb 10 '20

Nice quiz. Nailed it ♥

Darryl Young • Feb 23 '20

Thanks for sharing, Annie. That was fun.

Keff • Aug 19 '20

Wonderfull test. It made me doubt myself, although I got every one right!! 😝

I learned this mostly from FunFunFunction, I don't know what videos exactly but he made me understand it quite well.

Ali Nazari • Feb 11 '20

Very nice way of teaching. (Although I answered all correctly 😜😜)

Michael • Feb 10 '20

Thank You.

Anshul Negi • Feb 11 '20

It is good to see the efforts you have put.

Jonathan Blanco Hernandez • Feb 24 '20

Thanks... great article!

Juan Manuel Vallejo • Feb 10 '20

Very well illustrated 👏

Geofrey Aduda • Feb 10 '20

Very well put , I always confuse the two! Using arrow and using none when dealing with 'this'

Johnbelieve • Aug 26 '20

Thanks for the insight and quiz 😊😊😊

Harshit Jain • Mar 3 '20

This was a really great exercise Annie. Thank you for this.

Aleksandr Hovhannisyan • Feb 10 '20

On the surface, 'this' seems like an intuitive keyword that simply refers to the environment (or scope) it resides in.

Note: It's actually context, not scope.

Annie Liao • Feb 10 '20

Ah, I see. So context is object-based, and scope is function-based (reference here: ryanmorr.com/understanding-scope-a...). Just corrected it. Thanks so much for clarifying!

wanmaoor • Feb 11 '20

4 of 4, all right.