💬

JavaScriptのメソッドで悩んだ

2021/03/22に公開約700字2件のコメント

mapメソッドとは?

mapメソッドとはES2015に追加されたメソッドであり、配列のデータを加工して返却できる
便利な関数で。

const array1 = [1, 4, 9, 16];

// 1行の場合、returnなしでも記述可
const map1 = array1.map(x => x * 2);

console.log(map1);
// 結果: Array [2, 8, 18, 32]

このように
配列の値を2倍して別の変数に入れることができます。

私が悩んだこと

今回、mapメソッドを使うにあたり私はreturnの必要な時と不要な時の書き方に悩みました。
では、質問です。質問1と質問2どちらがreturn文が不要でしょうか?

#質問1

const array1 = [
		{id:1,val:2},
		{id:2,val:4},
		{id:3,val:8},
		]

const map1 = array1.map((arr)=>{
 arr.val * 2
});

#質問2

const array2 = [
		{id:1,val:2},
		{id:2,val:4},
		{id:3,val:8},
		]

const map2 = array1.map((arr)=>(
 arr.val * 2
));

答え
質問2です。

console.log(map2);
#結果 : [4, 8, 16]

このように質問2はreturn文が不要で結果が返却されます。
なぜこの結果になるかを理解していないのでわかる人がいればコメントよろしくお願いします。

Discussion

()で囲まれている場合、戻り値が省略されているのです。
{}の場合は、関数の中身になるので

const map1 = array1.map((arr)=>{
 return arr.val * 2
});

アロー関数 省略 でぐぐったら次の記事がでました。

JavaScriptのアロー関数の省略記法について - Qiita

https://qiita.com/crash-boy/items/f146afd1cdf1e89c4121

下記も参考になると思います。

アロー関数 - JavaScript | MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#shorter_functions

standard softwareさんコメントありがとうございます。
丁寧にまとめてくださり、すぐに理解することができました。

ログインするとコメントできます