But this isn't necessarily true. As we learned a couple of weeks ago: JS is the legitimate son of Rhaegar Targaryen and Lyanna Stark, and thus not a bastard.
Holly crap dude. This video started playing on its own after another I was watching and I'm glad my hands were busy and I didn't turn it off right away.. You have By FAR the most awesome and intuitive way of explaining things on youtube. Despite knowing all this, I still learned a lot!
I only wish I could give this video more likes! I've been programming in Java for a while but find myself scratching my head a lot of the time when it comes to JavaScript, so I really love how your videos are quite informative and entertaining :D
well, I'd say the best topic for the next video is the 'prototype' keyword and inheritance. after that, some talk on class design (via the 'class' keyword) would be awesome. thx for an awesome video!
"Will output 'undefined'...when you first run across this you might be thinking 'What the fuck shit ass'... " That right there just earned you a subscription. Now I'm really looking forward to the series.
I was actually dealing with this quirk in a project at work recently; good to know what went wrong and how I can fix it. Thanks so much MPJ; you seriously know how to make learning the in's and out's of javascript fun!
For anyone confused, `this` in functions is different depending on execution context. So if you call it from the global scope aka window, this is going to equal window. Also do note that when you bind the functions with .bind or _.bind you cannot override it anymore.
A couple of topic suggestions for you: 1) Whilst discussing context (this) of the bind function is it worth mentioning the apply and call methods to re-enforce understanding? 2) Possibly discuss the prototype property and the pros and cons of using it - inheritance.
Hey Mpj, I absolutely love the way you teach! This is far-fetched but would you mind doing a series on Data Structures and Algorithms? Or if not, discuss what we can do so that we could learn 'programming' not just 'programming languages'. Big big thanks!
To have a more functional approach you could also mention that bind can be used for partial applications. const add = (a, b) => a + b const add2 = add.bind(null, 2) add2(3) //
Interestingly enough you can fetch the talk function from the dog and bind it to a completely different object context, with a different sound: let growl = dog.talk.bind({ sound: 'growl' }); console.log(growl());
I'd like to see the different object creation methods, and what are the differences between them. I'd like to understand the cases in which they make sense, or if there *really* is no difference.
I was with you most of the way, where I assumed you had to use bind() because you had assigned the talk function and were using it directly outside of it's context of 'dog'. That made sense. But then your real-world example caused my assumption to crumple because you referenced dog.talk() directly (so different to your contrived example) but still need bind() for talk() to know anything about the dog, in which it exists and is called on. You've left me more confused.
Your assumtion is correct, we need to use bind because we are using it outside of the context of code. The real world example is EXACTLY the same as the first one, just a different way of showing it. Can you please clarify your question/confusion a bit, and I'll try to shed light on things.
Thanks for the reply mpj! In your first example, you first assign the function to a new variable (let talkFunction=dog.talk), thus taking it out of context from the object it was defined on - so when invoked by referencing the talkFunction variable, there is no "dog" object so "this" is meaningless in that context - I get this completely. But in your Click method example you invoke the function directly on the dog object (you reference dog.talk directly in the AddEventListener method), without taking it "out of context" first. That's where I was a bit confused. I had assumed (obviously incorrectly) that invoking the method *from* the object on which it's defined should retain its "this" reference to its own object. But even though you are calling an object's method directly by referencing it through the object it is defined on, you still have to use bind() and pass it the same object again to point its "this" reference to the right object. that's what seemed a little bit bizarre to me. But if that's how Javascript rolls, then so be it! Thanks for the entertaining and informative videos :D
"But in your Click method example you invoke the function directly on the dog object (you reference dog.talk directly in the AddEventListener method), without taking it "out of context" first." I take it just as much out of context in both cases. I'm passing it as an argument into a function. Passing it to a variable does nothing different from passing the function as an argument into another function. Note that we're not invoking the function when we're passing it into addEventListener, we're passing it in, so it's just like when we're assigning it into the variable. Think about what happens inside addEventListener, that might make it easier - addEventListener just gets a function as an argument - it can only call it, it has no concept of a dog anywhere.
I.e. you assumtion " I had assumed (obviously incorrectly) that invoking the method from the object on which it's defined should retain its "this" reference to its own object." is still correct, but we're not doing that!
button.addEventListener('click', dog.talk) is the same thing as button.addEventListener('click', function() { console.log(this.sound) }) The first example copies a reference to the 'talk' function inside 'dog', in isolation, with no regard to the context in which it was defined (in the dog object)
You said that "this" would reffer to the Window Object when it was inside the eventHandler. But isn't this incorrect? From what I know when "this" is used inside addEventListener it reffers to the elment that fired the event? while in the old way of doing it with attatchEvent "this" reffered to the window object and undefined under strict mode?
I was thinking the same about addEventListener. And to confirm, from MDN, "When attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler."
I would like to add a few things that helped me personally to come to understanding (please correct me if they are wrong): - 'this' keyword refers to the , so the context is represented by an object - depends on where the function is being called from How the is determined upon function call? - dog.talk() -> the context is the left part of the call (the object within which it's being called) - talkFunction() -> here since the left part is empty, the is the global object let boundFunction = someFunction.bind(newContextObject) Here, the bind() call returns a function with artificially bound to a new object To illustrate the artificial nature of this binding, V8 debugger adds a few internal properties for a newly created bound function that can be examined in your favorite debugger such as : [[BoundArgs]], [[BoundThis]] and [[TargetFunction]] So, what essentially clarified the thing to me is realizing that 'context' is just an object which is determined upon a function call by some set of rules, and 'this' keyword simply refers to that object.
11:32 - "There is no this". It refers to Window (because it's the final object in the chain of prototypes) and it returns undefined because Window has no talk() method.
Hi mate, u make really cool videos. Your channel was a great opening for me personally. By the way, I have two questions: 1. Would you like to tell your kids (read - us) about rxjs, redux-observable, react and that part of js world? 2. Do you use any nootropics or similar things to keep your mind so alive and productive? As I understand, you work all the week and spend one weekend day for FFF. Applying this to me, I will become deadly tired in one month of such tight schedule. Thanks, John
I next episodes I would like to see some explanation of super() that makes me super confused in ES6 Classes. It makes me confused because I don't have experience with other programming languages - js is my thing. Another cool thing to see would be episode about patterns in OO js. How to create a plugin that does some DOM magic, should I for Class, constructor function, new keyword, Object.create() etc...
Thanks +funfunfunction ! Great videa! It seems to me that we should understand better how to modularize our JS code with some real life examples. I vote for a why/what/how video about modules. Thanks
Like some people have mentioned here, I would prefer more functional programming videos, like the Haskell series. I love this OO type of videos too, so either one is fine really. Just letting you know that don't forget completely about the Functional Programming series :]
Hey MPJ, what do you think of using this way? let dog = new function() { const sound = "woof"; this.bark = function() { console.log(sound); } }; let barkFunction = dog.bark; barkFunction(); // this logs "woof" as expected
If you use 'this' in a global function, in ecma3 and ecma5 sloppy mode, i think it will be bound to the window object in browsers, and if you have a global variable 'sound', i think you will get an output, albeit a crazy one. I want to see how to apply functional principles in design patterns. or just talk about design patterns and projects newbies can do to master design patterns, also i want you to talk about the usefulness of coding challenges, that usually involve complex maths, like those on projecteuler.net, they seem pretty useless, do i need to be able to solve them as a programmer, do you solve them and do they make one a better programmer? The compose(funcA(), funcB()) function of functional programming will also make a good topic. A quick question: Is it possible to use only pure functions throughout a small project like a simple html,css,javascript calculator?
Hey, I have an idea. One of the things that I have difficulty with is figuring out what random "this"es in code are referring to. These are statements inside functions that are not in a particular object and not referring to some data defined right next to them like the clean example in this video. I'm not sure if there are any good tricks aside from painstakingly backtracking to figure out what a particular "this" refers to, but it's been a pain point for me since I started working with JS. A "this" that isn't referring to its immediate parent just seems too vague to me, like I can read all the code around it but I can't read the "this". It has no meaning that I can interpret, so I have to guess based on context. When the rest of JS reads so clearly to me, this feels weird, like I'm missing something.
To be short: when the function is treated as method the 'this' is going to point at object but when function is just function (not method) e.x. you assign method to string, 'this' is going to point at parent of 'standing alone' function We use bind(object) to say that function is a method of that object. Am I right?
This guy... This knowledge... This ACCENT... I'm brazilian, and this accent is so beautiful to me. His teaching is excellent. Hope he returns, some day.
In node I see this defined as self (a lot) and in Angular apps I see objects also caching the this keyword as self etc. Why are most developers reassigning/caching the this keyword instead of using bind? It is just an oversight or a style choice?
After a really hard day of almost crying after work for writing as much sub-par code as I can physically type in 10 hours without a f-ing brake, you sir, have the ability to make me enthousiasthic about code again. Thank you...
Thanks for the awesome content, as always! One thing that I'm very confused and is kind difficult to find good resources is about promises in JavaScript.
Hey very nice video, as always. It would be fun to see a video about all the quirks of javascript or things where people would scratch their heads. I'm thinking of a video similar to: www.destroyallsoftware.com/talks/wat @ minute 1:30. I laughed hard and searched for more such things. Would like to see you making something similar one day :).
// I used this code with an arrow function, and when I call this function it gives me undefined not the value of the sound property thanks let dog = { sound: 'haaw haaaw haw', talk: () => console.log(this.sound) } dog.talk() // undefined !!!
Im curious what exactly bind does that makes "this" keyword behave like it was in context of object that was passed in as an argument. Does method keep it as some kind of closure and relates to it?
"Confusion is your friend. It means you're learning" - that is going on my wall.
Best explanation of `bind` I've seen. Thanks!
*Today I learnt:* JS is a bastard from Scheme and Java.
But this isn't necessarily true. As we learned a couple of weeks ago: JS is the legitimate son of Rhaegar Targaryen and Lyanna Stark, and thus not a bastard.
@@Silverjerk lol
Holly crap dude. This video started playing on its own after another I was watching and I'm glad my hands were busy and I didn't turn it off right away.. You have By FAR the most awesome and intuitive way of explaining things on youtube. Despite knowing all this, I still learned a lot!
"Python is a language that's tightly controlled by a single Dutch, middle-aged white guy." That got my subscribe.
:)
lol
Haha! And "What the fuck-shit-ass" got mine.
And "WTF Shit Ass" is what got mine.
Compte Prive me too! Lol
talk about: prototypal inheritance vs class extends
Yes Please! it will take many eposides for that
Same thing
👆
just syntactic sugar
I only wish I could give this video more likes! I've been programming in Java for a while but find myself scratching my head a lot of the time when it comes to JavaScript, so I really love how your videos are quite informative and entertaining :D
well, I'd say the best topic for the next video is the 'prototype' keyword and inheritance. after that, some talk on class design (via the 'class' keyword) would be awesome. thx for an awesome video!
Venturing into Javascript from a Java background, this looks like a perfect video series for me!
Dude, your videos are AMAZING. Please never stop making them.
I think he stopped :'(
@@dan110024 thank god. this video was terrible. I could barely get through it
@@MA-ek1xl you're a doodoo head
"Will output 'undefined'...when you first run across this you might be thinking 'What the fuck shit ass'... " That right there just earned you a subscription. Now I'm really looking forward to the series.
I was actually dealing with this quirk in a project at work recently; good to know what went wrong and how I can fix it. Thanks so much MPJ; you seriously know how to make learning the in's and out's of javascript fun!
For anyone confused, `this` in functions is different depending on execution context. So if you call it from the global scope aka window, this is going to equal window. Also do note that when you bind the functions with .bind or _.bind you cannot override it anymore.
U are simply an amazing person......u made my day....people should learn from u...how to enjoy while coding...
Omg, i love dat feeling when you come from "wtf shit ass" to understanding of how that stuff works!
Amazing! Thx a lot!
A simple yet clear explanation.
I suggest to describe the currying arguments using bind
Wide eyed !!! Truly enjoying you !!! I might need to go grab another glass to keep up.
A couple of topic suggestions for you: 1) Whilst discussing context (this) of the bind function is it worth mentioning the apply and call methods to re-enforce understanding? 2) Possibly discuss the prototype property and the pros and cons of using it - inheritance.
More video idea suggestions:
1. Map, WeakMap, Set, WeakSet
2. fetch and CORS
Now you're good enough to make all of these on your own! :D
different ways of object creation and their real world use-cases and their benefits and pitfalls. Nice video.
Hey Mpj, I absolutely love the way you teach! This is far-fetched but would you mind doing a series on Data Structures and Algorithms? Or if not, discuss what we can do so that we could learn 'programming' not just 'programming languages'. Big big thanks!
rewatching. Loving it, again.
Its going to take some more iterations for me to get to the point where i use it intuitively but you, sir, are a fantastic teacher. Thank you!
This is brilliant - I learned JavaScript stuff and also life tips for psychologically dealing with others.
the last example helped me understand a bit more. thanks!
I just got amazed by his entrance and subscribed 🤩
To have a more functional approach you could also mention that bind can be used for partial applications.
const add = (a, b) => a + b
const add2 = add.bind(null, 2)
add2(3) //
Keep up the good work! I learn so much from your videos!!!
Thanks for explaining the "BIND" method
Thanks! Well explained. I was in trouble understanding with 'this' and 'bind'.
Interestingly enough you can fetch the talk function from the dog and bind it to a completely different object context, with a different sound:
let growl = dog.talk.bind({ sound: 'growl' });
console.log(growl());
Awesome insight!
I'd like to see the different object creation methods, and what are the differences between them. I'd like to understand the cases in which they make sense, or if there *really* is no difference.
I was with you most of the way, where I assumed you had to use bind() because you had assigned the talk function and were using it directly outside of it's context of 'dog'. That made sense. But then your real-world example caused my assumption to crumple because you referenced dog.talk() directly (so different to your contrived example) but still need bind() for talk() to know anything about the dog, in which it exists and is called on. You've left me more confused.
Your assumtion is correct, we need to use bind because we are using it outside of the context of code. The real world example is EXACTLY the same as the first one, just a different way of showing it. Can you please clarify your question/confusion a bit, and I'll try to shed light on things.
Thanks for the reply mpj! In your first example, you first assign the function to a new variable (let talkFunction=dog.talk), thus taking it out of context from the object it was defined on - so when invoked by referencing the talkFunction variable, there is no "dog" object so "this" is meaningless in that context - I get this completely.
But in your Click method example you invoke the function directly on the dog object (you reference dog.talk directly in the AddEventListener method), without taking it "out of context" first. That's where I was a bit confused. I had assumed (obviously incorrectly) that invoking the method *from* the object on which it's defined should retain its "this" reference to its own object. But even though you are calling an object's method directly by referencing it through the object it is defined on, you still have to use bind() and pass it the same object again to point its "this" reference to the right object. that's what seemed a little bit bizarre to me.
But if that's how Javascript rolls, then so be it! Thanks for the entertaining and informative videos :D
"But in your Click method example you invoke the function directly on the dog object (you reference dog.talk directly in the AddEventListener method), without taking it "out of context" first."
I take it just as much out of context in both cases. I'm passing it as an argument into a function. Passing it to a variable does nothing different from passing the function as an argument into another function. Note that we're not invoking the function when we're passing it into addEventListener, we're passing it in, so it's just like when we're assigning it into the variable. Think about what happens inside addEventListener, that might make it easier - addEventListener just gets a function as an argument - it can only call it, it has no concept of a dog anywhere.
I.e. you assumtion " I had assumed (obviously incorrectly) that invoking the method from the object on which it's defined should retain its "this" reference to its own object." is still correct, but we're not doing that!
button.addEventListener('click', dog.talk)
is the same thing as
button.addEventListener('click', function() { console.log(this.sound) })
The first example copies a reference to the 'talk' function inside 'dog', in isolation, with no regard to the context in which it was defined (in the dog object)
Friends: people you know, but you like them anyway...
JavaScript: a language you know, but you like it regardless of that
+Bit Phreak hahaha, yes! Very well put.
Woo, part of my Monday routine fulfilled,
You said that "this" would reffer to the Window Object when it was inside the eventHandler. But isn't this incorrect? From what I know when "this" is used inside addEventListener it reffers to the elment that fired the event? while in the old way of doing it with attatchEvent "this" reffered to the window object and undefined under strict mode?
I was thinking the same about addEventListener.
And to confirm, from MDN, "When attaching a handler function to an element using addEventListener(), the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler."
+Johan Gudmundsson you are right, I'm incorrect there.
Thanks for the correction MPJ!
That makes sense, thanks for pointing it out!
I would like to appreciate you for nice background , bright light , and sound awesome.
Great episode as usual. I'd love to see your approach to private members in JS.
6:20 "But let me fix that for you" :D :D I am dying
I would like to add a few things that helped me personally to come to understanding (please correct me if they are wrong):
- 'this' keyword refers to the , so the context is represented by an object
- depends on where the function is being called from
How the is determined upon function call?
- dog.talk() -> the context is the left part of the call (the object within which it's being called)
- talkFunction() -> here since the left part is empty, the is the global object
let boundFunction = someFunction.bind(newContextObject)
Here, the bind() call returns a function with artificially bound to a new object
To illustrate the artificial nature of this binding, V8 debugger adds a few internal properties for a newly created bound function that can be examined in your favorite debugger such as :
[[BoundArgs]], [[BoundThis]] and [[TargetFunction]]
So, what essentially clarified the thing to me is realizing that 'context' is just an object which is determined upon a function call by some set of rules, and 'this' keyword simply refers to that object.
Can you also talk about class free JS objects? And duck-typing?
an idea for the next video extending prototype vs. object literal
Wish everyone made learning this this fun
"It's installed on god damn everything" -- Love that line
We miss you Guru 💛
"When you first come accross this, you're probably thinking something in the lines of .... what the fuck shit ass'
I burst into laughter
Finally, I got it -- Thanks, sir!
it would be cool with an episode about call!
11:32 - "There is no this". It refers to Window (because it's the final object in the chain of prototypes) and it returns undefined because Window has no talk() method.
good job in explaining the mysterious this keyword.
Es6 class object creation please.
Hi mate, u make really cool videos. Your channel was a great opening for me personally.
By the way, I have two questions:
1. Would you like to tell your kids (read - us) about rxjs, redux-observable, react and that part of js world?
2. Do you use any nootropics or similar things to keep your mind so alive and productive? As I understand, you work all the week and spend one weekend day for FFF. Applying this to me, I will become deadly tired in one month of such tight schedule.
Thanks,
John
AWESOMEEE!! *drums rolling
wtfsa
A t-shirt waiting to be made!
I next episodes I would like to see some explanation of super() that makes me super confused in ES6 Classes. It makes me confused because I don't have experience with other programming languages - js is my thing.
Another cool thing to see would be episode about patterns in OO js. How to create a plugin that does some DOM magic, should I for Class, constructor function, new keyword, Object.create() etc...
A video about testing in JS please!
ua-cam.com/video/GhbhD1HR5vk/v-deo.htmlm25s
I really thought you were going to say: "let the dogs out"
this was a beautiful explanation! Thank you!
Thanks +funfunfunction ! Great videa!
It seems to me that we should understand better how to modularize our JS code with some real life examples. I vote for a why/what/how video about modules.
Thanks
11:24 really great explanation!!!
Loved it! Resolved the mystery :D
For the first time in 7-8years of working with jquery, I finally understand bind! Thank you!
fun and interesting, and best explanation !
WARNING: At around 6:55 I was taking a drink of coffee and spit all over my keyboard. :)
Me too!
These videos are awesome.
Like some people have mentioned here, I would prefer more functional programming videos, like the Haskell series. I love this OO type of videos too, so either one is fine really. Just letting you know that don't forget completely about the Functional Programming series :]
Hey MPJ, what do you think of using this way?
let dog = new function() {
const sound = "woof";
this.bark = function() {
console.log(sound);
}
};
let barkFunction = dog.bark;
barkFunction(); // this logs "woof" as expected
If you use 'this' in a global function, in ecma3 and ecma5 sloppy mode, i think it will be bound to the window object in browsers, and if you have a global variable 'sound', i think you will get an output, albeit a crazy one.
I want to see how to apply functional principles in design patterns. or just talk about design patterns and projects newbies can do to master design patterns, also i want you to talk about the usefulness of coding challenges, that usually involve complex maths, like those on projecteuler.net, they seem pretty useless, do i need to be able to solve them as a programmer, do you solve them and do they make one a better programmer?
The compose(funcA(), funcB()) function of functional programming will also make a good topic.
A quick question: Is it possible to use only pure functions throughout a small project like a simple html,css,javascript calculator?
Hey, I have an idea. One of the things that I have difficulty with is figuring out what random "this"es in code are referring to. These are statements inside functions that are not in a particular object and not referring to some data defined right next to them like the clean example in this video. I'm not sure if there are any good tricks aside from painstakingly backtracking to figure out what a particular "this" refers to, but it's been a pain point for me since I started working with JS.
A "this" that isn't referring to its immediate parent just seems too vague to me, like I can read all the code around it but I can't read the "this". It has no meaning that I can interpret, so I have to guess based on context. When the rest of JS reads so clearly to me, this feels weird, like I'm missing something.
at 12:00 finally got the f***ing meaning of this. thaanks
thank you so much for making this video
To be short:
when the function is treated as method the 'this' is going to point at object
but
when function is just function (not method) e.x. you assign method to string, 'this' is going to point at parent of 'standing alone' function
We use bind(object) to say that function is a method of that object.
Am I right?
No, I think you need to let go of the method/parent semantics from your mind. Those do not exist in JavaScript.
Hey, what about Prototype for the next video? I think it would be nice!!
This guy... This knowledge... This ACCENT... I'm brazilian, and this accent is so beautiful to me. His teaching is excellent. Hope he returns, some day.
In node I see this defined as self (a lot) and in Angular apps I see objects also caching the this keyword as self etc. Why are most developers reassigning/caching the this keyword instead of using bind? It is just an oversight or a style choice?
Ek Number Full Clear . Of bind
Awesome channel. Thanks dude
Great content brother
After a really hard day of almost crying after work for writing as much sub-par code as I can physically type in 10 hours without a f-ing brake, you sir, have the ability to make me enthousiasthic about code again. Thank you...
you explained very well
this.sound, not this, is undefined in talkFunction. In talkFunction, this is the global object.
Thanks for the video! I've been struggling to learn JavaScript lately, but your content is helping me a lot!
Cool video. Congratulations!
Rofl. Just died @6:56
@6:49: guffaws. I like the expressions even more than the swearing lol
Nice job!
Please normalize the volume of future videos if you have not already. Great videos. Thanks
Hye MPJ, thank you for the videos. They're amazing! Kudos to your aggressive approach XD.
Thanks for the awesome content, as always! One thing that I'm very confused and is kind difficult to find good resources is about promises in JavaScript.
omfg this is just what i wanted
mpj are you a wizard
Good episode! I'd like one about ways to do mixins in js.
Hey very nice video, as always.
It would be fun to see a video about all the quirks of javascript or things where people would scratch their heads. I'm thinking of a video similar to: www.destroyallsoftware.com/talks/wat @ minute 1:30. I laughed hard and searched for more such things. Would like to see you making something similar one day :).
Thanks for posting that link. That was a good watch.
"What the fuck shit ass" says me at least twice a day (let me = this)
This is still useful in 2021 :)
Can you please give a live example by executing it either on browser or some other compiler.
// I used this code with an arrow function, and when I call this function it gives me undefined not the value of the sound property thanks
let dog = {
sound: 'haaw haaaw haw',
talk: () => console.log(this.sound)
}
dog.talk() // undefined !!!
In arrow function episode you said `this` acts this different in arrow functions. I'd like to know how it's different. thank you.
6:51 pretty much describes my entire web developer career
Im curious what exactly bind does that makes "this" keyword behave like it was in context of object that was passed in as an argument. Does method keep it as some kind of closure and relates to it?
Bind is to let a function switch its “this” ref to another object