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);"
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
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!
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.
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
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 :)
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 some really high quality content and all for free! Your curation of questions are impressive, really making me scratch my head. Thank you mate!
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.
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 🔥
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() 😀
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.
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
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
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 😀😀
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.
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.
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.
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 ??
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);"
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
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!
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 series is Onepiece of Javascript
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 ❤️
13:50 logs name when we use parenthesis in front logMessage method invocation.... Or if you set user property using let keyword
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 :)
this channel is highly addicted,i have seen more than 10 videos continously
Hahah good to know ❤️
@@RoadsideCoder you are awesome😎
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
Question 6 & 7 are just mind blowing.
Bhai Apka Knowledge toh kamal ka hai🖤🖤🖤
🙏❤️
This is blowing my mind 😮
full playlist here - ua-cam.com/play/PLKhlp2qtUcSaCVJEt4ogEFs6I41pNnMU5.html&si=wrbL8KA4a4fxHNRN
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.
Unbelievable video! I like all your Playlist about react and javascript...
Love from indonesian 👍
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 👌✌
Thank you Piyush, great explanations as always.
You are splendid
Thanks Piyush, your roadside coding clears so many doubts related to "this" 🤟🙏🙏
Glad to hear that
I havent seen more detailed videos on coding subjects than yours! Thank you!
Haha, Thanks man!
on 17:56 the same code run on browser and node console return different result. on node console it return undefined?
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
Thanks, Was waiting for this!
I was asked many questions regarding this in Cars24 interview this week 😄
Oh great
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
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!
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 😌
this with arrow function is greatly explained. thank you
Welcome ❤️
You have great variety of questions
thank you because of you I understand this
Thanks, u can check the complete course here - roadsidecoder.com/course-details
Thank you so much! You're my favorite teacher.
gem of explanation ...thank you
Please make a video on class , and its relation with this...Your content and teaching is fabulous.
Thank you so much!
This is so informative 💖
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!
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.
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
Question 5 was amazing! Thanks!
Bro u make me great than my yesterday.
Thank you ...
Great to hear that brother!
Great explanation!! Thanks
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.
this was great..can you please make videos on node,express,mongo too. That would be extremely helpful since you explain things quite nicely.
I love this
thank you Roadside coder .
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 😀😀
Bro, your output based questions are Awsome.👋
Thanks dude!
Yes we want video on class,new keyword , etc....
Yes
Please make video on class as well
THIS IS GOLD
yes please make a video on constructors and this🙏
You can find this and other topics here - roadsidecoder.com/course-details
Thank you so much..amazing content.
Most welcome!
yes Please create a deep tutorial on class and constructor
Please continue this series
Amazing Video's ♥️
Thanks dude
Amazing Video🥳
🙏❤️
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.
Thanks for this important detail
Really good content, make some practice platform
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.
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!
Awesome👍👍👍
Thank you! Cheers!
Helpful!! , thank you ❤
Welcome!
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
Please make a video on session and local storage with Json.stringify , parse , constructors and classes also.
Have you come across any practice sites that help us sharpen these skills?
Make video for everything in javaScript ..
Supep video
🙏
Great video as always. Btw you are saying and spelling “substract” instead of “subtract”
Please release next vedio on bindings as soon as possible.
bro what's your approach for learning these type of concepts in depth?
Thank you
Can you add interview series for Angular ? It will be really helpful for us as angular developer.
Dude just got introduced to your channela few days back your content is amazing, keep going man!!
Welcome aboard! And thanks a lot. ❤️
Video on class and constructors please!!
Soon!
please make video on class and constructor in Javascript
Piyush please create video on class, prototype inheritance, and new feature of javascript
Make video on class, constructors video please, i don't understand those
Please tell the references point from where you learned all the core concepts of javascript
mdn docs
Nice.
Hello Can you make a video on OOPS concept in javascript.
Hi, can anyone please explain 18:01
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
please make oops concept on javascript in details
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!
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
hey ,
where can we find these kind of other questions
Hello can anyone tell me where I can get the javascript output based questions
where we can practice all those types of question ?
sir , can u make videos to make nested comment section and folder structure using JS
Sure, Noted!
this.a=7;
function test(){
console.log(this.a);
}
test() result is showing undefined
Why calling user.method() inside console.log is not called as callback??
can you make a video of stripe payment plzzzzzzzzzzzz in hindi
Q3. it should be setTimeout(user.logMassage(), 1000) //() missing
Hey guys .. can anyone explain why window.ref.name is not undefined and it is empty?
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
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.
you go boy!!!!❤️❤️
🙏❤️
make a video class and constructor
The day this video got published i was asked the calc question and i messed up because of 'this' reference
bhaiya , make a small js project which consist of these js concepts of debouncing , throttling etc.. placements r comming
Ok bro, noted!