Javascript对象文字返回函数作为键不起作用

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.