Unfamiliar with this javascript syntax that I came across

Question

I just started a new job and I have some React code to maintain, there's a file called authenticationHandlers.js this is what the code looks like inside the file.

const events = require("./authenticationEvents.js");

const authenticationHandlers = {
    [events.Errored.Name](prev, event) {
         const update = {
             UnauthorizedError: event.Error
        };

        return Object.assign({}, prev, update);
    },
    [events.ClearError.Name](prev, event) {
        const update = {
            UnauthorizedError: null
        };

        return Object.assign({}, prev, update);
    }
};

module.exports = authenticationHandlers;

I don't really have any questions about the functionality of the code but what does the bracket syntax do at lines [events.Erorred.Name] and [events.ClearError.Name]

In other words what do the brackets mean?

Looks like it is trying to define 2 functions with names that come from the events object — Theodoros Klikas, Sep 20 '16 at 14:35

Naftali · Accepted Answer · 2016-09-20T14:36:33.887

5

It is so that you can use a variable as a property name:

For example:

const a = 'banana';
const fnName = 'pudding';

const b = {
    [a]: 42,
    [fnName]() {
        console.log(`I am logging from ${fnName}`);
    }
};

console.log(b); //{banana: 42, pudding: fn}
b[fnName]();

edited Sep 20 '16 at 14:36

answered Sep 20 '16 at 14:31

Naftali

144,921
39
244
303

score 2 · Answer 2 · answered Sep 20 '16 at 14:33

2

That is called computed property names. See http://es6-features.org/#ComputedPropertyNames

answered Sep 20 '16 at 14:33

Maurice

27,582
5
49
62

Unfamiliar with this javascript syntax that I came across

2 Answers2