map関数の中のif-elseの処理が通りません

Question

前提・実現したいこと

JavaScript初心者です。以下の様な配列に対し，map関数を利用して特定の値を持つ場合のみ，if文を用いて別の処理を実行したいと考えております。

var things = [
    {a: 1, b: 2, c: true},
    {a: 2, b: 100, c: false},
    {a: 3, b: 200, c: true}
  ];

最終的には，以下の様なaが1の場合にみwidthを追加した出力をしたいと考えております。

Array [Object { label: "a", key: "a", width: 150 }, Object { label: "b", key: "b"}, Object { label: "c", key: "c"}]

発生している問題・エラーメッセージ

Error: Unexpected token 'if'

下のソースコードに問題があるのですが，if文が認識されません。

該当のソースコード

var tempCol1 = Object.keys(things[0]).map(x=>(
  if ( x === 1 ){
    return {label:x, key:x, width: 150};
  }
  else {
    return {label:x, key:x};
  }
));

試したこと

以下の処理であれば，一括して同じ処理が実行される事が確認できたのですが，mapの中にif文がうまく反映できませんでした。

var tempCol = Object.keys(things[0]).map(x=>({label:x, key:x, width: 150}));

基本的な事だとは思うのですが，ご指摘頂けますと幸いです。

Answer 1

アロー関数の中身は中括弧で括ってください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

var tempCol1 = Object.keys(things[0]).map(x => {
   ...
});

単純に return するだけの場合は中括弧と return が省略できます。そのため、

var tempCol = Object.keys(things[0]).map(x=>({label:x, key:x, width: 150}));

は、

var tempCol = Object.keys(things[0]).map(x => {
    return ({label:x, key:x, width: 150})
});

と等価になります。

Comments

[caveatld]

迅速なご回答誠にありがとうございました！大変参考になりました。