What is THIS in JavaScript?

[@OfficialDevTips]

The follow-up video on class property arrow functions over at Fun Fun Function: kzbin.info/www/bejne/q3TYhYSPm51jfLc

[@codenameunknown3791]

What i really like about this channel is that those two guys are really representing a developer point of view. They don't edit their videos that much, because they don't want to appear like they are "perfect in everything". Instead, they leave their complete workflow unedited, and in that way other developers can see that learning is a process of committing errors and removing them after. So great to see this kind of natural way of learning and teaching, it is very rare on youtube where everyone wants to be percieved as "perfect". Much love and respect from Belgrade, Serbia.

[@OfficialDevTips]

Thank you SO much for saying this. It is exactly what we hoped would be apprecieated about it!

[@matthewburson2908]

@@OfficialDevTips Yes, I really enjoy the authentic feel as opposed to the overly scripted thing. It still maintains focus and is relatively concise, but showing the "behind the scenes" is where some of the most magic happens.

[@paulkevinkoehler9490]

Yes, you guys are great... keep em' coming, please!

[@khmaieshassen]

yeah i agree with you, when i watch other videos i start questioning my self , why i can't code like that ? why i always edit my code many times ..... and when i watch mpj i regain my confidence

[@pavsoor]

Thank you! David questioning everything is really helpful!

[@OfficialDevTips]

It is! We both really like this dynamic that were getting going.

[@arsalmehran3698]

This is easily the best video on "this" ever. I've watched so many tutorials that just explain it at you and the information just doesn't stick with me. But they way you guys played around with it, testing things as you go, moving the function in/out of the object just to see what happens was really valuable. Also I know everyone else is saying it but David asking questions was great, and MPJ explaining things more the further we got was really helpful. Looking forward to the funfunfunction episode!

[@bigexpectation]

Thanks for clarifying - all my confusion just this-appeared!

[@a.c.n.9421]

I love it!!! Love your sense of humor!!!

[@shaikhahmaasher979]

I like the way when David gets the concept and re-explain it in his way, really liked his thinking. I would love to see like this video more, MPJ suggests a problem/topic and David & us figure out the solution.

[@davidvideauortega287]

This video is amazing, because it clearly demostrates how *this* works in Js, using a simple example. Also, David's questions are suuuuuper helpful, many of those I would have asked myself. Probably the best video I've found on the topic! So thank you both! I've been following both DevTips and FunFunFunction for a while now, and I really admire your work!

[@andreicucea]

I really love how you guys go through all the mistakes, talk about why someone could make them, and how to fix them.

[@OfficialDevTips]

That cool inline evaluation thing is called Quokka: quokka.devtipsshow.com

[@AIforScale]

Is it ever rewarding to watch an expert GET it. Eureka moments are wonderful. I love the way you guys work through this problem in a way that makes sense to YOU, which then makes sense to US.

[@iaml2909]

My goodness I love it the way u guys did this. Thanks

[@kawaentertainment101]

This is really awsome, am happy you've taken again this subject and make it more like understandable for today, I remember watching one of your vids talking about this years ago and that was also awsome but that day and today javascript is not the same maybe the notion has changed i don't know

[@zafarali3817]

This video on THIS is simply awesome... great great work.

[@hcmlopes]

This was very informative, can we have more of this style where you break down some of the weird parts of JavaScript

[@ablgmv]

Thank you very much for this episode, waiting for the next one!

[@probablywrongpodcast8790]

love the authenticity of this video.

[@ReneHoffmann194]

I love these dialogs and boys!

[@travholt]

Thank you. Very succinct explanation of something I have not entirely grasped before.

[@artihlec]

Let's say we have play.bind(obj). Method bind returns such a function, source code (code in its body) of which is identical to play function except 'this' keyword is changed to obj. I think it's a good explanation.

[@Lemon19870406]

Correct me if I am wrong on two points. First: when i console.log breathe.bind(dragon), it outputs the whole function which is nameless kind of, so thats why we need to put that into a new variable to be able to call it, otherwise would be not possible. Dont know, it is me being newbie in JS trying to understand it. Second: Why do we need to bind? For example: the way u wrote it was button.onClick = dragon.breathe and it returned undefined when called button.onClick(), when bound than 'this' points to dragon object and outputs the string, but the same I can get without bind() writing it button.onClick = dragon.breathe() and call it button.onClick and 'this' points to dragon object and outputs the string. So why do we need to bind here then?

[@OfficialDevTips]

