I am trying to get the es6 syntax working for this code fragment.

let checkList = [1, 2].map(i => "Check " + i)

let checks = checkList
  // .reduce((acc, check) => Object.assign(acc, {[check]: {valid: false}}), {})
  .reduce((acc, check) => {...acc, {[check]: {valid: false}}}, {})
console.log(checks)

The output if i use the mented line in is as below and which is what i want to get using the new syntax.

Object {
  "Check 1": Object {
    "valid": false
  },
  "Check 2": Object {
    "valid": false
  }
}

I am not sure if there is a syntax error in this code. I tried selecting all the presets in babeljs but it does't pile properly.

I am trying to get the es6 syntax working for this code fragment.

let checkList = [1, 2].map(i => "Check " + i)

let checks = checkList
  // .reduce((acc, check) => Object.assign(acc, {[check]: {valid: false}}), {})
  .reduce((acc, check) => {...acc, {[check]: {valid: false}}}, {})
console.log(checks)

The output if i use the mented line in https://babeljs.io is as below and which is what i want to get using the new syntax.

Object {
  "Check 1": Object {
    "valid": false
  },
  "Check 2": Object {
    "valid": false
  }
}

I am not sure if there is a syntax error in this code. I tried selecting all the presets in babeljs but it does't pile properly.

• javascript
• ecmascript-6
• ecmascript-next

Share Follow edited Jun 21, 2017 at 18:53 Estus Flask 224k7979 gold badges472472 silver badges611611 bronze badges asked Jun 21, 2017 at 18:36 Akshay PatilAkshay Patil 62122 gold badges1010 silver badges2424 bronze badges 3

• It's not ES6 syntax. You cannot use spread syntax in object literals. It's some experimental proposed syntax. – Bergi Commented Jun 21, 2017 at 18:47
• Possible duplicate of ECMAScript6 arrow function that returns an object – Bergi Commented Jun 21, 2017 at 19:12
• Keep in mind that spread in reduce is anti-pattern – lazy.lizard Commented Jul 29, 2021 at 9:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Object spread is stage 4 proposal and isn't part of existing specifications. Stage 3 preset should be enabled in Babel, namely, transform-object-rest-spread.

There are syntax errors in the code above that will prevent it from being piled properly even with required presets.

It should be

let checks = checkList
  .reduce((acc, check) => ({...acc, [check]: {valid: false}}), {});

First of all you don't have wrap the properties in an extra object (unless you also want to use the spread operator on that).

So {...acc, {[check]: {valid: false}}} can bee {...acc, [check]: {valid: false}}

This means you're adding an object to accumulator. The key of this object is the name you assigned it (Check[n]) and the values are the ones you set ({valid...}).

Secondly, as far I know, you cannot use the spread operator without explicitly a new value. So you should either write your state on a new line like:

let checks = checkList.reduce((acc, check) => {
  return {...acc, [check]: {valid: false}}
}, {})

Or wrap it in extra parentheses:

let checks = checkList.reduce((acc, check) => ({...acc, [check]: {valid: false}}) , {})