Create an object literal with ComputedPropertyName in arrow function

Question

How to convert this:

const array = [10, 0, 90, 80, 50, 0, 60];
let id = 1;

const studentScores = array.map(function(score, index){
  return { [index]: score, student_id: id } 
});

console.log(studentScores)

Into fat arrow syntax:

const studentScores = array.map((score, index) => { [index]: score, student_id: id } );

My try throws an error:

SyntaxError: Unexpected token :

score 4 · Accepted Answer · answered Jan 15 '18 at 14:00

You have to parenthesize the object literal to convince the parser that it is an object literal:

const studentScores = array.map((score, index) => ({ [index]: score, student_id: id }) );

By wrapping it in parentheses, the parser is forced to interpret it as an expression and not a statement block. The { character has that ambiguity, and when it's the first thing in a statement the parser always assumes "statement block" is what it's seeing.

score 2 · Answer 2 · answered Jan 15 '18 at 14:00

2

To implicitly return an object with arrow function, wrapp it with parentheses:

const studentScores = array.map((score, index) => ({ [index]: score, student_id: id }) );

answered Jan 15 '18 at 14:00

Faly

13,291
2
19
37

Implicitly? Don't you mean explicitly? – Cerbrus Jan 15 '18 at 14:06
@Cerbrus Yes, implicitly. It's explicitly when you put a return. Here, I don't write `return` keywork so it's implicit – Faly Jan 15 '18 at 14:07
1

Oh, I never hear that described as an "implicit" return... Interesting. – Cerbrus Jan 15 '18 at 14:10

Create an object literal with ComputedPropertyName in arrow function

2 Answers2