Javascript Interview Questions ( 'this' Keyword ) - Output Based, Scope, Implicit Binding, etc
Vložit
- čas přidán 16. 06. 2024
- #JavascriptInterview #Javascript #FrontendInterview
Javascript Interview Questions on 'this' Keyword ( or Implicit Binding ) will be discussed in this video including how it behaves in global context, Function, Object etc.
🟦 Follow me on Twitter and u will clear your interview 🤓 -
/ piyush_eon
⭐ Support the channel and learn from me One on One -
/ @roadsidecoder
🔗 Blog for the video -
roadsidecoder.hashnode.dev/ja...
🔗 Functions Interview Video -
• Javascript Interview Q...
🔗 Objects Interview Video -
• Javascript Interview Q...
🔗 Javascript Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
-------------------------------------------------------------------------
00:00 Intro
01:00 What is 'this' ?
01:53 'this' in Global Context
02:30 'this' in normal function
03:08 'this' in arrow function
03:37 'this' in function inside Object
07:33 'this' in a class
09:26 Ques 1 - Output Based Question
10:35 Ques 2 - Result of accessing ref
12:41 Ques 3 - setTimeout and 'this' keyword
14:59 Ques 4 - Output Based Question
15:44 Ques 5 - Create a Calculator
17:24 Ques 6 - Output Based Question
20:15 Ques 7 - Implement 'calc' object
22:39 Call, Bind and Apply
-------------------------------------------------------------------------
Special Thanks to our members -
Srinivas Ayyagari
Saikiran K
🔴 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 ??
I havent seen more detailed videos on coding subjects than yours! Thank you!
Haha, Thanks man!
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!
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.
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 ❤️
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!
This series is Onepiece of Javascript
Question 6 & 7 are just mind blowing.
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 👌✌
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.
Unbelievable video! I like all your Playlist about react and javascript...
Love from indonesian 👍
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 with arrow function is greatly explained. thank you
Welcome ❤️
Thank you so much! You're my favorite teacher.
You have great variety of questions
You are splendid
gem of explanation ...thank you
this channel is highly addicted,i have seen more than 10 videos continously
Hahah good to know ❤️
@@RoadsideCoder you are awesome😎
Question 5 was amazing! Thanks!
Thank you so much!
This is so informative 💖
THIS IS GOLD
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
Yes we want video on class,new keyword , etc....
Thanks, Was waiting for this!
I was asked many questions regarding this in Cars24 interview this week 😄
Oh great
Please make a video on class , and its relation with this...Your content and teaching is fabulous.
thank you Roadside coder .
I love this
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.
Great explanation!! Thanks
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 :)
Please continue this series
this was great..can you please make videos on node,express,mongo too. That would be extremely helpful since you explain things quite nicely.
Bro u make me great than my yesterday.
Thank you ...
Great to hear that brother!
Bhai Apka Knowledge toh kamal ka hai🖤🖤🖤
🙏❤️
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
Please make video on class as well
yes Please create a deep tutorial on class and constructor
Bro, your output based questions are Awsome.👋
Thanks dude!
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.
Thank you
Helpful!! , thank you ❤
Welcome!
13:50 logs name when we use parenthesis in front logMessage method invocation.... Or if you set user property using let keyword
Thank you so much..amazing content.
Most welcome!
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
Awesome👍👍👍
Thank you! Cheers!
Please release next vedio on bindings as soon as possible.
Nice.
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's ♥️
Thanks dude
Have you come across any practice sites that help us sharpen these skills?
Please make a video on session and local storage with Json.stringify , parse , constructors and classes also.
Can you add interview series for Angular ? It will be really helpful for us as angular developer.
Supep video
🙏
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 😌
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
please make video on class and constructor in Javascript
Make video for everything in javaScript ..
Really good content, make some practice platform
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);"
Hello Can you make a video on OOPS concept in javascript.
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!
Make video on class, constructors video please, i don't understand those
on 17:56 the same code run on browser and node console return different result. on node console it return undefined?
please make oops concept on javascript in details
Dude just got introduced to your channela few days back your content is amazing, keep going man!!
Welcome aboard! And thanks a lot. ❤️
hey ,
where can we find these kind of other questions
Video on class and constructors please!!
Soon!
where we can practice all those types of question ?
The day this video got published i was asked the calc question and i messed up because of 'this' reference
can you make a video of stripe payment plzzzzzzzzzzzz in hindi
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!
Please tell the references point from where you learned all the core concepts of javascript
mdn docs
sir , can u make videos to make nested comment section and folder structure using JS
Sure, Noted!
Live stream + resume review
Great video as always. Btw you are saying and spelling “substract” instead of “subtract”
Why calling user.method() inside console.log is not called as callback??
🌟🌟🌟🔥
make a video class and constructor
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
bhaiya , make a small js project which consist of these js concepts of debouncing , throttling etc.. placements r comming
Ok bro, noted!
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!
Hello can anyone tell me where I can get the javascript output based questions
Where are you working now bro
Hey guys .. can anyone explain why window.ref.name is not undefined and it is empty?
put dsa and oop vids on javascript
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
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
Q3. it should be setTimeout(user.logMassage(), 1000) //() missing
this.a=7;
function test(){
console.log(this.a);
}
test() result is showing undefined
you go boy!!!!❤️❤️
🙏❤️
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
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 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.
Hi, can anyone please explain 18:01
Where to get all these questions?
All questions are from here dmitripavlutin.com/javascript-this-interview-questions/
@@samyakjain9850 thanks man
what's more confusing to me is What's on your Head ??
Where I'm from, Its called hair👀
"this" is scary