es6 arrow function not recognizing this operator after transpiling to javascript

Question

I am working on a node app that is transpiled from typescript es6 to javascript es6. I am using inversify to inject class dependencies into the appropriate classes. When I try to access the member variables using the this operator I am getting the following error: "TypeError: Cannot read property 'organizationMemberRepository' of undefined". I noticed I began to receive this error after moving to the arrow function and removing the "that = this" logic and I am running node in a docker container. Here is the transpiled javascript file:

"use strict";
let OrganizationMemberService = class OrganizationMemberService {
    constructor(organizationRepository, organizationMemberRepository, authorizationService) {
        this.authenticateUser = (userName, password) => {
            return new Promise(function (resolve, reject) {
                console.log('about to check if user exists.....');
                this.organizationMemberRepository.findMemberByUserName(userName)
                    .then(function (organizationMember) {
                        if (organizationMember) {
                            organizationMember.comparePassword(password)
                                .then(function (same) {
                                    if (same) {
                                        let returnedObj = JSON.parse(JSON.stringify(organizationMember));
                                        resolve(returnedObj);
                                    }
                                    else {
                                        reject(new genericerror_1.GenericError("You username/password combination is incorrect."));
                                    }
                                })
                                .catch(function (err) {
                                    reject(err);
                                });
                        }
                        else {
                            reject(new genericerror_1.GenericError("You username/password combination is incorrect."));
                        }
                    });
            });
        };

        this.organizationRepository = organizationRepository;
        this.organizationMemberRepository = organizationMemberRepository;
        this.authorizationService = authorizationService;
    }
};
OrganizationMemberService = __decorate([
    inversify_1.injectable(),
    __param(0, inversify_1.inject(types_1.TYPES.IOrganizationRepository)), __param(1, inversify_1.inject(types_1.TYPES.IOrganizationMemberRepository)), __param(2, inversify_1.inject(types_1.TYPES.IAuthorizationService)),
    __metadata("design:paramtypes", [Object, Object, Object])
], OrganizationMemberService);
exports.OrganizationMemberService = OrganizationMemberService;

I thought that es6 arrow operator was suppose to solve the issue of not being able to properly access the this operator issue?

I think the context changes when you call Promise. The `this.` in the Promise, is not referring to the class you think it is. — ppovoski, Dec 05 '17 at 20:19
Can you show the typescript code that this is transpiled from? — CRice, Dec 05 '17 at 20:20
dude, it's really hard to understand what's going here. can you post only the relevant part of the code? — Elad, Dec 05 '17 at 20:21
Your *this* is inside an old fashioned function (inside the arrow function). — Thomas, Dec 05 '17 at 20:21
Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Dec 05 '17 at 22:05
This is an aside, but you have yourself in callback hell even though you are supposed to not have it using promises. Whenever you have promises, you should return them instead of handling them right away in the return. That way, you solve the issue of callback hell that promises were supposed to resolve. — nbkhope, Dec 05 '17 at 22:10
@nbkhope Are you saying in the code below, return directly from findMemberByUserName from authenticateUser and handle the promise in the caller to authenticateUser? — user1790300, Dec 06 '17 at 17:25
@user1790300 you should, for example, return the call to findMemberByUserName, but not handle its promise response right away in the same block. You do that outside, appending a .then() block to your first "return new Promise(......)" line. — nbkhope, Dec 06 '17 at 17:37

score 1 · Accepted Answer · answered Dec 05 '17 at 22:07

You need to change all .then(function () { syntax, to .then(()=> { After that this is working as it should, see my changes below

let OrganizationMemberService = class OrganizationMemberService {
    constructor(organizationRepository, organizationMemberRepository, authorizationService) {
        this.authenticateUser = (userName, password) => {
            return new Promise( (resolve, reject) => {
                console.log('about to check if user exists.....');
                this.organizationMemberRepository.findMemberByUserName(userName)
                    .then( (organizationMember) => {
                        if (organizationMember) {
                            organizationMember.comparePassword(password)
                                .then( (same) => {
                                    if (same) {
                                        let returnedObj = JSON.parse(JSON.stringify(organizationMember));
                                        resolve(returnedObj);
                                    }
                                    else {
                                        reject(new genericerror_1.GenericError("You username/password combination is incorrect."));
                                    }
                                })
                                .catch((err) => {
                                    reject(err);
                                });
                        }
                        else {
                            reject(new genericerror_1.GenericError("You username/password combination is incorrect."));
                        }
                    });
            });
        };

        this.organizationRepository = organizationRepository;
        this.organizationMemberRepository = organizationMemberRepository;
        this.authorizationService = authorizationService;
    }
};

es6 arrow function not recognizing this operator after transpiling to javascript

1 Answers1