Javascript Interview Questions ( 'this' Keyword ) - Output Based, Scope, Implicit Binding, etc

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details

[@Solo_playz]

Hii brother can I get to know what's your age ??

[@RoadsideCoder]

@@Solo_playz 24

[@Solo_playz]

@@RoadsideCoder Great man are you an IITian

[@RoadsideCoder]

@@Solo_playz No, I'm from a tier 3 college

[@Solo_playz]

@@RoadsideCoder What is tier 3 ??

[@xen0076]

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

[@RoadsideCoder]

Thanks a lot mate ❤️

[@shubhamkharadkar3753]

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

[@purusharma8192]

this channel is highly addicted,i have seen more than 10 videos continously

[@RoadsideCoder]

Hahah good to know ❤️

[@purusharma8192]

@@RoadsideCoder you are awesome😎

[@ismailshaikhdev]

This series is Onepiece of Javascript

[@harshdeepbilaiya3076]

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!

[@AkramDevTalks]

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.

[@dhananjaygupta8554]

This is blowing my mind 😮

[@RoadsideCoder]

full playlist here - kzbin.info/aero/PLKhlp2qtUcSaCVJEt4ogEFs6I41pNnMU5&si=wrbL8KA4a4fxHNRN

[@ivanshoshkov]

I havent seen more detailed videos on coding subjects than yours! Thank you!

[@RoadsideCoder]

Haha, Thanks man!

[@anubhapant5227]

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 👌✌

[@shash0_0]

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!

[@RoadsideCoder]

Thanks man! Full course here - roadsidecoder.com/course-details

[@shash0_0]

@@RoadsideCoder For sure. I'll buy your courses the first thing I get a job lol. Also do you have a patreon.

[@lann1sterroy]

Thank you Piyush, great explanations as always.

[@vincent3542]

Unbelievable video! I like all your Playlist about react and javascript... Love from indonesian 👍

[@kartik7775]

Thank you so much! You're my favorite teacher.

[@sanjaytk]

Thanks Piyush, your roadside coding clears so many doubts related to "this" 🤟🙏🙏

[@RoadsideCoder]

Glad to hear that

[@navneet8638]

Bhai Apka Knowledge toh kamal ka hai🖤🖤🖤

[@RoadsideCoder]

🙏❤️

[@MukeshKumar-bt5gb]

Thanks, Was waiting for this! I was asked many questions regarding this in Cars24 interview this week 😄

[@RoadsideCoder]

Oh great

[@akshayshinde2403]

Question 6 & 7 are just mind blowing.

[@shrushtipolekar8804]

Extremely helpful video! Helped me to develop a more clear understanding of 'this' keyword . Please keep on making more such output based questions videos.

[@RoadsideCoder]

Yes, So many more on the way!

[@fares.abuali]

Thank you so much! This is so informative 💖

[@itsMohak]

You are splendid

[@ninjaplavi]

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.

[@de-stressmusic432]

This is because the whole video is a copy of an article by dmitripavlutin, my previous comment mentioning it was deleted.

[@touseef_baba_007]

@@de-stressmusic432 Its was helpful to have a written article

[@front-end-world]

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 :)

[@bruhathimusicalwings1503]

gem of explanation ...thank you

[@himanshupandey3451]

on 17:56 the same code run on browser and node console return different result. on node console it return undefined?

[@simionandrei5409]

Great video! Are you going to drop some videos related to OOP Concepts(constructor, class) or Prototype Inheritance?

[@RoadsideCoder]

Yes, definitely if more people ask for it!

[@manojradharapu4688]

@@RoadsideCoder pls do it , then more people will watch and subscribe like me

[@techupdate03]

@@RoadsideCoder yes sir..I also interested. After that can you explain about promise from scratch.

[@kalyanyadlapalli6103]

@@RoadsideCoder yes please drop a video brother

[@ashwaniagrawal700]

@@RoadsideCoder yes, need some good videos on OOP concepts

[@AmirHussain-dd6zw]

You have great variety of questions

[@charankumarbasam5866]

this with arrow function is greatly explained. thank you

[@RoadsideCoder]

Welcome ❤️

[@vinithaboyidi3354]

Great explanation!! Thanks

[@BCSBhaveekJain]

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);"

[@AmolAghav]

Question 5 was amazing! Thanks!

[@abhishekkumar-ot4zo]

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

[@kalynndier6524]

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.

[@shubhamkakad10x]

thank you because of you I understand this

[@RoadsideCoder]

Thanks, u can check the complete course here - roadsidecoder.com/course-details

[@ambeshtiwari9977]

thank you Roadside coder .

[@RahulKumar-ew1qw]

Bro u make me great than my yesterday. Thank you ...

[@RoadsideCoder]

Great to hear that brother!

[@imtiazalikhan2709]

Bro, your output based questions are Awsome.👋

[@RoadsideCoder]

Thanks dude!

[@SonuKumar-tw1oi]

Please make a video on class , and its relation with this...Your content and teaching is fabulous.

[@nishachapte7]

Thank you so much..amazing content.

[@RoadsideCoder]

Most welcome!

[@mohininarwade1108]

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

[@varunparihar3717]

this was great..can you please make videos on node,express,mongo too. That would be extremely helpful since you explain things quite nicely.

[@chiragsheth2263]

13:50 logs name when we use parenthesis in front logMessage method invocation.... Or if you set user property using let keyword

[@mohdraqim2571]

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?

[@brakesh1273]

Ya facing the same issue

[@hellochenyu]

Can you please help expain in 18:02? Why the nested fn() is targeted the global window object? Thanks!

[@RoadsideCoder]

watch my functions video, u will understand it

