THIS keyword - Beau teaches JavaScript

The 'this' keyword refers to the object that "owns" the JavaScript code.
💻 Code: codepen.io/beaucarnes/pen/GWPO...
🔗 Resources: developer.mozilla.org/en-US/d...
codepen.io/somethingkindawier...
🐦 Beau Carnes on Twitter: / carnesbeau
⭐JavaScript Tutorials Playlists⭐
▶JavaScript Basics: • JavaScript Basics Course
▶Data Structures and Algorithms: • Data Structures and Al...
▶Design Patterns: • Design Patterns - Beau...
▶ES6: • ES6 - Beau teaches Jav...
▶Clean Code: • Clean Code - Beau teac...
-
We're busy people who learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get great references with our open source community.
Join our community at freecodecamp.com
Read great tech articles at medium.freecodecamp.com

[@raywillaimjhonson]

The more I try to understand "this" the more my brain wants to fall out of my head.

[@BobbyBundlez]

hope u figured it out. im like 75% there haha

[@S4LTYT]

same

[@midknight3350]

Ditto. I'm having a hard time picking it up.

[@user-yq7ip3jy3r]

Same , like whats is good for? !LOL

[@grandpowr]

I understood because I read the book You Don't Know Javascript, but I think you should slow down a bit for newer people, otherwise I found it well made, really love this series you're doing.

[@masterwayne9790]

Thank you it helped me in others ways too

[@user-yq7ip3jy3r]

agreed too many hard codes that u even forgot the lesson that u should understand!

[@GabeDStudios]

Let me re-arrange some sections to make it a bit clearer and beginner friendly: var o = {a: 1, b: 3}; function add(c, d) { return this.a + this.b + c + d; } console.log(add.call(o, 5, 7)); console.log(add.apply(o, [10, 20])); It's good practice to declare all your variables and values first before any functions and by doing this, it becomes easier to read. Here we create an object with two properties which is "a and b". "a" set to 1 and "b" set to 3. "this.a" and "this.b" is pointing to the properties of the variable "o". apply and call are METHODS for the "this" keyword, think of them as attachments for your gun that enables it to do other stuff. the rest should be self explanatory if you studied the basics well. If not, gotta go back to start, you might have missed a few lessons.

[@GraceandWisdom]

I really would like to grasp these concepts, but it seems as though JavaScript is some sort of 'bottomless pit' of information that cannot be explained in a simplistic terminology. Thereby leaving a beginner unsure about what one learns.

[@abdelkrimeljaouhari2370]

You have not simplified the issue ,but thank you for the video

[@novanoskillz4151]

this has to be the least beginner friendly tutorial on the subject. I feel like I have to be a brain surgeon to follow along.

[@thomascarlton82]

Yeah this. is a terrible video. I thought the point of these types of videos was to teach to people that dont already understand it. Seems like a lot of programming videos are for people that already know the stuff and want to watch someone else do it too

[@doublesushi5990]

@@thomascarlton82 indeed.

[@curiousindividual634]

you haven't answered the main question: Why TF do we need "this" in the first place? It does absolutely nothing. Is it some sort of inside joke?

[@thomascarlton82]

This video is funny, for people that don't know what this is. It's does nothing to help us but for those that understand it, they are saying its a great video. Lmao this is dumb

[@ww4102]

If you listen very carefully, the first 14 seconds explain a lot! " The value of 'this' when used in a function, is the object that owns the function"

[@oufcena5092]

The keyword this is just a place holder for the object it's been called upon so, this.prop = o.prop;

[@VanHaleNNoodle]

When Beau says 'Created' about O (When talking about arrow functions around minute 7), does created mean when it is first called ? Intuatively, I would have thought, it was created in the O object.

[@core_dump]

Great info! Understanding core JavaScript is so important... its more important than learning frameworks.

[@manas_singh]

Excellent explanation, I loved it

[@Azar211]

Many thanks for this serious video about the subject far away from the "hello world" ones , one should be concentrated , stop and replay to get the best of the video , thank you again

[@markodjuric3905]

Thanks for this!

[@beccaarauz]

for someone who's starting in JS this video was very fast, I find it a little hard to understand.

[@heatherbeckman1767]

