JavaScript syntax which looks like Array function: [variable] ({ key }, arg) { }

Question

I was ask to study the code of employer, In the code, the employer did something like this:

export const actions = {
  [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {
    const type = payload

Now, In this, I am unable to rectify this line of code

 [ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

Like is it a function or what? Can someone explain me the above syntax?

Answer 1

New-ish JavaScript allows property names in object literal expressions (what that { } block initializing actions is called) to compute property names from expressions by allowing [ ] for property names instead of identifiers or string constants as in the past.

So what that means is that ACTIONS.ITEM_LIST.LOAD.name should be evaluated, and the string value of whatever that ends up being is used as the name of the function property of the object. (That too is a new-ish feature of the language; formerly properties had to be name : value strictly).

Now inside the formal parameter list to that function, {commit} is a destructuring formal parameter. What it means is that the function expects that the first argument will be an object, and so inside the function the parameter (variable) commit should be bound to the value of that object's "commit" property (or undefined if there is no such property).

So if we assume for example purposes that ACTIONS.ITEM_LIST.LOAD.name evaluates to the string "xyz", then one would be able to call:

var result = actions.xyz({ foo: "bar", commit: "everything" }, somePayload);

and in the function the string "everything" would be the value of the commit parameter.

Answer 2

It uses object method syntax in combination with computed property names and destructuring in the parameter list.

ACTIONS.ITEM_LIST.LOAD presumably evaluates to an object: accessing the .name property of the object probably evaluates to a string. For example, if the string is "foo", then the line there is equivalent to:

const actions = {
  'foo': function(arg1, payload) {
    let commit = arg1.commit; // using "let" because parameters can be reassigned
    const type = payload
    // ...
};
export actions;

(Technically, it's not entirely equivalent , but it nearly is - object methods can't be used as constructors.)

Answer 3

[ACTIONS.ITEM_LIST.LOAD.name] ({commit}, payload) {

will resolve to function declaration syntax:

functionName (arguments) { statements }

There are a couple of things playing into action here. First, actions is an object. Next, it uses new computed property name syntax. ie [ACTIONS.ITEM_LIST.LOAD.name] will provide functionName part of our syntax. Note, that this is not an array, it is a computed property which will also be a key of our actions dictionary. Lastly, it uses Shorthand method names syntax to create a function in the object actions without writing it as "key: value" notation. This too is new in ECMAScript2015.

This link here will give you clear idea if I don't clear all your doubts.