CODEWITHSUNDEEP
ecmascript-6
bp123
bp123

Reputation: 3417

How to use es6 to let or const within if statement

If I use let or const within a container controlling a page within a reactjs page it causes errors. If I use var it works fine. What am I missing understanding?

export default CareerHistoryContainer = createContainer(({match, isCandidate, isAdmin}) => {
  if (isCandidate) {
    var profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    var loading = !profileCandidateCollectionHandle.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
  }

  if (isAdmin) {
    var adminProfileCandidatesubscribeSubscribe = Meteor.subscribe('admin.candidateProfile', (match.params.userId));
    var loading = !adminProfileCandidatesubscribeSubscribe.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: match.params.userId});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
  }

  return {
    loading,
    profileCandidateCollection,
    profileCandidateCollectionExist,
    profileCandidate: profileCandidateCollectionExist
      ? profileCandidateCollection
      : {}
  };
}, CareerHistoryFormPage);

Upvotes: 1

Views: 1991

Answers (1)

NatNgs
NatNgs

Reputation: 874

In ES6, let and const variables definitions are block scoped, while var isn't.

if (isCandidate) {
    let profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    let loading = !profileCandidateCollectionHandle.ready();
    let profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    let profileCandidateCollectionExist = !loading && !!profileCandidateCollection;
    // Here, the 4 variables are only visible inside the block
}

// Here, you can't see, use or modify them
// so if you do like
return loading;

// will return exception: `loading` not defined

if (isCandidate) {
    var profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
    var loading = !profileCandidateCollectionHandle.ready();
    var profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    var profileCandidateCollectionExist = !loading && !!profileCandidateCollection;

}
// Here, the 4 variables are kept, you can do everything you want on them
// so if you do like
return loading;

// will return the right value

See more at: http://exploringjs.com/es6/ch_variables.html

For your example, you can do something like this to fix the problem:

export default CareerHistoryContainer = createContainer(({match, isCandidate, isAdmin}) => {
    // declaring here, variables will only be seen 
    // inside this block and sub blocks
    let profileCandidateCollectionHandle;
    let loading;
    let profileCandidateCollection;

    if (isCandidate) {
        profileCandidateCollectionHandle = Meteor.subscribe('profileCandidate.private');
        loading = !profileCandidateCollectionHandle.ready();
        profileCandidateCollection = ProfileCandidate.findOne({userId: Meteor.userId()});
    }

    if (isAdmin) {
        profileCandidateCollectionHandle = Meteor.subscribe('admin.candidateProfile', (match.params.userId));
        loading = !profileCandidateCollectionHandle.ready();
        profileCandidateCollection = ProfileCandidate.findOne({userId: match.params.userId});

    }

    let profileCandidateCollectionExist = !loading && !!profileCandidateCollection;

    return {
        loading,
        profileCandidateCollection,
        profileCandidateCollectionExist,
        profileCandidate: profileCandidateCollectionExist
             ? profileCandidateCollection
             : {}
    };
}, CareerHistoryFormPage);

Upvotes: 4

Related Questions