Using 'this' keyword in an arrow function object method

I wanna ask why does the print1 method that uses arrow function logs undefined, while the print2 method logs correctly.

let object = {
    x: 10,
    y: 20,
    print1: () => {
        console.log(`${this.x}`); // but when I change 'this.x' to 'object.x' it works fine
    },
    print2: function () {
        console.log(`${this.x}`);
    }
};

object.print1(); // logs undefined
object.print2(); // logs 10

Try reading this and see if it is helpful

https://medium.com/free-code-camp/learn-es6-the-dope-way-part-ii-arrow-functions-and-the-this-keyword-381ac7a32881#.59q9th108

1 Like