this with arrow

Learn the this context in arrow functions.

Arrow and this

Arrow functions do not have their own this. this is taken from the enclosing scope (lexical binding). In regular functions, this is determined by the call site.

const nesne = {
  ad: "Ali",
  goster: function(): string {
    const ok = (): string => this.ad;  // this = nesne
    return ok();
  }
};
nesne.goster();  // "Ali"

An arrow function inherits this from its enclosing scope.

Arrow functions in callbacks

In nested callbacks inside a method, using a regular function loses this. An arrow function preserves the method's this, so arrow functions are preferred in callbacks.

const nesne = {
  ad: "Ali",
  goster: function(): void {
    [1].forEach(() => console.log(this.ad));
  }
};

An arrow function does not lose this inside a callback.

Exercise Use this with an arrow function

Define an object named nesne with the ad property set to "Ali". The goster method should be a regular function containing an arrow function that returns this.ad. Print the result of calling nesne.goster() with console.log.

Show example solution

const nesne = {
    ad: "Ali",
    goster: function(): string {
        const ok = (): string => this.ad;
        return ok();
    }
};
console.log(nesne.goster());

Test yourself

How is <code>this</code> determined in an arrow function?
- Determined by the call site
- Inherited from the enclosing scope
- It is always the global object
- It is always undefined
Show answer

Inherited from the enclosing scope — An arrow function does not create its own <code>this</code>; it takes the enclosing scope's <code>this</code> lexically. In regular functions, <code>this</code> varies by call site.

The this property in the arrow function

const nesne = {
  ad: "Ali",
  goster: function(): string {
    const ok = (): string => this.____;
    return ok();
  }
};

Show answer

const nesne = {
  ad: "Ali",
  goster: function(): string {
    const ok = (): string => this.ad;
    return ok();
  }
};

this binding concepts

Arrow function this

Taken from lexical scope
Regular function this

Determined by call site
Lexical scope

Enclosing scope's this
this binding

Lexical in arrow functions

Next lesson: Arrow type

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies