What is THIS keyword in JavaScript? - Tutorial for beginners

What is the THIS keyword in JavaScript? How does it work and why is it so confusing?
The THIS keyword, from the series "10 Things JS Developers Should Know"
by ColorCode.io, Sina Jazayeri
Full playlist here: • 20 Things JavaScript D...
This is episode 6 in a 10 part series I’m calling 10 things javascript developers should know but probably don’t. In this series, we’re going to cover some of the most fundamental and important parts of JavaScript that most of us don’t actually know, and barely touch. Today, for episode 6, we’re talking about the THIS keyword, how context and execution logic changes the value of the this keyword, and how arrow functions affect the value? Episode 6: The THIS keyword. Let’s go!
All the code from this series is available here:
github.com/ColorCode/js-10-th...
0:00:00 Intro
0:00:53 THIS in Global scope
0:01:40 THIS inside functions (methods)
0:06:25 Function.bind
0:10:03 Function.call
0:16:10 Function.apply
0:16:42 THIS inside Constructor functions
0:20:00 THIS inside callback functions
0:23:40 THIS inside arrow functions
0:24:26 Conclusion

[@ColorCodeio]

JavaScript THIS keyword explained - A deep dive 👨🏻‍💻

[@arod3295]

So I have a very important question. PLEASE help. So there must be more to the layers of seniority I should say to the concept of front vs backend…there’s more job titled for a coder of all levels. What are those many titles called? Web developer Front end Back end Web designer Programmer (which idk if that’s just another word for web dev or if that’s a proper title) Junior developer (idk if that’s another word for entry front end) What other titles are there? Knowing this would help people find a proper path to get started instead of aiming high like “I want to be a software developer” like I did 3yrs ago. Now I’m aiming for front end (if that’s right) and design web logic to interact with smart contracts (I want to work in the blockchain industry and a lot of the work is programming websites to interact with the contracts) Thank you

[@starkxz]

@@arod3295 There are many job titles and roles within the world of software development. Here are some common ones: Full-stack developer: a developer who can work on both the front-end and back-end of an application. Mobile developer: a developer who specializes in building applications for mobile devices. Game developer: a developer who specializes in building video games. DevOps engineer: a developer who works on the development and deployment of software through collaboration with software developers and IT professionals. Software engineer: a developer who designs, builds, and tests software applications. QA engineer: a developer who is responsible for testing software applications to ensure that they function properly. UX/UI designer: a designer who specializes in creating user interfaces and experiences for software applications. Product manager: a professional who oversees the development and management of a software product. Technical writer: a professional who creates documentation and user guides for software applications. It's important to note that some of these roles may require more specialized knowledge or experience in a particular area. For example, becoming a mobile developer may require knowledge of specific programming languages and frameworks, as well as experience with mobile app development. Ultimately, the best way to determine which role is right for you is to explore the different areas of software development and see which ones interest you the most. Consider taking online courses or tutorials, attending meetups or conferences, and talking to professionals in the field to learn more about the different roles and how you can get started in your desired career path.

[@cleanocavalcante]

Dear KZbin's Algorithm gods, please bless this channel with a million views per episode 🙏🏼😁. This content is absolutely gold. I've been learning JS for the past 2 months and I'm really benefitting from all this knowledge. Thank you so much, and keep up the fantastic work! Cheers from Brazil!

[@ColorCodeio]

Haha this is the best comment I ever got. Thank you. I'm glad these videos are helping. Message me on instagram if you have questions.

[@cleanocavalcante]

@@ColorCodeio You 100% deserve it!

[@omersoncruz1081]

Amen!

[@uzgurCoder]

Your wish granted😁😅😅

[@darksoulgamer5837]

This is an underrated channel! The explanation is mind blowing not confusing at all, please keep making videos on JS 🙏

[@ColorCodeio]

Great to hear that! More videos coming soon.

[@atlas8133]

'This' video should have at least 100 times more views. Pure gold if you've ever been confused about the intricate applications of 'this' in different contexts. He also covers .bind, .call, .apply as a nice bonus. My favorite video about 'this', simple as 'that'!

[@ColorCodeio]

Thank you for 'that'! ;)

[@axkongkong2819]

I watched your video on THIS...didn't understand anything......then i watched 10 other random videos on KZbin about THIS....did not understand anything. I gave up and went on with my day. The next day your 1 min video on THIS popped up, i watched that, and that was clear as day!!!! I followed up by watching this 24 min video, and everything was so clear!! I don't know if its just the time it took for information to absorb over 24 hours or i re-watched your videos a few times like you said at the end, in order to get it. One thing is for sure, this is the best tutorial on THIS and i am pretty sure i watched them all. Love your teaching style, very good examples and slight humor sprinkled around. Subscribed!

