JavaScript this Keyword Explained Simply

Поділитися
Вставка
  • Опубліковано 9 лют 2022
  • In most cases, the value of 'this' is determined by how a function is called. 'this' usually refers to the object that is calling the current function. If a function, foo(), is called from the global scope ("foo()"), then 'this' will refer to the global object - the Window object. But if foo() is called from inside the scope of another object ("devsage.foo()"), then 'this' will refer to the object that is calling foo() - which is the 'devsage' object. Arrow functions don't provide their own 'this' binding so it inherits the 'this' value of the enclosing function.
    📚Materials/References:
    MDN Web Docs: developer.mozilla.org/en-US/d...
    🌎 Find Me Here:
    Twitter: / realdevsage
    Discord: / discord
    Ebooks: payhip.com/devsage
    Merch: cottonbureau.com/people/devsage

КОМЕНТАРІ • 46

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

    💙 Twitter: twitter.com/realDevSage
    📙 Ebooks: payhip.com/devsage
    💥 Discord: discord.gg/BP8wPv6raA
    👕 Merch: cottonbureau.com/people/devsage

  • @gameXIII
    @gameXIII Місяць тому +4

    'This' references to the object that calling the function.
    This simple sentence cleared my mind after reading a lot of stuff about 'this'. Your explanation is amazing!!

  • @andyryan2945
    @andyryan2945 10 місяців тому +15

    Seriously great explanation! Came here for more clarification on it after The Odin Project lesson Objects and Object Constructors

  • @user-hb3lk7bq5z
    @user-hb3lk7bq5z 21 день тому +2

    Amazing explanation, much more concise than articles I've read.

  • @kobudnik
    @kobudnik Рік тому +1

    Appreciate all your useful vids. They've substantially benefited me in the first couple months I started out.

  • @user-xm1ve7mr1p
    @user-xm1ve7mr1p Рік тому +1

    I've been struggling to fully comprehend this; your video really helped me out. Looking forward to checking out more of your vids ;)

  • @ArunaTebel
    @ArunaTebel 2 роки тому +7

    Thanks a lot. One of the clearest explanations of `this`. 🔥

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

      No problem, Aruna!

  • @michi19935
    @michi19935 6 місяців тому

    Finally someone that doesn't speak overly fast

  • @onagichitchat
    @onagichitchat 8 місяців тому

    i really want to say thank you because your simple explanation made me get it finally

  • @riteshmehta2292
    @riteshmehta2292 Рік тому +1

    Very clear explanation ..

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

    Great explanation, thank you!

  • @mrjeevy7720
    @mrjeevy7720 7 місяців тому

    Great explanation, thanks!

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

    Very clean explanation, thanks for that!

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

    Very nicely explained. Thanks

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

    Very good and instructive explanation

  • @trevorjamesconsideracion1982
    @trevorjamesconsideracion1982 4 місяці тому +1

    Bro, that arrow function confused me while reading an article T - T. Thanks man!

  • @Kotovar
    @Kotovar 9 місяців тому

    Thanks!

  • @taheraalam5156
    @taheraalam5156 4 місяці тому

    best video on this topic! ty.

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

    you are a legend

  • @newredroses
    @newredroses 8 місяців тому +1

    So, could we say that using inline functions with the `this` keyword is discouraged (bad practice) since it would require it being nested within a normal function?
    Meaning that instead of using an inline and nesting it, It's better to simply just use a normal function? Please correct me if I am mistaken! :)

    • @DevSage
      @DevSage  8 місяців тому +1

      Correct.

  • @d0tjs
    @d0tjs 5 місяців тому

    was very helpful, thanks ..

  • @kristhellalvarez1306
    @kristhellalvarez1306 10 місяців тому

    a big thumb up for you, thank you!

  • @a-mok-youb
    @a-mok-youb Рік тому

    Is it possible to import any module without writing the module type and export it

  • @shivamthemas
    @shivamthemas 4 місяці тому

    best tutorial on "this" subject

  • @Vamsikrishna-mf6ye
    @Vamsikrishna-mf6ye 9 місяців тому

  • @GrantH2606
    @GrantH2606 2 місяці тому

    9:53 Could you just use an arrow function with the forEach method/function to solve the "this" problem?

  • @spageen
    @spageen 5 місяців тому

    this is awesome

  • @KennehGebra-cf9ds
    @KennehGebra-cf9ds 4 місяці тому

    I subscribed because i was able to understand "this"

  • @aloktomar8566
    @aloktomar8566 2 роки тому +1

    on forEach (8:02) when this refers to window object why dont we use arrow function for ex: this.hobbies.forEach((hobby)=>{ ( console.log( this.firstName )} ));

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

      You can, i guess he just wanted us to learn how to fix it without changing the callback function type.

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

      Right , but its more interesting to do that way for the sake of concept and learning isnt ?