I've been studying JavaScript vigorously for the last 4 months, I don't know if it's necessarily the video that is making it confusing or the complexity of the subject matter itself. I've been reading resources and have watched several videos and still haven't quite grasped "this." I just noticed that your comment was from a year ago, so if you kept up with your JS journey you are probably more advance than me. Did you ever find a better resource for "this" or can you explain it better?

[@oufcena5092]

@@heatherbeckman1767 The keyword this is just a place holder for the object it's been called upon so, this.prop = o.prop;

[@heatherbeckman1767]

@@oufcena5092 Thanks. This is actually quite helpful.

[@mrsoccer9449]

@@oufcena5092 Now that make sense

[@c0mpuipf]

great stuff beau just a question - I read that if you have a method within an object and inside that object you've got 2 functions, the second function will lose the this context and will refer to the global object (the var that = this shtick)

[@BeauCarnes]

You may be thinking of callbacks. I think that is what happens when one function calls another after it finishes.

[@christianrodier3381]

This is very helpful thanks

[@threeone6012]

Great upload!

[@rmb1831]

Complicated example. Must use easy to understand parameters.

[@gabrielsoloman5000]

great lesson!

[@freyjaaldebaran7275]

Lmao i thought i had understood but then i read the comments and obviously i didn´t understand

[@AwB]

Great stuff

[@mdabutalha3165]

short time best explanation.

[@DomedIsDoomed]

Loving this video

[@Andrei-xb1pz]

Yes it was fast, but there is a pause button for that. Thanks for explaining THIS in its various contexts. It's not the definite guidebook, but it was very helpful to me!!!

[@hashtagtrends9886]

Thank you!

[@skepticbubble3166]

Very neat explanation for 8:47 video thanks!

[@nehagavali9416]

Which editior are you using

[@Azim2562]

thanks

[@Drachensingsang]

I think this video misses structure as well as the point: Why? How "this" is interpreted depends on when it gets "resolved" so to speak. If you would have explained why it gets when resolved, one wouldnt need to store all this empty knowledge in his/her brain but rather would understand the underlying concept, which is less amout of data and way more powerful.

[@TheLoniard]

Eureca! Thank you for this movie. I have got it!

[@justinherrera6790]

too fast, too advance. your reference is mdn and I thought that this video will give me a best explanation but I was wrong

[@redouanemahjoubi1914]

what program are u using ?

[@oufcena5092]

Why not bother to the description?

[@gustavokuthumy404]

My head spinned the 1st time I watched, but I could I understand it in the 2nd run. Thanks!

[@shankerm3959]

Thank you, but you need to slow down much more. I kept getting lost and eventually stopped at the half-way point.

[@namangupta1817]

can anyone tell me why i am getting o.f() is undefined instead of value 8 ??

[@BeauCarnes]

I'd have to see the rest of the code to know for sure. Maybe you could put it on codepen.io and share a link.

[@namangupta1817]

Thanks a lot for such a quick reply. Actually, i missed the f:f part in object declaration part .. that's why it was throwing an error that .. f is not a value associated with o . But now it has been resolved :D :D .. thanks a lot for this awesome series

[@perfectigbadumhe113]

Didn't understand sheet

[@sevakk.939]

great, great, great

[@terrancekent7887]

Slow down & get a new mouse lol. But thanks for the help.

[@nowyouknow2249]

Bad way to teach. I had to stop the video halfway to avoid complications. Slow down and put the learner in mind next time.

[@Beam28]

Not the best explanation of "this". "You Don't Know JS" is where you need to read.

[@jincypaul05]

Can you share the link of "You Don't Know JS" ?

[@justinherrera6790]

true

[@inononeeee]

[@stocktrade9655]

this tutorial is so confusing

[@awekeningbro1207]

This was confusing.

[@irfansindhi5091]

Just stop clicking

[@Doda100creative]

This video could save a whole day wasted in 8 minutes

[@aalez1983]

those mouse clicks are so loud I had to stop 1 minute in the video because it's distracting from the subject

[@KL4NNNN]

worst among the most incompetent people who tried to explain this.

[@josemaribautista7552]

thanks but i hate it

[@ShoSidney]

most confusing tutorial...

[@ZooDinghy]

JavaScript is disgusting. Utterly disgusting!

[@AgrabATC]

Worse explanation ever! It confused me more.