[@ColorCodeio]

That's awesome! Thanks for sharing and I'm glad it clicked.

[@irenashovel9244]

this is amazing! thank you so much for this deep dive!

[@asadmoosvi]

Love these videos! You explain concepts really well and in great detail.

[@ColorCodeio]

👍👍👍

[@RossieeissoR]

Style, pace, music, explanation, effects, even typing sound... everything is perfect.

[@ColorCodeio]

Thank you :)

[@salamina_]

Excellent explanations on subjects have always been a mystery to me. Thank you for making these tutorials, really insightful and entertaining.. dig your teaching style. Keep them coming!

[@ColorCodeio]

I appreciate that. Thank you 👍

[@Flipping_myFinds]

Always liked creating and designing. Programming is a new journey that I’m taking (haven’t had really good inexpensive sources to learn from)and I’m super glad I found you and I know your videos and courses will guide me finally the right way

[@ColorCodeio]

Great to hear! Best of luck in your journey and reach out to me if you have questions.

[@digitalfragrant]

The most underrated educator on YT. Production quality is also insane. Keep it up man!

[@ColorCodeio]

I appreciate that!

[@BHASKARARAOKONNA]

Your explanation and presentation of the video are so good that I couldn't even wait to share this to my fellow learners and also SUBSCRIBED. Really, you should have got more views and subscribers. Keep up the good work 😀😎🙏

[@starkxz]

This channel is the best when it comes to JS. Honestly it needs more views. Thanks Sina, keep up the fantastic work.

[@ColorCodeio]

Thank you!

[@kurisu26]

Best "this" tutorial I found. Thanks

[@erickchavez4551]

Nicely explained! thanks for the amazing quality of your videos. Took a bunch of notes to review after watching the video.

[@ebcoutinho]

These videos are helping me to fill the knowledge gaps I have

[@dipankarsahoo7119]

i watched a single video of yours and fell in love with your way of teaching, the background music, the humor everything loved it ..! subscribed

[@ColorCodeio]

Awesome dude 👍🏼

[@myashkov1975]

Simple, clear and perfect for beginners explanation of 'this' keyword, thanks, man!

[@ColorCodeio]

You're very welcome!

[@syedaun5410]

Please keep going with your videos. You are really easy to understand and fun to watch.

[@ColorCodeio]

Thanks :)

[@steelmantv]

Thank you! So helpful

[@user-vv5kw1ku2q]

What a great job, you're doing!

[@Fred-my9er]

This was so well explained with good examples. I probably need to rewatch it to remember everything but I understood it all.

[@ColorCodeio]

👍

[@namanjoshi5089]

gold mine which isn't known by many .. love this channel

[@TheAmanpro]

Thank you so much! Beautifully explained. Keep posting

[@ColorCodeio]

Thank you, Aman :) More coming next week.

[@nnex5]

This channel and Web Dev Simplified are the most helpful channels for Web Developers. Thank you!

[@ColorCodeio]

Thanks!

[@neria15]

this playlist need to be everywhere ! Thank you Sina!

[@ColorCodeio]

🙏

[@pushkarkumar5578]

love you man great work.

[@chrismills5307]

Amazing video, clear explanation, great communication and presentation skills, and covers all the ins and outs without making it overly complex.

[@ColorCodeio]

Thank you!

[@sudiptasaha8905]

Hey, your content really adds value to my skillset. Please do make more videos. Love from India ❤

[@towhid6476]

Loved the video explanation. I was following a JS course for a month and this one dominates all

[@ColorCodeio]

Great to hear!

[@michaelnorton9715]

Our WDD 330 Fundamentals of Web Development class at Brigham Young University - Idaho has this video as part of our notes! I like how you explained all of "this" ;) I enjoyed your video start and your energy throughout the video. I got lost on that last part where you set a time-out but I felt like I understand how to use "this" better than I did before. I need to watch your arrow function video. That's one thing that I get tripped up with. Thanks for all the time and work you put into making this video. Liked and subscribed!

[@user-kn4oi9oh4i]

Best explanation! I swear to god, this is amazing

[@MishraXE]

The best explanation of This 😍

[@ivo_sa]

man, i love your videos ! they are incredibly informative and also funny to watch !

[@ColorCodeio]

Thank you!

[@jatilyadav4000]

Content is just amazing I could'nt stop watching

[@ColorCodeio]

I'm glad :)

