Javascript this keyword explained | in Gloable Scope, Object, Function, Prototype, Method, Class

Поділитися
Вставка
  • Опубліковано 19 гру 2024

КОМЕНТАРІ • 364

  • @manukarthikkattepuraramesh2727
    @manukarthikkattepuraramesh2727 6 років тому +123

    I got a new job because of your tutorials!! Thanks a ton!

    • @HK-sw3vi
      @HK-sw3vi 4 роки тому +9

      what happened to the old one?

    • @bob-ny6kn
      @bob-ny6kn 3 роки тому +12

      @@HK-sw3vi Released for watching yt videos at work, is my guess.

  • @slunkeh
    @slunkeh 5 років тому +30

    Fantastic teacher, this is the best explanation of "this" that I have come across by far. Thank you so much!

  • @alexbauer1193
    @alexbauer1193 Рік тому

    You are the best teacher I have found anywhere on the Internet to explain complicated JS topics. Thank you for your videos and clear explanations.

  • @winstonmisha
    @winstonmisha 6 років тому +106

    "Today we are going to talk about this keyword."
    "I'm sorry what keyword?" "
    "This keyword."
    "WHAT KEYWORD????"

    • @Techsithtube
      @Techsithtube  5 років тому +13

      this "this" keyword :)

    • @webmaster246
      @webmaster246 5 років тому +4

      var that = this;

    • @tommyzDad
      @tommyzDad 5 років тому +6

      "Not _What_ , _This_ ."

    • @Daniel_WR_Hart
      @Daniel_WR_Hart 4 роки тому +1

      This reminds me of that viral article that said "buffalo buffalo buffalo buffalo buffalo buffalo buffalo" was a grammatically correct sentence

    • @ChrisAthanas
      @ChrisAthanas 3 роки тому

      I wish he would say “keyword this” and not just “this” when referring to the keyword, and “here” to speak of some thing instead of using “this” everywhere

  • @rich143hkanda
    @rich143hkanda 4 роки тому

    unogona iwe mudzidzisi, you're a great teacher !

  • @prodigalScindian
    @prodigalScindian 5 років тому +1

    this was that much beautiful that my knowledge scope global, local and inner is expanded to more than just window. Thank you

    • @Techsithtube
      @Techsithtube  5 років тому

      Vikramaditya, Thanks for watching. I am glad that you were able to grasp the concept quickly.

  • @juanmejia7096
    @juanmejia7096 4 роки тому

    Extraordinary tutorial. Sets itself apart by covering all use cases of the 'this' keyword.
    My only humble suggestion, is that instead of overwriting on previous example, you could comment out and write the next example underneath. BIG THANKS!!!

  • @vegasvato55
    @vegasvato55 2 роки тому

    BEST EXPLAINATION I HAVE EVER HEARD... VERY WELL DONE SIR...

  • @dubeykivines9202
    @dubeykivines9202 4 роки тому

    OMG, I was not aware of 'this' keyword use case. Thanks alot for improving my skill set. One of the best tutorial on UA-cam. Hats off Man.

  • @stevebob240
    @stevebob240 3 роки тому

    'this' is very helpful, I know I'll get tripped up by it again in the future, but I'm feeling more comfortable with it.

  • @nikolaykoychev8261
    @nikolaykoychev8261 5 років тому +1

    Invest in video production meaning changing the quality of your cam(s), the post-production quality as well (meaning video edit) and you'll become a UA-cam content creator/programming guru/teacher that is to be admired. Keep doing what you do and one day you'll be one of the top teachers on 'this' platform. You sir, are amazing.

    • @Techsithtube
      @Techsithtube  5 років тому +3

      Thanks for your feedback . I have recently invested in better equipments. Thanks for an awesome comment.

  • @odorlessflavorless
    @odorlessflavorless 5 років тому

    "this" channel is a gold mine. As with all gold mines, took a long time to discover!

    • @Techsithtube
      @Techsithtube  5 років тому

      Ananta, Thanks for an awesome comment.

  • @_Spartan-107_
    @_Spartan-107_ 2 роки тому +1

    Hey man! Thank you so much for this. I opened my UA-cam and went to my "computer programming" page of suggestions. Didn't really know what I was getting into but this was great. You do a very good job of breaking things down in a way that others do not and make things understandable for the lay person!

  • @hayleyha9433
    @hayleyha9433 5 років тому +4

    great tutorial series. Thank you so much!! I has been learning programming for more than 1 year, I thought I knew Javascript but now I know I don't

    • @Techsithtube
      @Techsithtube  5 років тому +2

      Phuong, javaScript is a maze, I learn new things in js every day. :)

  • @ultieliot7450
    @ultieliot7450 4 роки тому

    First time I see your vids, dropped a like 6 seconds in, tried to relike it 1 minute in... Your explanation is phenomenal

  • @pratikfulkar4335
    @pratikfulkar4335 3 роки тому +1

    you are best
    and your Mock interview series was great

  • @Mona001-01g
    @Mona001-01g 5 років тому

    'this' is indeed a great tutorial. Prevented me from watching 'that' and 'that' and 'that' other tutorial to get 'this' one concept👍👍

  • @nizamuddinshaikh3185
    @nizamuddinshaikh3185 5 років тому +2

    For the first time, I came to know that so much goes in for 'this'! That's wonderful. Thanks for sharing.

  • @divyaindoor7351
    @divyaindoor7351 4 роки тому

    thank you for explaning "this" using various use cases ! now "this" is awsm !!!!

  • @Alex-zp6oi
    @Alex-zp6oi 3 роки тому

    You are just awesome. khub saras explain karyu tame.

  • @johnywalkie
    @johnywalkie 6 років тому +2

    Constructive comment: I agree with @adi stef that functions are actually objects. That's why statement at @7:36 is not correct. As a result THIS inside function refers to itself. Anyways, I like your work and i've learned a lot from you so thanks and keep the good work! :)

  • @VarshaFlimz
    @VarshaFlimz 3 роки тому +4

    Everyone starting to learn JS should see this first - very neat. Thank you techsith, you're a JS Angel :)

  • @TechAahar
    @TechAahar 4 роки тому +1

    Thank you brother now i learn how to clean my table, awesome tutorial :)

  • @rohitkudalkar92
    @rohitkudalkar92 2 роки тому

    with a number of examples, you have cleared it very nicely. thanks, love, and support.❤

  • @JJSeattle
    @JJSeattle Рік тому

    LOL I like the interruptions of emphasis, sounds like I leveled up on a video game, "tah dah dah dah"

  • @josuearreola9998
    @josuearreola9998 3 роки тому

    THID CHANNEL IS LIFE SAVER!

  • @somehappyguy6598
    @somehappyguy6598 6 років тому +48

    😎 Thanks for sharing and helping us to understand this beautiful language.

  • @kushalkumar4970
    @kushalkumar4970 4 роки тому

    Slow, clear, precise, good example, no confusion. Thank you!

  • @aydns7
    @aydns7 6 років тому +30

    great teacher

  • @luqmannbr
    @luqmannbr 5 років тому +4

    i love javascript after learning from you @techsith

  • @alexbaklanov3685
    @alexbaklanov3685 5 років тому +4

    This house allegory is indeed brilliant!

  • @youmyname
    @youmyname 2 роки тому

    VERY NICELY EXPLAINED TECHSMITH KEEP UP THE GOOD WORK

  • @sajithjulapalli3579
    @sajithjulapalli3579 3 роки тому +2

    So glad that I have found your lectures. I had aversion for Javascript, but after started following your tutorials, I really enjoy learning different concepts. Kudos for all the support you are providing.

    • @Techsithtube
      @Techsithtube  3 роки тому +1

      Sajith, great to hear! Keep on learning!

  • @journiqeducacao91
    @journiqeducacao91 2 роки тому

    ok this is a really good channel, thank you man you are a great professor

  • @manibuilders
    @manibuilders 6 років тому +1

    superb video. It cleared all my doubts on 'this' keyword

  • @j.almadhaji
    @j.almadhaji 6 років тому +1

    the best video from the best teacher..God bless you

  • @chingizshidenov547
    @chingizshidenov547 6 років тому +5

    The best explanation ever

  • @christophm.
    @christophm. 5 років тому +1

    Very nice and approachable explanation!

  • @tejeswarsahu2498
    @tejeswarsahu2498 6 років тому

    Thank you for your nice explanation on "this" keyword.The beauty of this video is you demonstrated the effect of 'this' in all possible different places at one place.Could you please point me to the starting js video(video 1,video 2,video 3....) so that I can watch one after other serially.Because If I am seeing your videos from here and there, there are something in each video which I do not understand.For example when I was watching this video,I was not clear about let,const.I hope you got me.

    • @Techsithtube
      @Techsithtube  6 років тому

      Hi Tejeswar, I have created a playlist of js fundamentals from beginning. ua-cam.com/play/PL7pEw9n3GkoVYU-ZKBrDnxIiiUn0YP-uO.html

    • @tejeswarsahu2498
      @tejeswarsahu2498 6 років тому

      Thank you very much...

  • @animeshsharma8285
    @animeshsharma8285 5 років тому

    My question is on the code used around 12:10, this, inside the inner function will give error in strict mode, I think it will point to window if non strict. So why it will point to window. Please tell me

    • @Techsithtube
      @Techsithtube  5 років тому +1

      Animesh, it points to global object because the way javascript was designed in early days it's not always intuitive.

    • @animeshsharma8285
      @animeshsharma8285 5 років тому

      @@Techsithtube thanks

  • @amundsenq1835
    @amundsenq1835 6 років тому +1

    Nice clip. May I suggest a few topics I'd like to learn from you?
    1. How do I know manipulating dom via javaScript is expensive? Any statistics in dev tools we can find?
    2. Manipulating window's location api to change url and dom elements without refreshing browser. Like react router can do.
    3. Can you explain how to avoid memory leak in browser? Like duplicating global event listener .
    4. What's lifecycle flow in pure javaScript or browser render flow?
    Thanks.

  • @adnantariq3346
    @adnantariq3346 5 років тому +3

    which this is a good example of the "this" keyword, I think it's a better sample of the .call and it's abilities.

  • @adamcrap
    @adamcrap 6 років тому

    Great analogy between the this keyword and a house!!

    • @Techsithtube
      @Techsithtube  6 років тому

      Adam, I believe that analogy that involves real life scenarios somehow helps us understand concepts. Thanks for watching!

  • @shauryaverma8780
    @shauryaverma8780 6 років тому

    Sir ,
    At 17:46 , you mentioned every object that cleanRoom creates, you'll have that method automatically available to it.' Please explain this part. It is cleanTable or createRoom. Where this method gets added??

    • @Techsithtube
      @Techsithtube  6 років тому +1

      Shaurya, first of all you have to have a constructor function . which has ability to create objects. more like a class. Now instead of adding method directly to it . you can a method to its prototype. so when you create object from this constructor function all the object will have a access to these methods via some reference. Here is a playlist that will help you explain all of these. ua-cam.com/play/PL7pEw9n3GkoW0ceMeoycg9D00YjPAbtvt.html

    • @shauryaverma8780
      @shauryaverma8780 6 років тому

      Thank you sir.

  • @purplesomeone
    @purplesomeone 4 роки тому

    I like your teaching style!

  • @adistef
    @adistef 6 років тому +2

    In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object.

    • @Techsithtube
      @Techsithtube  6 років тому

      yes but it doesnt have this . unless your function is used with 'new' keyword.

  • @salamina_
    @salamina_ 4 роки тому

    very clear explanation using simple scenarios. thanks!

  • @jithinraj7211
    @jithinraj7211 3 роки тому

    thank you for your neat and clean explanation

  • @sherinkonline
    @sherinkonline 5 років тому +1

    You are simply awsome, the way you represent things is easy to understand.
    Keep going
    All the best

  • @sweat_gamer5540
    @sweat_gamer5540 6 років тому

    The explanation is super and make the concept very clear. Just one issue with the music with header which comes before each scenario. It breaks the understanding flow and connectivity.

    • @Techsithtube
      @Techsithtube  6 років тому

      GOod point. I will consider correcting it for the next video.

  • @carlosnoelsotocalderon3375
    @carlosnoelsotocalderon3375 4 роки тому

    Hi, your video really help me, great explanation. I translated this video to latin spanish, hope it help others. Thanks.

  • @prakharmittal6295
    @prakharmittal6295 6 років тому

    Sir your explanation was good but I felt that you carry forward everything very fast. By this, I meant that like after applying a technique, discuss it again for a better explanation. I know some people will say that pause the video or watch it again but I think it would be more clear if you discuss it again or go through the last used technique again.

  • @BobbyBundlez
    @BobbyBundlez 4 роки тому +1

    holy crap this was a super helpful vid. thanks man

  • @ivanurbina2422
    @ivanurbina2422 3 роки тому

    Nice.This is the best explanation I saw using the analogy object as ‘home’. Very well explained!

  • @ramshankarkumar4222
    @ramshankarkumar4222 3 роки тому +1

    Nice explanation. I just have one doubt here. At 7:36 at this point of time, You said 'function is not an object' but everywhere I have read in javascript, everything is object and indeed function is also an object in JavaScript. So can anyone here clarify my doubt regarding this point ? Thank you!!

  • @bilgeturkkan6095
    @bilgeturkkan6095 6 років тому

    You are amazing, greeting from Turkey!

  • @itzelenciso7958
    @itzelenciso7958 4 роки тому +1

    Excellent! thanks for all the help!

  • @bindumanjunath6609
    @bindumanjunath6609 3 роки тому

    Great explanation with real world example. Thank you!

  • @metascopeinitiatives2550
    @metascopeinitiatives2550 Рік тому

    Thank you Techsith. I have subbed. I am grateful.

  • @tolstoy_was_right
    @tolstoy_was_right 4 роки тому

    you are a " GOD of 'this' " 🔥🔥🔥

  • @mikerodrigues3530
    @mikerodrigues3530 5 років тому +1

    Its explained in such a easy manner ... thanks

  • @mocococo2877
    @mocococo2877 4 роки тому

    Thank you for putting time and efforts to make this video. God bless you for that.
    Those sound brakes though I find them distracting and annoying.

  • @namangarg3933
    @namangarg3933 5 років тому

    Amazing approach and fantastic explanation !!

  • @kaiparado
    @kaiparado 4 роки тому +1

    Great lessons, crystal clear explanation. thank you

  • @leonardvanduuren8708
    @leonardvanduuren8708 2 роки тому

    Thank you. The best explanation out there.

  • @Katharthik
    @Katharthik 5 років тому

    Thank you techsith. You just earned my patronage! Keep it up brother

    • @Techsithtube
      @Techsithtube  5 років тому

      Thanks Karthik . Keep on learning brother!

  • @HukMarta
    @HukMarta 6 років тому +2

    Thanks so mush for such a comprehensive explanation!)
    Must say your work is really significant. I've been watching your channel for a couple of months and I've already learned a lot.
    Also, your tutorials are very helpful for preparing for interviews!) I've already recommended 'Techsith' to all my developer friends))
    Great job, keep going ;)

    • @Techsithtube
      @Techsithtube  6 років тому

      Thank for recommending my channel to your friends :)

  • @limitless9483
    @limitless9483 5 років тому +1

    very good teacher thanks( subbed &liked )

  • @topazmuigai965
    @topazmuigai965 5 років тому +1

    I'm learning quite a lot, thanks!

  • @kamalsharma2839
    @kamalsharma2839 2 роки тому

    Just to correct you "function is also an object in JavaScript." At 7:38 told function is not an object. Though it is, like other nonprimitive types

  • @maggychoi5384
    @maggychoi5384 4 роки тому

    your lecture helps me a lot to figure out :D thanks so muchchchhc :D

  • @spacewad8745
    @spacewad8745 6 років тому +19

    I am in love with javascript.

    • @Colstonewall
      @Colstonewall 6 років тому +4

      I'm not. Try Python, then come back and tell me that, lol.

    • @MrC0MPUT3R
      @MrC0MPUT3R 5 років тому +3

      Try TypeScript

    • @iaml2909
      @iaml2909 5 років тому

      @@Colstonewall nahh
      C is much much bettler.

    • @DiogoSantos-ln1nz
      @DiogoSantos-ln1nz 4 роки тому

      @@Colstonewall Any particular reason why you're learning both? Like Front End and Back End?

    • @Colstonewall
      @Colstonewall 4 роки тому +1

      @@DiogoSantos-ln1nz Well, they go together. It's kind of hard to make a REST API if you don't make a back end too.
      The backend stuff isn't very hard. At least in my experience, using Express is very simple and can be learned quickly.
      Plus, most of the people I learned from, would make a backend in their tutorials along with the frontend.
      Those like Brad Traversy, CodingTheSmartWay, Academind etc, all made the backend when teaching.
      You kind of had to at that point in time. There weren't these REST API's that are all ready to go services like they have now.
      Hopefully I explained this well, but if you don't understand my ramblings, let me know and I'll try to answer better.
      And, if you need ANY, any help with anything, let me know and I'll help you if I can. If you want my email address, let me know.

  • @srinumajji501
    @srinumajji501 6 років тому

    nice tutorial, Every thing is cleared with 'this'
    thanks Sir

  • @mela7611
    @mela7611 5 років тому +4

    i love the harry potter type music in between the topics

  • @alex-dk2rj
    @alex-dk2rj 6 років тому

    Yo you just saved me after hours of struggling with this! Great teaching.

  • @kartikisahu4938
    @kartikisahu4938 5 років тому +3

    Thanks, Techsith for "this" tutorial :)

  • @triumphmantra968
    @triumphmantra968 5 років тому +1

    you saved my day bro...

    • @Techsithtube
      @Techsithtube  5 років тому

      I am glad that you got it Rohit. Keep on learning!

  • @saikiranrudra1283
    @saikiranrudra1283 6 років тому

    you explain concepts really well

  • @qianbang_
    @qianbang_ 6 років тому

    Liked after the analogy with the house

  • @rittickdatta1209
    @rittickdatta1209 4 роки тому

    Awesome clarity in your videos man, great stuff!

  • @saranshmehra8577
    @saranshmehra8577 5 років тому +1

    when we declare variable using let in console then why it does become part of window? however var variable becomes part of window object.?

    • @Techsithtube
      @Techsithtube  5 років тому

      Console runs at global level that is why . var is weird i would not use it. Some things JavaScript does , only JavaScript knows. :)

  • @VinothKumar5403
    @VinothKumar5403 6 років тому +18

    Liked before watching..

    • @Techsithtube
      @Techsithtube  6 років тому +5

      Thanks for the premature like !

  • @niranjanpoddar3203
    @niranjanpoddar3203 6 років тому

    Thanks for responding on my mail.
    Your tutorial is really helping me for understanding the concepts.

  • @ToddsDiscGolf
    @ToddsDiscGolf 3 роки тому

    Your videos are amazing 👌

  • @motorings735
    @motorings735 6 років тому +1

    This was incredibly helpful! Thank you.

  • @vaclavvlcek4527
    @vaclavvlcek4527 3 роки тому

    Man, this is really good video, it cleared so many things for me! Thank you for that!

  • @alex-front-end
    @alex-front-end 6 років тому +1

    Awesome manner of explanation! Cool channel. Don't stop, thank you!

  • @Roger-ub3wp
    @Roger-ub3wp 6 років тому

    Thanks a lot, a very clear illustration of this concept.

  • @spencerknight1730
    @spencerknight1730 4 роки тому

    this cleared up so much for me. thanks!

  • @anilpatel08
    @anilpatel08 6 років тому

    Awesome Tutorial (Your Examples Gives Clear Interpretation of Understanding Concept)
    Thanks for making this video...😊

  • @Harshavardhan-gd4eu
    @Harshavardhan-gd4eu 6 років тому

    Amazing teaching :) Love the way you explain things .

  • @majia
    @majia 6 років тому

    Best explanation ever for this. Thank you so much!

  • @ktran031
    @ktran031 6 років тому

    Oh the great techsith has made another amazing video!

  • @hemantgajbe8366
    @hemantgajbe8366 5 років тому

    Good explanation about 'this' , giving a example really help us to understand and use in real world scenario, could you please give some real world example like how to use in app like banking, or hotel booking etc.. so that it will be more useful. Same examples for complicated topics like promises and closures. Thanks Sir for sharing knowledge with us :)

  • @htiwarih
    @htiwarih 5 років тому +1

    Thank you so much for 'this'.
    'this' helps a lot :)

  • @spirlo
    @spirlo 2 роки тому

    This helps me a lot Thanks!

  • @prabhakarmatkar4305
    @prabhakarmatkar4305 6 років тому

    i have a question. in video from 7.17 min .. you refered that we cannot use this inside the function as it is not a method. but when i change the type from const to var..i can use {this} inside that function. Is it because since the type is changed to var the funvtion gets attached as a method to window object and acts like a method of any other object? declaring it const it becomes private and has to object which is the reason why we cant use {this} inside the function. Please correct mu understanding.. Thanks in advance.

    • @Techsithtube
      @Techsithtube  6 років тому

      can you send me the code in the fiddle so i can try it out.

    • @prabhakarmatkar4305
      @prabhakarmatkar4305 6 років тому

      i have a jsbin link : jsbin.com/niriseq

    • @prabhakarmatkar4305
      @prabhakarmatkar4305 6 років тому

      gist.github.com/prabhakarmatkar/5c4c9cc6efc56e49eb6efb1ce55eb745

    • @Techsithtube
      @Techsithtube  6 років тому

      It has nothing to do with const or var. It used to give error in strict mode but now it doesn't in recent browser. Also you can see it doesn't make sense to use 'this' in this case because its giving you 'this' of outer scope which is windows. Declaring it as const doesnt mean private. it means you cant reassign value to it using '='.

    • @prabhakarmatkar4305
      @prabhakarmatkar4305 6 років тому

      @@Techsithtube so as mentioned in video, is it correct that declaring a variable with let keyword make it private? Or that Variable also gets added as a property to the window object?

  • @yaolegoleynik
    @yaolegoleynik 5 років тому

    Thank you it`s good for understanding tutorial

  • @mayuripatil5383
    @mayuripatil5383 5 років тому

    Thanks for sharing.it helps me a lot to understand basics of this.actually i was hoping you for apply also but that's okay.

  • @samaquahobby6724
    @samaquahobby6724 5 років тому

    It helped me a lot sir thanks 😊