Javascript "This" differences in arrow functions

Question

here are two simple codes:

let myObject = {
objectName: () => {
    console.log(this);
}
};

myObject.objectName();

First code print "this" value as: { }

let myObject = {
objectName: function() {
    console.log(this);
}
};

myObject.objectName();

Second code print "this" value as: { objectName: [Function: objectName] }

Can somebody explain in plain English why "this" in arrow function has different value ? Thank you!

because, well ... [here's some documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) — Jaromanda X, May 08 '18 at 12:20

score 0 · Answer 1 · answered May 08 '18 at 12:22

An arrow function expression has a shorter syntax than a function expression and does not have its own this , arguments, super, or new.target. The this value of the enclosing execution context is used.

If you don't use an arrow function, a function gets its this value from where it is called.

Check this for more details

How does event handlers with arrow functions achieve context binding

Javascript "This" differences in arrow functions

1 Answers1