First: Your understanding is correct! Gold star! Second: It's a bit hard to parse what you mean because the code you've written is not correct ('button.onClick = dragon.breathe()' would assign the return string of the breathe call to onClick). However, I assume that you actually meant to write: button.onClick = () => dragon.breathe() That code achieves exactly the same thing as bind does. i.e. it returns a breathe function where 'this' is forever bound to dragon. So, to answer your question directly: No, we don't have to use bind to bind, we can of course also write code that does the same thing as bind, in this case with arrow functions. So which one should you use? Well, the arrow function is slightly terser: button.onClick = () => dragon.breathe() button.onClick = dragon.breathe.bind(dragon) However, they BOTH have the same disadvantage: They needed to be made in the first place because _this_ is super hard to manage. If dragon was created with a factory function, the assignment would simply look like this: button.onClick = dragon.breathe This is both much terser AND more memory efficient because no new functions need to be created.

[@Lemon19870406]

Thank you for a quick reply. I am still trying to wrap my head around that second part, what onClick becomes after bind()? Would it be correct to say that onClick kind of becomes the same as breathe(), a function? Because as i see after button.onClick = dragon.breathe.bind(dragon) to call it, u write button.onClick(). But than it is like a class.. I might be ahead of myself here :D

[@Lemon19870406]

Now when i am thinking, it is true, it becomes a function, because with bind() we create new function which is nameless, the only difference that it is assigned to object.

[@firstfiverugby]

what microphone do you guys use when recording?

[@benogidan]

Good job guys what plugin are you using that seems to evaluate the values of properties before-hand

[@h1ghland3r]

Great video and very informative! Thanks guys

[@sriramr6705]

This video explains most of my questions, Thanks a lot David & MPJ. But can you explain how 'this' works in 'strict' mode?

[@petarkolev6928]

Amazing video guys! I love you! :D

[@vinayakhurkadli222]

how to get out put on typing //? next to the line of code in VS code editor

[@DanielPersson]

``` const dragon = { element: "fire", breathe: somefunction.bind(dragon) } ``` would that work?

[@OfficialDevTips]

No. dragon does not exist at that point.

[@Djzaamir]

I think other languages have also implemented this concept of first class functions Like java has introduced streaming API which looks pretty much like JavaScript higher order functions

[@ddRjM]

What is the "collab" extension you used on vscode? oO

[@mattcroat]

Great episode!

[@HashimWarren]

18:43 it's so satisfying to watch the aha! moment!

[@ariell121]

I would like to see a crossover between DevTips and Academind

[@JacobMGEvans]

The self loathing and self public shaming over thumbs up was hilarious =D

[@NeoChromer]

QUESTION: In react, why does using => (arrow functions) yields the same as when binding this to the method? Now I'm a bit confused on this :/

[@nicholasmaniccia1005]

Arrow functions treat 'this' differently than a normal function expression or function declaration. I believe an Arrow functions 'this' value is the same as the 'this' in it's lexical scope (where it is written physically in the code). So they say an arrow function lexically binds it's 'this' value. I am new to understanding this topic so I hope someone will confirm this or correct me where I am wrong or misleading.

[@josefpodany7368]

Q: Can you tell me what olugin ib VSCode you used to use for //? showed the contents of the variable?

[@OfficialDevTips]

Quokka: quokka.funfunfunction.com

[@rickyu1978]

challenge: if you guys could do a async/await fetch or axios call to external api WITH a recursive retry (upon failure, like a 500 and a 401 response auth error) Added biscuits to be given if you can retry n times.. more fatty biscuits can be obtained with a time delay between each recursive call. (not a exp. backoff but just a 800ms delay) more trans fat fatty biscuits if you do it within 13 lines of code... added msg and sodium biscuits if you make it functional.

[@kunalpal8636]

Can we bind two function together

I enjoyed!!! i think we got the formula for this channel!! big Hug to Both.

[@OfficialDevTips]

Yeah, I think we're getting there!! Thank you so much!

[@sholomaber]

MPJ what do you have in your hand there to fidget with?

[@OfficialDevTips]

David has a roll of blue electrical tape he keeps fidgeting with. We should put up a fund to give him unlimited fidget spinners access. MPJ's fidgeting is... More... Mystical.

[@OfficialDevTips]

it's an adapter thingee for my microphone stand :D /mpj

[@xelaksal6690]

very nice approach

[@MrVisheshsingh]

Wow! thank you very much

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@monkeque911]

Hey, guys! What plugin do u use for real-time evaluation in vscode?

[@OfficialDevTips]

Quokka

[@ksubota]

