THIS keyword - Beau teaches JavaScript

Поделиться
HTML-код
  • Опубликовано: 6 фев 2025
  • The 'this' keyword refers to the object that "owns" the JavaScript code.
    💻 Code: codepen.io/beau...
    🔗 Resources: developer.mozi...
    codepen.io/som...
    🐦 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.freecod...
    ❤️ Support for this channel comes from our friends at Scrimba - the coding platform that's reinvented interactive learning: scrimba.com/fr...

Комментарии • 74

  • @raywillaimjhonson
    @raywillaimjhonson 5 лет назад +68

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

    • @BobbyBundlez
      @BobbyBundlez 4 года назад

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

    • @S4LTYT
      @S4LTYT 4 года назад

      same

    • @midknight3350
      @midknight3350 2 года назад

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

    • @QaisZayed.work90
      @QaisZayed.work90 11 месяцев назад

      Same , like whats is good for? !LOL

  • @grandpowr
    @grandpowr 7 лет назад +41

    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
      @masterwayne9790 3 года назад

      Thank you it helped me in others ways too

    • @QaisZayed.work90
      @QaisZayed.work90 11 месяцев назад

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

  • @novanoskillz4151
    @novanoskillz4151 3 года назад +4

    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
      @thomascarlton82 3 года назад +2

      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
      @doublesushi5990 2 года назад

      @@thomascarlton82 indeed.

  • @GabeDStudios
    @GabeDStudios Год назад +1

    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.

  • @curiousindividual634
    @curiousindividual634 4 года назад +13

    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
      @thomascarlton82 3 года назад +2

      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

    • @chrisd-qv4vp
      @chrisd-qv4vp Месяц назад

      You can use the “This” keyword to create dynamic code where multiple different objects can call upon a function. For example if you have 100’s of objects with the key of “Car: “ instead of saying thisObject.car specifically, you can say this.car & it would apply to every object calling for the function. Sorry, that’s what I understand of “This” so far, I’m just learning the concept today 😅

  • @DomedIsDoomed
    @DomedIsDoomed 2 года назад +1

    Loving this video

  • @abdelkrimeljaouhari2370
    @abdelkrimeljaouhari2370 4 года назад +8

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

  • @GraceandWisdom
    @GraceandWisdom 4 года назад +8

    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.

  • @ww4102
    @ww4102 5 лет назад +6

    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
      @oufcena5092 5 лет назад

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

  • @VanHaleNNoodle
    @VanHaleNNoodle 3 года назад +2

    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.

  • @Azar211
    @Azar211 4 года назад +1

    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

  • @nowyouknow2249
    @nowyouknow2249 6 лет назад +8

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

  • @freyjaaldebaran7275
    @freyjaaldebaran7275 2 года назад +1

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

  • @beccaarauz
    @beccaarauz 6 лет назад +10

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

    • @heatherbeckman1767
      @heatherbeckman1767 5 лет назад +1

      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
      @oufcena5092 5 лет назад +2

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

    • @heatherbeckman1767
      @heatherbeckman1767 5 лет назад +1

      @@oufcena5092 Thanks. This is actually quite helpful.

    • @mrsoccer9449
      @mrsoccer9449 4 года назад +1

      @@oufcena5092 Now that make sense

  • @manas_singh
    @manas_singh 6 лет назад +1

    Excellent explanation, I loved it

  • @core_dump
    @core_dump 7 лет назад +4

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

  • @nehagavali9416
    @nehagavali9416 2 года назад

    Which editior are you using

  • @gustavokuthumy404
    @gustavokuthumy404 2 года назад

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

  • @rmb1831
    @rmb1831 7 лет назад +7

    Complicated example. Must use easy to understand parameters.

  • @markodjuric3905
    @markodjuric3905 7 лет назад +1

    Thanks for this!

  • @c0mpuipf
    @c0mpuipf 7 лет назад

    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
      @BeauCarnes 7 лет назад

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

  • @Drachensingsang
    @Drachensingsang 7 лет назад +2

    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.

  • @skepticbubble3166
    @skepticbubble3166 5 лет назад

    Very neat explanation for 8:47 video thanks!

  • @mdabutalha3165
    @mdabutalha3165 6 лет назад

    short time best explanation.

  • @justinherrera6790
    @justinherrera6790 5 лет назад +3

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

  • @gabrielsoloman5000
    @gabrielsoloman5000 5 лет назад

    great lesson!

  • @perfectigbadumhe113
    @perfectigbadumhe113 5 лет назад +1

    Didn't understand sheet

  • @Andrei-xb1pz
    @Andrei-xb1pz 5 лет назад

    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!!!

  • @Beam28
    @Beam28 7 лет назад +20

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

  • @hashtagtrends9886
    @hashtagtrends9886 4 года назад

    Thank you!

  • @christianrodier3381
    @christianrodier3381 7 лет назад

    This is very helpful thanks

  • @threeone6012
    @threeone6012 7 лет назад

    Great upload!

  • @KL4NNNN
    @KL4NNNN 5 лет назад

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

  • @redouanemahjoubi1914
    @redouanemahjoubi1914 6 лет назад

    what program are u using ?

    • @oufcena5092
      @oufcena5092 5 лет назад

      Why not bother to the description?

  • @inononeeee
    @inononeeee Год назад

  • @sevakk.939
    @sevakk.939 3 года назад

    great, great, great

  • @TheLoniard
    @TheLoniard 5 лет назад

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

  • @AwB
    @AwB 7 лет назад

    Great stuff

  • @namangupta1817
    @namangupta1817 7 лет назад

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

    • @BeauCarnes
      @BeauCarnes 7 лет назад +1

      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
      @namangupta1817 7 лет назад

      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

  • @shankerm3959
    @shankerm3959 6 лет назад

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

  • @AgrabATC
    @AgrabATC 4 года назад +1

    Worse explanation ever! It confused me more.

  • @terrancekent7887
    @terrancekent7887 6 лет назад +2

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

  • @aalez1983
    @aalez1983 3 года назад

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

  • @Doda100creative
    @Doda100creative 7 лет назад

    This video could save a whole day wasted in 8 minutes

  • @Azim2562
    @Azim2562 6 лет назад

    thanks

  • @ZooDinghy
    @ZooDinghy 3 года назад

    JavaScript is disgusting. Utterly disgusting!

  • @stocktrade9655
    @stocktrade9655 5 лет назад +2

    this tutorial is so confusing

  • @awekeningbro1207
    @awekeningbro1207 4 года назад

    This was confusing.

  • @ShoSidney
    @ShoSidney 4 года назад

    most confusing tutorial...

  • @josemaribautista7552
    @josemaribautista7552 4 года назад

    thanks but i hate it

  • @irfansindhi5091
    @irfansindhi5091 7 лет назад +2

    Just stop clicking