JavaScript "this" keyword and arrow function [duplicate]

Question

Here this keyword which is in arrow function points to obj's variable environment

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';
    
      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
  },
};

obj.fo(); //logs: hey

but in this new example it points to global object. I did not figure out what has changed? there is just added a new regular function fo2. Can anyone explain to me what is happening there? (I was anticipating that it would pointed to fo2's local environment and would printed "hello") Thanks in advance

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

    const fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    fo2();
  },
};

obj.fo(); //logs: hi

That's one of the differences between using an arrow function vs a regular function — Major_Ash
– Major_Ash, Commented Mar 7, 2021 at 15:17
The this keyword never points to an "environment", it points to a value (typically an object). It refers to the this value in fo2, which is the global object since you called fo2() (not as a method). — Bergi
– Bergi, Commented Mar 7, 2021 at 15:17
this inside foo2 refers to the window object and not the obj because of the way you have called fo2. Replace fo2() with fo2.call(this); and you will see the expected output. — Yousaf
– Yousaf, Commented Mar 7, 2021 at 15:17
@Yousaf That would still not print hello but hey which is present on obj since now this will be obj. I think the asker is confusing const/let/var declared variables being accessed via this. — Lakshya Thakur
– Lakshya Thakur, Commented Mar 7, 2021 at 15:24
@LakshyaThakur I though OP expected "hey" as the output - thank you for pointing that out. — Yousaf
– Yousaf, Commented Mar 7, 2021 at 15:28

Ahmetcan OZCAN · Accepted Answer · 2021-03-07 15:28:51Z

8

Arrow functions have no this value in their scope, so you can access this value of the object. But Normal functions have this value in their scope, in this example this value of the normal function is globalThis or window. and it allows to you access the global scope. if you call fo2 with this value of object instead of globalThis you get '"hey"'

var greeting = 'hi';

const obj  = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

    const fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    fo2.call(this) // Use this instead of fo2()
  },
};

answered Mar 7, 2021 at 15:28

Ahmetcan OZCAN

1364 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Belhadjer Samir · Accepted Answer · 2021-03-08 14:39:24Z

2

In JavaScript the this object is really based on how you make your function calls. the fo2() function is not binded in any object for this purpos it get the this of global context

you have to declare your function with the this like this :

var greeting = 'hi';

const obj = {
  greeting: 'hey',

  fo() {
    const greeting = 'hola';

     this.fo2 = function () {
      const greeting = 'hello';

      const arrowFo = () => {
        console.log(this.greeting);
      };

      arrowFo();
    };
    this.fo2();
  },
};

obj.fo(); //logs: hi

or use arrow function like this :

var greeting = 'hi';
const obj = {
  greeting: 'hey',
  fo() {
    const greeting = 'hola';
    fo2 =  () => {
      const greeting = 'hello';
      const arrowFo = () => {
        console.log(this.greeting);
      };
      arrowFo();
    };
    fo2();
    
  },
};
obj.fo();

edited Mar 8, 2021 at 14:39

answered Mar 7, 2021 at 15:56

Belhadjer Samir

1,6999 silver badges16 bronze badges

3 Comments

Leonardo Over a year ago

is it correct explanation if I say: arrow functions do not get their own 'this keyword'. Instead, if you use 'the this variable' in an arrow function, it will simply be the this keyword of the surrounding function. and in my example foo2(surrounding function) was pointed to global object as general regular function do. and that was why it printed "hi"

Belhadjer Samir Over a year ago

Yeah in the second function example the this of arrow function will be the this of the function surrounding wich is fo2() the problem is in fo2 function wich didn't get the this of obj because it's called with the global this

Belhadjer Samir Over a year ago

The solution is to make fo2 and arrow function to get the this of obj or to call it with this.fo2

Collectives™ on Stack Overflow

JavaScript "this" keyword and arrow function [duplicate]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related