[@alainkaiser2697]

this is better than 99% of the blog posts out there trying to explain core concepts like this!

[@ColorCodeio]

🙏🏼

[@dream5.2]

'This' is too good. I'll never choose that

[@nynzxoxo]

You deserve so many more views and subs! This content is gold

[@ColorCodeio]

Thank you :)

[@MarstonH]

dude you are so real and good at explaining. this has helped a lot

[@ColorCodeio]

Thank you!

[@taunado]

Great production and all, thanks for sharing. +1 for providing purposeful and real-world use-case cases to provide the context for your teaching. My brain is constantly trying to work out the end goal and why what you're teaching has value, making it difficult to follow along.

[@ColorCodeio]

Much appreciated!

[@PatelBhaveshgo4glory]

Amazing explanation. Keep it up, sir!

[@ColorCodeio]

Thanks!

[@thiagoneves50]

This is really good! I'm very grateful!

[@ColorCodeio]

Thanks :)

[@programmingforfun4158]

I dont know how this type of content can only have 25k views

[@slaincore]

You are just awesome explainer/teacher! Keep going my friend!

[@ColorCodeio]

Thank ya

[@abhijeetbajpai1022]

Dude, I really love the way of teach things, Really Awesome !! The hat's off to you.

[@ColorCodeio]

Thank you!

[@HarelYeh...]

Really thanks for all the effort, it's really fun to watch and learn from you, you convey it in a pleasant way and not like a robot or excessive seriousness, just a pleasure.

[@ColorCodeio]

Thank you! ♥️

[@error0803]

Very good and very high quality video. Thank you. Learned a lot👍🏻

[@ColorCodeio]

Awesome. You’re welcome 👍

[@stepanterechshenko5435]

best explanation of "this" I have found and I was looking in 3 different languages on YT

[@ColorCodeio]

Glad to hear it!

[@ann_uken]

Thank you for the video, very well explained! 💥

[@ColorCodeio]

♥️

[@darksoulgamer5837]

Love these videos, but could you also share some real world use cases? Like for call, apply,bind etc. Even for this, why do we really need it

[@Genesis0_o]

You're a Legend

[@prakharpaw-de7vh]

came here looking for explanation on the original f***ing a**hole of JavaScript, aka the this keyword. Ended up watching the entire series. Thank you

[@ColorCodeio]

haha nice

[@nathalianobrega6917]

this is such a great video, thanks!

[@ColorCodeio]

Thank you!

[@user-vo8hn7yj7z]

Great explanation! By the way, what actually is the favorite feature mentioned in 2:54 ?

[@user-mw5bm2xh9x]

good stuff. thanks

[@yarinvanzikri]

love your content and attitude! am here just to say thanks!

[@ColorCodeio]

Awesome! Thank you!

[@uncoding_with_raj]

Amazing tutorial man.

[@ColorCodeio]

Appreciate it!

[@MuhammadUsman-fl7lo]

The channel needs more support !

[@ColorCodeio]

🙏

[@edhead76]

Is bind only used with the keyword 'this'? This is a great explanation, but I had to pause and rewind several times to grasp the concept more fully. Actually, to clarify, this is the BEST explanation I've come across, and I have been searching for the correct way to use 'this' for quite some time!

[@WaseemAbbas-lv5xm]

Awesome i love this course ❤ . Also make a tutorial on React

[@ayman3711]

great effort

[@stevecrabtree9141]

Just found your channel, you would be a blast to work with! I would be dying all day with your humor

[@ColorCodeio]

Who knows, maybe some day :)

[@ayushdixit8993]

You are great man!!!!!!!... Very well explained.... Thanks

[@ColorCodeio]

Glad it helped

[@jimkk159]

So good, help me a lot!!

[@ColorCodeio]

Glad to hear that!

[@oneofone_1333]

Man i stubbled on your content, love it!!!! Greetings from Switzerland

[@ColorCodeio]

Awesome. Thank you. One of my favorite places 🇨🇭

[@oneofone_1333]

@@ColorCodeio Ma man!

[@himanshuarora1910]

i really liked it when i can see the person who is teaching ,great work

[@ColorCodeio]

Thank you

[@havefun5519]

Cool explanation. BTW, the video quality is great, and the speed of the talk is good, like the clear accent.

[@ColorCodeio]

👍

[@user-lp5tk8tp6e]

Thank you very much:) love your sense of humor;)

[@ColorCodeio]

You are so welcome!

[@YeetYeetYe]

Great editing.

[@ColorCodeio]

👍🎥🎞

[@santhoshk9285]

keep rocking saanaaaaaaaa ... waiting for more 🔥

[@ColorCodeio]

More coming end of July

[@surf2553]

Yep, super helpful!

[@ColorCodeio]

👍

[@dineshreddy8915]

perfect, everything is perfect.... The concept , the video, editing , making us attracted, every thing is perfect expecting more video from you (react if possible)

[@aoniatraxler6897]

This is awesome, thanks :)

[@ColorCodeio]

You're welcome

[@tetianazhuchenko2182]

Your expectations are great 👍 Thanks

[@ColorCodeio]

Thank you!

[@andresfelipeladinoespitia]

Thank you very much man. I had to watch it a couple of times, but I finally got the whole *this* concept. Also, you sound 100% like Edward Snowden.

[@ColorCodeio]

Glad to hear it!

[@by2313]

I really like your classes. I'm using them in conjunction with a UDemy course and learning it from a couple folks is helping it sink in a bit more. I hope you do one on the Reduce method.

[@ColorCodeio]

Awesome. I may do one in August

[@davidmmadden]

@@ColorCodeio would also love one on reduce!

[@IlPandax]

As an italian brother, your italian is perfect! And also your Javascript! XD

[@ColorCodeio]

Grazie mille

[@aballahsameh3597]

So cool!

[@taylorwade1537]

.this is awesome and THIS is awesome. Thank you so much!!

[@ColorCodeio]

You’re awesome :)

[@randyafriansyah9340]

instant subscribe, this channel is really emazing

[@ColorCodeio]

Thank you

[@soniablanche5672]

I really wish arrow functions throwed an error if you tried to use the "bind" method on it. It would be a good way to detect if the programmer passed an arrow function instead of regular function as a callback.

[@TicTacTechYT]

love this channel

[@longingbydesign]

Thank you for your amazing videos. Please consider dropping the use of the non-standard innerText in favor of the standard textContent as many of your less experienced viewers will pick up that otherwise. innerText has its place (preserving linebreaks and whitespace), but in your examples its really all about textContent.

[@ColorCodeio]

Thanks for the comment. You obviously pay close attention to detail :)

[@nathanisong9393]

I love how you interact even though I am not still cool with it yet. But thanks

[@ColorCodeio]

👍

[@junhuama68]

Thank you for the video Sina. you said that you would do a video on semicolons. I couldn't find it. Could you please point me towards the right direction please?

[@anuragsingh-ts3nb]

best instructor which u cannot even get on paid course, after watching this i became his big FAN!!😊

[@ColorCodeio]

Thanks dude

[@weiguo2297]

Nice video. Help me to solve my confusion about the meaning of this in JSX callbacks.

[@ColorCodeio]

Nice!

[@bengen12]

you re great Jazayeri , god bless u , are you algerian ?

[@tonydaian8036]

Great content!

[@ColorCodeio]

Thanks

[@mohamedmahmoud-nj1uh]

your videos are amazing , you give tricky tips when you code , in a smpile ways , please make it 100 things you might don't knoOoOoOow in JS

[@ColorCodeio]

👍🙏

[@chriskasatka2095]

Amazing channel!

[@ColorCodeio]

Thank you!

[@Alex.Shalda]

thank you

[@TottiBln]

Thank You!!! Greetings from Germany, Berlin!

[@ColorCodeio]

Hello Germany 🇩🇪

[@hustle4902]

You will definitely go to heaven bro💯

[@boooloool6039]

Subscribed! because you said " i am qoli" amazingly 😀 and of course such a good video!

[@ColorCodeio]

Haha awesome #Qoli

[@razzchaudhary9184]

Amazing !!

[@ColorCodeio]

👍

[@Chris2phaBrown]

Looking forward to the arrow function gotchas

[@ColorCodeio]

Oh it's comin'!

[@Salah-YT]

Hello bro thank u so much for all ur nice videos I Love all ur videos but I work with javascript nearly a year now I'm still struggling so even I cant sort it one simple challenge in the CodeWar website so because I work hard on JS I nearly forgot HTML and CSS so please do some video on CodeWar problem solving so people will love the logic and sorting problem please thank u so much

[@szanka96]

I'm amazed that THIS can be explained without causing a headache. Hit the subscribe button. Thank you so much :)

[@ColorCodeio]

Glad it helped!

[@mohammadadeeb1341]

Dude make an full JavaScript course you will nailed it man🔥🔥🔥🔥

[@ColorCodeio]

It's coming... sign up on www.colorcode.io

[@mohammadadeeb1341]

@@ColorCodeio woooh!