[@parmarhitendrasinh4504]

Amazing Video's ♥️

[@RoadsideCoder]

Thanks dude

[@angryman9333]

I love this

[@shreymaurya3344]

Amazing Video🥳

[@RoadsideCoder]

🙏❤️

[@ankushladani496]

Yes we want video on class,new keyword , etc....

[@UtkarshSinghP]

THIS IS GOLD

[@rahulvanave]

Yes Please make video on class as well

[@pushpabhandari619]

Helpful!! , thank you ❤

[@RoadsideCoder]

Welcome!

[@dharmeshgohil9375]

Awesome👍👍👍

[@RoadsideCoder]

Thank you! Cheers!

[@deepakverma2071]

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.

[@RoadsideCoder]

Thanks for this important detail

[@tpadma7419]

yes please make a video on constructors and this🙏

[@RoadsideCoder]

You can find this and other topics here - roadsidecoder.com/course-details

[@abhishekvishwakarma9045]

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 🔥

[@RoadsideCoder]

That's not true, if your company is using let's say class based component in react, it will use 'this' a lot

[@abhishekvishwakarma9045]

@@RoadsideCoder Completely agree forget about class based ✌but we're shifting towards functional based programming 😌

[@ProgrammingWithProject]

Please continue this series

[@sidhishkumar]

yes Please create a deep tutorial on class and constructor

[@lifeisbeautifu1]

Thank you

[@sajalgupta7345]

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() 😀

[@RoadsideCoder]

Good job!

[@Saikumar-kb4lf]

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

[@RoadsideCoder]

Thanks, The main aim of this video is to assist for Javascript Interviews, therefore the hacky way.

[@riturathinsharma5931]

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)

[@abd11868]

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.

[@krunaljoshi7390]

Really good content, make some practice platform

[@ShivamKhantwal94]

bro what's your approach for learning these type of concepts in depth?

[@VivekG-e1o]

Please make a video on session and local storage with Json.stringify , parse , constructors and classes also.

[@anejasahil]

Dude just got introduced to your channela few days back your content is amazing, keep going man!!

[@RoadsideCoder]

Welcome aboard! And thanks a lot. ❤️

[@anandstephan6020]

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 😀😀

[@parmaryash4406]

Supep video

[@RoadsideCoder]

🙏

[@GopalAkkar-h9b]

Can you add interview series for Angular ? It will be really helpful for us as angular developer.

[@jayantsharma2669]

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 } }

[@RoadsideCoder]

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.

[@jayantsharma2669]

@@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.

[@RoadsideCoder]

@@jayantsharma2669 Yes!

[@ProgrammingWithProject]

Please tell the references point from where you learned all the core concepts of javascript

[@RoadsideCoder]

mdn docs

[@tharapearlly1736]

Have you come across any practice sites that help us sharpen these skills?

[@acchugowda7767]

Please release next vedio on bindings as soon as possible.

[@charuhas1602]

Piyush please create video on class, prototype inheritance, and new feature of javascript

[@neeraj-u6e]

Make video for everything in javaScript ..

[@RavindraSingh-lp9pl]

please make video on class and constructor in Javascript

[@ShivamSingh-ct1ix]

Hello Can you make a video on OOPS concept in javascript.

[@DevangPatil]

Nice.

[@divyasampath2843]

Video on class and constructors please!!

[@RoadsideCoder]

Soon!

[@0Ipsita0]

Make video on class, constructors video please, i don't understand those

[@divasbhadani9225]

where we can practice all those types of question ?

[@PIYUSH-lz1zq]

sir , can u make videos to make nested comment section and folder structure using JS

[@RoadsideCoder]

Sure, Noted!

[@sequoiakanies2202]

Great video as always. Btw you are saying and spelling “substract” instead of “subtract”

[@avinaymishra8345]

please make oops concept on javascript in details

[@mastpahadan490]

you go boy!!!!❤️❤️

[@RoadsideCoder]

🙏❤️

[@mohitarya5189]

Hello can anyone tell me where I can get the javascript output based questions

[@vishaltp6083]

hey , where can we find these kind of other questions

[@shubhanshusahuu]

Why calling user.method() inside console.log is not called as callback??

[@ammanmoini1202]

sir what is window object and global object? plz explain a bit..

[@RoadsideCoder]

Hey, you can refer to this - developer.mozilla.org/en-US/docs/Web/API/Window

[@abhirocks723]

Hey guys .. can anyone explain why window.ref.name is not undefined and it is empty?

[@dharmeshgohil9375]

can you make a video of stripe payment plzzzzzzzzzzzz in hindi

[@s1k_guy]

Bro why dont you create javascript vedios on basic data structure algorithm so it will help in interviews.

[@RoadsideCoder]

Yes I have planning that, coming soon!

[@ayushyadav8851]

The day this video got published i was asked the calc question and i messed up because of 'this' reference

[@techycode2217]

So What' difference if you upload same video in your paid course and and youtube ?

[@RoadsideCoder]

Here's your answer - www.linkedin.com/feed/update/urn:li:activity:7174019126041018370/?originTrackingId=GTshFzTMQBqFiLZrQQuBNw%3D%3D

[@bluevojka]

Hi, can anyone please explain 18:01

[@hemamane739]

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

[@PIYUSH-lz1zq]

bhaiya , make a small js project which consist of these js concepts of debouncing , throttling etc.. placements r comming

[@RoadsideCoder]

Ok bro, noted!

[@ketandutt]

Q3. it should be setTimeout(user.logMassage(), 1000) //() missing

[@arvindverma2629]

make a video class and constructor

[@rohithchittibommala2002]

Live stream + resume review