In legacy code for an Electron + Vue.js + ES7 project, there is Javascript using square brackets around the names of object elements, and I can't find the source of this syntax. Does this look familiar to you? Is it super-recent Ecmascript? Does this suggest a transpiler in the build that I'm not aware of?
const state = {
[SUBMISSIONS]: [],
[LAST_OPENED_ROW_ID]: -1
}
const mutations = {
[SUBMISSION] (s, data) {
return Object.assign(s, { [SUBMISSION]: data })
}
}
To set the key of an object to a variable you can encapsulate the variable in braces []
Somewhere, it was probably defined as:
const SUBMISSIONS = 'submissions'
It's a pattern that was heavily adopted in React environments.
in this code [] are used to have dynamic keys,expression inside [] is resolved and final value is used as key name
let dynamic = 'some key'
let obj = {
[dynamic] : 'some value'
}
console.log(obj)
That is computed property introduced in ES6.
Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [], that will be computed and used as the property name. This is reminiscent of the bracket notation of the property accessor syntax, which you might have used to read and set properties already.
Browser compatibility for computed property names:
