this is undefined inside arrow function

Question

I am trying to access this inside my arrow function:

import myObject from '../myObjectPath';
export const myClass = Fluxxor.createStore({
    initialize() {
        this.list = [];
        this.id = null;
    },
    myOutsideFunction(variable1) {
        // here this in NOT undefined
        myObject.getMyList(this.id, (myList) => {
            // here this in undefined
            this.list = myList;
        } 
    });
)};

But inside arrow function which in ma callback function this is undefined!!

I am using babel to transpile the code:

myOutsideFunction: function myOutsideFunction() {
    var _this = this;
    myObject.getMyList(function (myList) {
        _this.list = myList;
    });
},

Answer 1

If this is undefined within an arrow function, it's undefined outside of the arrow as well. Arrow function simply capture the this of the surrounding scope.

In this case, you're declaring myOutsideFunction as a method on an object literal and never binding it or doing anything else that would call it with the object as this.

When debugging, bear in mind that transpilers can rename variables (and have to rename this for it to capture correctly). Using the original name in the console without sourcemaps that include renaming will show you undefined even if the original value isn't. Make sure you use the transpiled name in watches or console commands.