Don`t forget to bind the dragon!

[@sergiokagiema9658]

You guys rock!!!

[@tkdevlop]

make a video about hooks what you love about it what you hate about it love to see!!!!.

[@1Hippo]

The video was good and helpful, but imho a bit long for the amount of information. I think i got it completely at about 22 minutes, the repetition in the last 10 minutes was really not necessary. I would have preferred some in depth stuff instead, like history or how it works in the context of "class" and arrow functions. Is that planned for the FFF episode?

[@OfficialDevTips]

No history but exactly class property arrow functions 👍

[@1Hippo]

Thanks, looking forward to that!

[@OfficialDevTips]

MPJ here - I hear your feedback, but judging from the comments, many people didn't get it at all. The problem with explaining material is that some students will get the concept in the first minute, some will get it in the third, some the 22:nd, and some not at all. Again, I hear you, but it's a bit tricky to know what to do about the issue. Is it really a problem? Is there anything lost if you just stop watching once you get it? If so, is there any way we could mitigate that, by skip points in the video, perhaps?

[@bodolawale5448]

what happened to fun fun function

[@OfficialDevTips]

It’s alive and kicking!

[@RajeshSriMuthu]

happy Deewali from INDIA

[@Tymon0000]

What is that?

[@rne1223]

Cool beans!!!

[@cmnweb]

This is very simple but at same time can be very confusing

[@johnbox5540]

you guys are great! so fun to watch! HASDHUASHDUUA (LOL in pt_br )

[@medmorh]

hey guys I have tried blinding Array haha it's working too.. thanks a lot bros and deliver my peace to Travis nelson

[@davidsalleyezonme1283]

This = refers the object who call it.

[@OfficialDevTips]

No, I would not say that is a correct way of describing it. The object does not call anything here - the object has a property which is referencing a function, and when something calls that property, this will be set to the object, unless we've bound the function to something.

[@nuttygold5952]

Nice!!

[@mazyvan]

THIS videos needs some intro guys

[@ggreatminds]

My favourite source of diabetes when I was in Sweden. That and Daim and Marabou. and kannelbullar. and scones. and generally fika time @ work and uni

[@OfficialDevTips]

Hahaha yeah we have a quote a bit of those. Glad you survived.

[@OMorningStar]

button.onClick = dragon.breathe.bind(dragon); Edit: You guys did something different. Is their anything wrong if I used bind on dragon.breathe.bind(dragon); ? I figure breathe is a reference to the function...so there shouldn't be any issues, but I'm not sure. Thanks in advance. Edit two: I was pausing and trying to solve before playing again, please disregard my previous edit.

[@OfficialDevTips]

Hi! I'm super cofused by the question, can you clarify?

[@OMorningStar]

​@@OfficialDevTips I thought I had the wrong answer when I saw button.onClick = someBreatheFunction.bind(dragon); vs button.onClick =dragon.breathe.bind(dragon); , I was pausing the video so I could solve it before seeing the answer. No issue, I understand this.

[@OfficialDevTips]

Okay, glad you got it sorted!

[@jasperzanjani]

like if the only reason you watch is because you want to hear Matias say "reyex"

[@nonumen]

I am breathing dirt :D

[@BrianDriesenga]

A light bulb (albeit very dim) went off in my head after watching this. Thanks!

[@akinozgen]

global returns undefined in browser. interesting...

[@tonyvice6661616]

i think global is used in node environments and they were comparing it to "this" On the browser, if you reference "this" it will show you the window/document elements

[@akinozgen]

@@tonyvice6661616 yeah I'm pretty sure. But there is a pale memory in my minds that I think I used global in browser many years ago. Like early jquery times. Then it showed undefined and I'm a little bit surprised

[@natqe4049]

but you talk on THIS before

[@OfficialDevTips]

So?? It is both interesting and can be really frustrating when it bugs out! We could do 10 videos on this!

[@natqe4049]

@@OfficialDevTips i love you

[@guillemgarcia3630]

@@OfficialDevTips no pun intended

[@OfficialDevTips]

🤦‍♂️🤦‍♂️🤦‍♂️🤦‍♂️ got the joke

[@chrsbll]

TIRADE PLEASE

[@getmorpheeus]

This is so confusing

[@axelvazquez2452]

Arrow functions solve this problem ;)

[@MarcelRobitaille]

It can still cause problems if you don't know what's going on.

[@Pirsanth17]

@@MarcelRobitaille yes especially if the arrow fn was created in the global context eg. if the function is a property of an object literal defined in the global scope. In that case this will be bound to the global object (window in browsers)

[@Pirsanth17]

The problem is that it takes on (or remembers) the this value when the arrow function was created

[@AlouiMohamedhabib]

30FPS vs 50FPS eyes blown 😲

[@OfficialDevTips]

haha, yeah, we're going to buy matching cameras eventually, but it's a tad bit expensive.

[@utoddl]

THIS doesn't depend on a context; THIS /is/ a context. Bind instantiates a function that will run within the bound context, i.e. what THIS refers to.

[@elusiveraps]

button.onClick = _ => dragon.breathe(); is better, no?

[@dimashur]

no offense, but are you always going to cover beginner topics on this channel? how about something more advanced and interesting? code reviews, random open source contributions etc?

[@OfficialDevTips]

Hi! Yes, Devtips is for new developers, yes. You might want to check out our other channel Fun Fun Function which is targeted towards developers one year into their first job.