Javascript object literal return function as key not working

Question

I have a function that receives two parameters, and returns an Object literal, but the keys are also functions (toaster.pop):

    _self.popCategoryResponse = (msg, param) => ({
        'SAME_CATEGORY_NAME': toaster.pop({
            type: 'error',
            title: 'Ops!',
            body: $translate.instant('categorynameexistsin',
                {name: param.name}),
            bodyOutputType: 'trustHtml'
        }),

        'SAME_ROOT_CATEGORY_NAME': toaster.pop({
            type: 'error',
            title: 'Ops!',
            body: $translate.instant('categorynameexistsinroot'),
            bodyOutputType: 'trustHtml'
        }),

        'BLANK_CATEGORY_NAME': toaster.pop({
            type: 'error',
            title: 'Ops!',
            body: $translate.instant('categorynameisblank'),
            bodyOutputType: 'trustHtml'
        }),

        'NEW_CATEGORY_CREATED': toaster.pop({
            type: 'success',
            title: 'Ok!',
            body: $translate.instant('categorycreated',
                {name: param.name}),
            bodyOutputType: 'trustHtml'
        }),

        'CATEGORY_REMOVED': toaster.pop({
            type: 'success',
            title: 'Ok!',
            body: $translate.instant('categoryremoved',
                {name: param.name}),
            bodyOutputType: 'trustHtml'
        })
    })[msg];

I have two problems with this approach:

1. Now I am calling this function with _self.popCategoryResponse('BLANK_CATEGORY_NAME', node), but it is not only calling the function for the key 'BLANK_CATEGORY_NAME', but also for the other keys.

2. Sometimes I am not using the param parameter as you can see in some keys, so is it correct to call my function somewhat like _self.popCategoryResponse('BLANK_CATEGORY_NAME', null)?

Answer 1

The misunderstanding here seems to be that your object's keys point to functions that are evaluated upon access. This is not the case. Every time popCategoryResponse is called, you are creating an object whose keys are the result of evaluating toaster.pop(...).

Here is an example if you want to convince yourself of that:

const toaster = [1,2,3,4,5]

// you expect to 'pop' once
// when in fact, it 'pop's three times
const fn = key => ({
  a: toaster.pop(),
  b: toaster.pop(),
  c: toaster.pop()
})[key]

fn('a')
console.log(toaster) // -> [1, 2]

fn()
console.log(toaster) // -> []

Here is a solution:

const toaster = [1, 2, 3, 4, 5]

// now the keys are functions which you can invoke to pop only once
const fn = key => {
  const value = {
    a: () => toaster.pop(),
    b: () => toaster.pop(),
    c: () => toaster.pop()
  }[key]

  if (typeof value === 'function') {
    value()
  }
}

fn('a')
console.log(toaster) // -> [1, 2, 3, 4]

fn()
console.log(toaster) // -> [1, 2, 3, 4]

Although I would suggest considering another approach if you have a function mutating an out of scope variable (toaster). At least consider passing it in to popCategoryResponse for testability.