00:02 Understanding 'this' keyword in JavaScript 02:11 Understanding 'this' keyword in different contexts 04:14 Understanding 'this' keyword in JavaScript 06:32 Understanding 'this' keyword in normal function and arrow function 08:41 Understanding 'this' keyword in JavaScript object 10:37 Accessing 'this' inside a function can be tricky. 12:42 Understanding 'this' keyword in JavaScript 14:49 Understanding 'this' keyword in different functions 16:50 Understanding 'this' binding in JavaScript. 18:38 Understanding 'this' keyword in JavaScript functions 20:40 Example of chaining functions in JavaScript 22:32 Upcoming video on Explicit Binding
You are an absolute genius, i never understood this concept but your teaching is just fabulous, i hope that you launch your own udemy course in a structured way to master JS. You deserve to get paid for such content
Great explanation! A more accurate answer would be : In an arrow function "this" is a part of its closure, i.e. it is taken from the context. Where it is defined and not the object in which it is defined. In a normal function "this" is points to the object it is a part of.
this is some excellent practice material. pls add more o/p based Qs for OOJS, Prototypes, etc. an addition to the problem at 17:25 - if at line 4, we use let/ const instead of var to create 'length' variable, then while executing 'callback', the (this) Window object won't have length set to 4. It could be anything, like in JSFiddle, it is set to 0. since let/ const are created in TDZ. there can be so many more variations to this problem. i find this an incredible practice problem. many thanks!
At 14:50 we can do "setTimeout(user.logMessage(), 1000);", its giving correct output. We can do this also " setTimeout(user.logMessage.bind(user), 1000);"
This is some really high quality content and all for free! Your curation of questions are impressive, really making me scratch my head. Thank you mate!
I know it is a generalization, but many Indian devs seem to have issues with following naming best practices and I can't figure out why that is...On a more serious note, great videos, well structured and researched.
Just learned so many new things from this video. The last ques is just amazing. Please make more such video of questions like the last one. Highly informative content 👌✌
Extremely helpful video! Helped me to develop a more clear understanding of 'this' keyword . Please keep on making more such output based questions videos.
I absolutely LOVE your videos. You are amazing at explaining everything and for the first time EVER, I finally get it! Thank you. Do you have patreon? I'd love to support you.
I was recently asked a question on what is the difference between invoking the object directly suing the method & using call I did not know this implicit bindings vs explicit binding Great one kudos piyush :)
4:06 this keyword in a function with in an object points to the object 4:43 this keyword in a function with in a nested object points to the nested object
Hi Dear… I am really a big fan… You have such a deep knowledge of almost every technology. I have 1 request… Do you have any idea about how can we call salesforce commerce cloud API from Angular??? please reply if you know this or make a short video. Thanks
fact is `this` is the least thing we will ever gonna use (class based is exception) in our day to day work, this makes this concept tougher but interviewers love this type of question lol😆, btw Awesome video 🔥
for all the viewers i give the golden rule * object don't create binding with this function do in js for e.g let obj = { name:"steve", valueOfthis:this, arrowFn:()=>this, normalFn:function(){ return this } } here valueOfthis and arrowFn always gives window why because object don't create binding with this and arrow function also not create binding with this whereas normalFunction create binding with this hope this explanation work 😀😀
My solution for Question 2: function user() { return { name: "Sajal", ref: this } } const test = user(); const result = user.bind(test); console.log(result().ref.name); //Sajal I tried it with .bind() 😀
This always sounds confusing. Just the easiest way to interpret. Its always the caller function for the normal function calls and for the arrow functions it will always be 2 level deeper( kind of like parent of parent)
Great video bro! Keep coming up with interesting videos like these ❤️. Just adding one more concept here Arguments in a function is not an array it is array like object. Array like object does not have all the properties of an array like map, filter etc.
This is really good content. I can't deny that. But definitely here 'this' was explained in a hacky way. Please watch this related video from dev sage and you can really master this
Hey Piyush, thanks for this awesome video. Please correct my understanding if I am wrong: print is defined inside obj and obj don’t have its own scope its inheriting the scope from its parent which is global object that’s why arrow function pointing to global object (bcz it inherits this from lexical scope) . let obj = { name : 'temp', print : () => { console.log(this); // global/window object } }
It doesn't matter what scope obj has, arrow function takes its scope from parent normal function which in this case is not there, so it is targeting global. So even if the arrow function nested deep inside a object, if it doesn't have a parent normal function, it act the same.
@@RoadsideCoder Ok got it, arrow function search for nearest regular function that encloses it but in this case its not enclosed by any regular function then global this is inherited by arrow function.
14:08 piyush, can we do bind as well here? because I think once we bind a method with a object, no matter when/where we call that function it will always point to that object.
let user = { name :"hema mane!", getName(){ console.log(this.name) } } let data =setTimeout( user.getName() ,1000) console.log(data) console.log(data) ---> is it correct way of accessing or else mandetory to use inside function only
You should title these videos "JS trick questions". Seriously, if an interviewer was to ask these sorts of questions I'd politely excuse myself and look elsewhere.
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
Hii brother can I get to know what's your age ??
@@Solo_playz 24
@@RoadsideCoder Great man are you an IITian
@@Solo_playz No, I'm from a tier 3 college
@@RoadsideCoder What is tier 3 ??
00:02 Understanding 'this' keyword in JavaScript
02:11 Understanding 'this' keyword in different contexts
04:14 Understanding 'this' keyword in JavaScript
06:32 Understanding 'this' keyword in normal function and arrow function
08:41 Understanding 'this' keyword in JavaScript object
10:37 Accessing 'this' inside a function can be tricky.
12:42 Understanding 'this' keyword in JavaScript
14:49 Understanding 'this' keyword in different functions
16:50 Understanding 'this' binding in JavaScript.
18:38 Understanding 'this' keyword in JavaScript functions
20:40 Example of chaining functions in JavaScript
22:32 Upcoming video on Explicit Binding
You are an absolute genius, i never understood this concept but your teaching is just fabulous, i hope that you launch your own udemy course in a structured way to master JS. You deserve to get paid for such content
Thanks a lot mate ❤️
Great explanation! A more accurate answer would be :
In an arrow function "this" is a part of its closure, i.e. it is taken from the context. Where it is defined and not the object in which it is defined.
In a normal function "this" is points to the object it is a part of.
this is some excellent practice material. pls add more o/p based Qs for OOJS, Prototypes, etc.
an addition to the problem at 17:25 -
if at line 4, we use let/ const instead of var to create 'length' variable, then while executing 'callback', the (this) Window object won't have length set to 4. It could be anything, like in JSFiddle, it is set to 0. since let/ const are created in TDZ.
there can be so many more variations to this problem. i find this an incredible practice problem. many thanks!
This series is Onepiece of Javascript
At 14:50 we can do "setTimeout(user.logMessage(), 1000);", its giving correct output. We can do this also "
setTimeout(user.logMessage.bind(user), 1000);"
this channel is highly addicted,i have seen more than 10 videos continously
Hahah good to know ❤️
@@RoadsideCoder you are awesome😎
I havent seen more detailed videos on coding subjects than yours! Thank you!
Haha, Thanks man!
This is some really high quality content and all for free! Your curation of questions are impressive, really making me scratch my head. Thank you mate!
Thanks man! Full course here - roadsidecoder.com/course-details
@@RoadsideCoder For sure. I'll buy your courses the first thing I get a job lol. Also do you have a patreon.
This is blowing my mind 😮
full playlist here - ruclips.net/p/PLKhlp2qtUcSaCVJEt4ogEFs6I41pNnMU5&si=wrbL8KA4a4fxHNRN
I know it is a generalization, but many Indian devs seem to have issues with following naming best practices and I can't figure out why that is...On a more serious note, great videos, well structured and researched.
This is because the whole video is a copy of an article by dmitripavlutin, my previous comment mentioning it was deleted.
@@de-stressmusic432 Its was helpful to have a written article
Just learned so many new things from this video. The last ques is just amazing. Please make more such video of questions like the last one. Highly informative content 👌✌
Thanks Piyush, your roadside coding clears so many doubts related to "this" 🤟🙏🙏
Glad to hear that
Extremely helpful video! Helped me to develop a more clear understanding of 'this' keyword . Please keep on making more such output based questions videos.
Yes, So many more on the way!
I absolutely LOVE your videos. You are amazing at explaining everything and for the first time EVER, I finally get it! Thank you. Do you have patreon? I'd love to support you.
Thanks, Was waiting for this!
I was asked many questions regarding this in Cars24 interview this week 😄
Oh great
Great video! Are you going to drop some videos related to OOP Concepts(constructor, class) or Prototype Inheritance?
Yes, definitely if more people ask for it!
@@RoadsideCoder pls do it , then more people will watch and subscribe like me
@@RoadsideCoder yes sir..I also interested. After that can you explain about promise from scratch.
@@RoadsideCoder yes please drop a video brother
@@RoadsideCoder yes, need some good videos on OOP concepts
I was recently asked a question on what is the difference between invoking the object directly suing the method & using call
I did not know this implicit bindings vs explicit binding
Great one kudos piyush :)
You are splendid
4:06 this keyword in a function with in an object points to the object
4:43 this keyword in a function with in a nested object points to the nested object
Unbelievable video! I like all your Playlist about react and javascript...
Love from indonesian 👍
Question 6 & 7 are just mind blowing.
Bhai Apka Knowledge toh kamal ka hai🖤🖤🖤
🙏❤️
Thank you so much!
This is so informative 💖
Thank you Piyush, great explanations as always.
this with arrow function is greatly explained. thank you
Welcome ❤️
Thank you so much! You're my favorite teacher.
13:50 logs name when we use parenthesis in front logMessage method invocation.... Or if you set user property using let keyword
thank you because of you I understand this
Thanks, u can check the complete course here - roadsidecoder.com/course-details
I love this
on 17:56 the same code run on browser and node console return different result. on node console it return undefined?
gem of explanation ...thank you
Please make a video on class , and its relation with this...Your content and teaching is fabulous.
You have great variety of questions
Hi Dear… I am really a big fan… You have such a deep knowledge of almost every technology. I have 1 request… Do you have any idea about how can we call salesforce commerce cloud API from Angular??? please reply if you know this or make a short video. Thanks
Yes we want video on class,new keyword , etc....
THIS IS GOLD
yes please make a video on constructors and this🙏
You can find this and other topics here - roadsidecoder.com/course-details
fact is `this` is the least thing we will ever gonna use (class based is exception) in our day to day work, this makes this concept tougher but interviewers love this type of question lol😆, btw Awesome video 🔥
That's not true, if your company is using let's say class based component in react, it will use 'this' a lot
@@RoadsideCoder Completely agree forget about class based ✌but we're shifting towards functional based programming 😌
for all the viewers i give the golden rule
* object don't create binding with this function do in js
for e.g
let obj = {
name:"steve",
valueOfthis:this,
arrowFn:()=>this,
normalFn:function(){
return this
}
}
here valueOfthis and arrowFn always gives window why because object don't create binding with this and arrow function also not create binding with this whereas normalFunction create binding with this
hope this explanation work 😀😀
Great explanation!! Thanks
this was great..can you please make videos on node,express,mongo too. That would be extremely helpful since you explain things quite nicely.
Can you please help expain in 18:02? Why the nested fn() is targeted the global window object? Thanks!
watch my functions video, u will understand it
Bro u make me great than my yesterday.
Thank you ...
Great to hear that brother!
Please continue this series
Question 5 was amazing! Thanks!
Yes
Please make video on class as well
Bro, your output based questions are Awsome.👋
Thanks dude!
yes Please create a deep tutorial on class and constructor
Awesome👍👍👍
Thank you! Cheers!
My solution for Question 2:
function user() {
return {
name: "Sajal",
ref: this
}
}
const test = user();
const result = user.bind(test);
console.log(result().ref.name); //Sajal
I tried it with .bind() 😀
Good job!
This always sounds confusing. Just the easiest way to interpret. Its always the caller function for the normal function calls and for the arrow functions it will always be 2 level deeper( kind of like parent of parent)
bro what's your approach for learning these type of concepts in depth?
Please make a video on session and local storage with Json.stringify , parse , constructors and classes also.
Amazing Video🥳
🙏❤️
Great video bro! Keep coming up with interesting videos like these ❤️.
Just adding one more concept here Arguments in a function is not an array it is array like object.
Array like object does not have all the properties of an array like map, filter etc.
Thanks for this important detail
Supep video
🙏
Thank you so much..amazing content.
Most welcome!
This is really good content. I can't deny that. But definitely here 'this' was explained in a hacky way. Please watch this related video from dev sage and you can really master this
Thanks, The main aim of this video is to assist for Javascript Interviews, therefore the hacky way.
Thank you
Amazing Video's ♥️
Thanks dude
Please tell the references point from where you learned all the core concepts of javascript
mdn docs
Have you come across any practice sites that help us sharpen these skills?
Helpful!! , thank you ❤
Welcome!
Nice.
Can you add interview series for Angular ? It will be really helpful for us as angular developer.
where we can practice all those types of question ?
Hello Can you make a video on OOPS concept in javascript.
Please release next vedio on bindings as soon as possible.
Hey Piyush, thanks for this awesome video. Please correct my understanding if I am wrong:
print is defined inside obj and obj don’t have its own scope its inheriting the scope from its parent which is global object that’s why arrow function pointing to global object (bcz it inherits this from lexical scope) .
let obj = {
name : 'temp',
print : () => {
console.log(this); // global/window object
}
}
It doesn't matter what scope obj has, arrow function takes its scope from parent normal function which in this case is not there, so it is targeting global. So even if the arrow function nested deep inside a object, if it doesn't have a parent normal function, it act the same.
@@RoadsideCoder Ok got it, arrow function search for nearest regular function that encloses it but in this case its not enclosed by any regular function then global this is inherited by arrow function.
@@jayantsharma2669 Yes!
Really good content, make some practice platform
please make video on class and constructor in Javascript
Make video on class, constructors video please, i don't understand those
sir , can u make videos to make nested comment section and folder structure using JS
Sure, Noted!
14:08 piyush, can we do bind as well here? because I think once we bind a method with a object, no matter when/where we call that function it will always point to that object.
Piyush please create video on class, prototype inheritance, and new feature of javascript
sir what is window object and global object?
plz explain a bit..
Hey, you can refer to this - developer.mozilla.org/en-US/docs/Web/API/Window
Why calling user.method() inside console.log is not called as callback??
var length =4;
function callback(){
console.log(this.length);
}
const object ={
length :5,
method(fn){
fn();
},
};
object.method(callback);
it giving undefined instead of output 4 anyone?
Ya facing the same issue
Make video for everything in javaScript ..
Video on class and constructors please!!
Soon!
please make oops concept on javascript in details
Great video as always. Btw you are saying and spelling “substract” instead of “subtract”
So What' difference if you upload same video in your paid course and and youtube ?
Here's your answer - www.linkedin.com/feed/update/urn:li:activity:7174019126041018370/?originTrackingId=GTshFzTMQBqFiLZrQQuBNw%3D%3D
let user = {
name :"hema mane!",
getName(){
console.log(this.name)
}
}
let data =setTimeout(
user.getName()
,1000)
console.log(data)
console.log(data) ---> is it correct way of accessing or else mandetory to use inside function only
can you make a video of stripe payment plzzzzzzzzzzzz in hindi
hey ,
where can we find these kind of other questions
Hey guys .. can anyone explain why window.ref.name is not undefined and it is empty?
Hello can anyone tell me where I can get the javascript output based questions
The day this video got published i was asked the calc question and i messed up because of 'this' reference
Bro why dont you create javascript vedios on basic data structure algorithm so it will help in interviews.
Yes I have planning that, coming soon!
Dude just got introduced to your channela few days back your content is amazing, keep going man!!
Welcome aboard! And thanks a lot. ❤️
Live stream + resume review
bhaiya , make a small js project which consist of these js concepts of debouncing , throttling etc.. placements r comming
Ok bro, noted!
make a video class and constructor
Hi, can anyone please explain 18:01
Q3. it should be setTimeout(user.logMassage(), 1000) //() missing
You should title these videos "JS trick questions". Seriously, if an interviewer was to ask these sorts of questions I'd politely excuse myself and look elsewhere.
this.a=7;
function test(){
console.log(this.a);
}
test() result is showing undefined