Unclear on the usage of "this" in arrow functions?

Question

Unclear on the usage of "this" in arrow functions?

After going through various discussions and articles on this topic, I find myself still perplexed about the meaning of this in arrow functions.

I've been encountering run-time errors with a code snippet similar to the following:

export class Foo implements OnInit {
myProp: string;
myKeys: Array<any> = [];
mySubKeys: Array<any> = [];
@Input myObj;

. . . 

ngOnInit() {

this.myKeys = Object.keys(this.myObj); 
this.myKeys.forEach((key) => {
    this.myProp = key;
    this.mySubKeys = Object.keys(this.myObj[key]);
    this.mySubKeys.forEach((subkey) => { . . .  
. . .

The issue arises at this.myProp = key where the debugger indicates that this is undefined.

I'm under the impression that in arrow functions, this refers to the this preceding the scope within which the arrow function is called. In this scenario, shouldn't the preceding scope be the class, making this.myProp valid?

Attempting to change the arrow function to forEach(function(key) { . . . resulted in different errors.

So if the this inside the arrow function doesn't point to the class this, how can I access the class this along with its properties (like myProp) from within the arrow function?

javascript angular typescript

Answer 1

Answer №1

One of the main reasons for this issue is that the value of this within a function is dependent on how the function is invoked.

For instance, if the function is called as this.myKeys.forEach(), then the value of this will be the calling context, which in this situation is myKeys.

However, it's important to note that it won't always be

myKeys</code. Therefore, trying to access <code>this.myProp & this.mySubKeys

might not return value - instead, it could result in an undefined value or trigger an error.

The unpredictability of this is a common challenge in the world of Javascript and has been a longstanding issue.

In ES5, there are several techniques available to handle and stabilize the value of this. One popular approach is to assign this to another variable at the beginning, often referred to as self, and then consistently utilize self within the function body, like so:

ngOnInit() {


   this.myKeys = Object.keys(this.myObj) {

    let self = this; // declare the variable to refer class object
    this.myKeys.forEach((key) => {
        self.myProp = key;
        self.mySubKeys = Object.keys(this.myObj[key]);
        self.mySubKeys.forEach((subkey) => { . . .  
   . . .

Hopefully, this explanation proves to be helpful!

Answer 2

One of the main reasons for this issue is that the value of this within a function is dependent on how the function is invoked.

For instance, if the function is called as this.myKeys.forEach(), then the value of this will be the calling context, which in this situation is myKeys.

However, it's important to note that it won't always be

myKeys</code. Therefore, trying to access <code>this.myProp & this.mySubKeys

might not return value - instead, it could result in an undefined value or trigger an error.

The unpredictability of this is a common challenge in the world of Javascript and has been a longstanding issue.

In ES5, there are several techniques available to handle and stabilize the value of this. One popular approach is to assign this to another variable at the beginning, often referred to as self, and then consistently utilize self within the function body, like so:

ngOnInit() {


   this.myKeys = Object.keys(this.myObj) {

    let self = this; // declare the variable to refer class object
    this.myKeys.forEach((key) => {
        self.myProp = key;
        self.mySubKeys = Object.keys(this.myObj[key]);
        self.mySubKeys.forEach((subkey) => { . . .  
   . . .

Hopefully, this explanation proves to be helpful!

Answer 3

Answer №2

The usage of this in the provided code should function as intended. It appears that the issue lies within this specific line:

this.myKeys = Object.keys(this.myObj) {

There seems to be an unnecessary opening { instead of a closing ;.

this.myKeys = Object.keys(this.myObj);

The corrected code snippet should resemble:

ngOnInit() {
    this.myKeys = Object.keys(this.myObj);
    this.myKeys.forEach((key) => {
        this.myProp = key;
        this.mySubKeys = Object.keys(this.myObj[key]);

Update:

A demo has been included for testing to ensure that the functionality of this is correct: https://stackblitz.com/edit/stackoverflow-mykeys-demo

Please note that the Input() must also include the ().

Answer 4

The usage of this in the provided code should function as intended. It appears that the issue lies within this specific line:

this.myKeys = Object.keys(this.myObj) {

There seems to be an unnecessary opening { instead of a closing ;.

this.myKeys = Object.keys(this.myObj);

The corrected code snippet should resemble:

ngOnInit() {
    this.myKeys = Object.keys(this.myObj);
    this.myKeys.forEach((key) => {
        this.myProp = key;
        this.mySubKeys = Object.keys(this.myObj[key]);

Update:

A demo has been included for testing to ensure that the functionality of this is correct: https://stackblitz.com/edit/stackoverflow-mykeys-demo

Please note that the Input() must also include the ().

Answer 5

Answer №3

According to the MDN website:

Arrow functions do not have their own 'this' binding. Instead, they inherit the 'this' value from the surrounding lexical scope; arrow functions adhere to the standard variable lookup rules. Therefore, when attempting to access 'this' in a scope where it is not defined, arrow functions will look to its enclosing scope for the 'this' value.

Answer 6

According to the MDN website:

Arrow functions do not have their own 'this' binding. Instead, they inherit the 'this' value from the surrounding lexical scope; arrow functions adhere to the standard variable lookup rules. Therefore, when attempting to access 'this' in a scope where it is not defined, arrow functions will look to its enclosing scope for the 'this' value.

Unclear on the usage of "this" in arrow functions?

Answer №1

Answer №2

Answer №3

Similar questions

Encountering a getMacChromiumEdgeDriverArchitecture error while using wdio/selenium-standalone-service

Extension: What is the best way to leverage data obtained from an ajax request in order to dynamically modify an already existing element within

Is the Three.JS camera update causing issues with the shader?

several parameters for the `ts-node -r` options

Using JavaScript promises to handle connection pooling and query execution

What is the best way to set up a session using jQuery?

Access the information from the text box and text area, then store it into a cookie using either jQuery or JavaScript

Extracting data on an AngularJS platform by using web scraping techniques

The Angular template driven forms are flagging as invalid despite the regExp being a match

What is the purpose of importing a module in app.module.ts? And what specifically happens when importing classes one by one in the

Creating a sleek horizontal drop-down navigation menu using Bootstrap 5 and CSS

Sorting through an array using a different array of values

What is the designated action or code in question?

The attempt to update several partial views using Jquery, MVC, and Json is currently malfunctioning

When a function is called, retrieve a specific number of elements from an array using the slice method in

Display or Conceal Content Depending on the Button's Status

How do I set up middleware with async/await in NestJS?

Mastering the art of utilizing middleware in every HTTP request using Node.js Express

Error: The function Undefined is not recognized by express.io

Creating a custom class implementation in JavaScript and initializing it with a constructor function