Just how does this bit of Javascript work

Question

I one of my current projects I am using Split.js. Given the complexity of that project I find it necessary to take the original SplitJS code and fork it one of my own ES6 classes. The process has gone smoothly but this line

const defaultGutterStyleFn = (dim, gutSize) => ({ [dim]: `${gutSize}px` })

has got me stumped. I am guesssing that defaultGutterStyleFn returns a CSS rule that bears the form {dim:NNpx} where

• dim is probably a dimension (height, width etc)
• gutSize is a numeric value

However, I do not see how the code I have quoted above would possibly doing this. Perhaps I have stumbled upon a JS/ES feature that I don't know?

Answer 1

It is just a different way to write this:

function defaultGutterStyleFn(dim, gutSize) {
    const result = {};
    result[dim] = gutSize + 'px';
    return result;
}