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