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
– ppovoski, Commented Dec 5, 2017 at 20:19
dude, it's really hard to understand what's going here. can you post only the relevant part of the code? — Elad
– Elad, Commented Dec 5, 2017 at 20:21
Your this is inside an old fashioned function (inside the arrow function). — Thomas
– Thomas, Commented Dec 5, 2017 at 20:21
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
– nbkhope, Commented Dec 5, 2017 at 22:10

Reza · Accepted Answer · 2017-12-05 22:07:23Z

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;
    }
};

Collectives™ on Stack Overflow

es6 arrow function not recognizing this operator after transpiling to javascript

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related