Josh Siegl Josh Siegl - 2 months ago 5
Javascript Question

Unfamiliar with this javascript syntax that I came across

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?

Answer

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]();