Discussion on "JavaScript: this is easy and what do you need to know about it!"

Tapas Adhikary · 2020-07-06T05:10:12.357Z

Introduction Let me start this article by thanking the readers of my series, JavaScript: Cracking the Nuts for liking and loving it so far. This article will go through another fundamental but equally misunderstood aspect of JavaScript called the th...

Discussion on "JavaScript: this is easy and what do you need to know about it!" | Hashnode

Juan

Learning Javascript

Apr 7, 2024

Hello, I'm learning Javascript from internet and searching answers for knowing how 'this' works in arrow and normal functions get your amazing posts. It all was fine until I get the following part : "What do you think, this would be bound to here inside forEach? It is not an arrow function. It is a regular function, and it has its own execution context. In that execution context, there is nothing called a name. Hence this.name is undefined." Because of in your previous post about binding, the object on which the function is called define the binding of 'this'. So I don't understand which is the Object on which the anonymous function (inside of forEach) is called in this case. It would be good identify that in order to follow the thread of the previous explanations. I am aware of this is 4 year old, and maybe you are in other business, but I get here today and write this question just in any case. Thanks.

Juan

Learning Javascript

Well, I was doing more things to get clarify the 'this' unclear, in the example code from your post:

////////////////////////////////////////////////////

var testHobbies = { hobbies: ['Cricket', 'Football', 'Blogging'], name: 'Alex', logHobbies() { this.hobbies.forEach(function(elem){ console.log(${this.name} knows ${elem}); }); } } ////////////////////////////////////////////////////////

So, changing in the code 'this.name' by only 'this' when it runs result the following output;

[object global] knows Cricket [object global] knows Football [object global] knows Blogging

Then taking from your explanation on the Binging part: "if the this keyword is not resolved with any of the above bindings, implicit, explicit or new then, the this binds to the window(global) object."

So in the example code above, the 'this' inside the anonymous function binds to object global, because 'this' keyword is not resolved with any of bindings: implicit, explict or new, and also it doesn't exist in its function context. That is what I understand until here.

Prateek Aher

Flutter | Dart | Golang | Software Development

Aug 23, 2020

In your code snippet under 'apply() method', shouldn't hobby1 and hobby2 be replaced by hobbies[0] and hobbies[1] respectively?

Tapas Adhikary

Educator @tapaScript | Founder CreoWis & ReactPlay - Writer - YouTuber - Open Source

Aug 23, 2020

Prateek Aher,

Thanks for reading and commenting.

shouldn't hobby1 and hobby2 be replaced by hobbies[0] and hobbies[1] respectively?

No, actually. The apply method is one step better than the call where you can pass the entire array as an argument. The number of parameters passed to the applied function would be mapped to the number of array elements passed to apply in the same order.

Another way to visualize it, think about the arguments itself. It is available to the function as local variable. See how I can retrieve with the element by element in this case.


var getName = function() {
     console.log(this.name + ' likes ' + arguments[0] + ' , ' + arguments[1]);
 }
 var user = {
   name: 'Tapas',
   address: 'Bangalore'  
 };

 var hobbies = ['Swimming', 'Blogging'];
 getName.apply(user, hobbies);

Hope I was able to clarify. Please let me know.

Prateek Aher

Flutter | Dart | Golang | Software Development

Aug 23, 2020

Tapas Adhikary It is clear to me now. My bad, I mistook the argument-list as parameters.

Discussion

JavaScript: this is easy and what do you need to know about it!

Responses(6)

Recent in Forum

Search Hashnode

JavaScript: this is easy and what do you need to know about it!

Responses(6)

Recent in Forum