Zenn
🐣

JavaScript：アロー関数について

2024/03/15に公開
JavaScript
tech

アロー関数とは

アロー関数とは、ES6で追加された無名関数の省略記法のことです
関数リテラル（関数式）で書かれた式をよりシンプルに記述できます。
=>矢印のような形で省略するためアロー関数と呼ばれています。
※MDN

構文

🔸通常の関数式ではこう書きますよね。

const hello = function profile(name, age) {
  if (age < 20) {
    return console.log("Hello, " + name + "さん" + "20歳以上になったらまた来てね！");
  }
  return console.log("Hello, " + name + "さん" + "！");
}

hello("太郎", 17);

⬇️
次にアロー関数で書いてみましょう！
functionを省略し、=>の先に関数式の中身を記述出来ます。

const hello = (name, age) => {
  if (age < 20) {
    return console.log("Hello, " + name + "さん" + "20歳以上になったらまた来てね！");
  }
  return console.log("Hello, " + name + "さん" + "！");
}

hello("太郎", 17);

必要な情報がパッと目に入って読みやすいですね。

その他の記法について

💡 関数本体が１文の場合

  1. ブロックを表す{...}は省略出来ます。
  2. 文の戻り値がそのまま関数自体の戻り値とみなされるためreturnも省略出来ます。
const hello = (name, age) => console.log('hello ' + name + '!');

hello('Tom');

💡 引数が1つの場合

1 引数が1つの場合には関数の引数をくくる丸括弧も省略可能です。

const hello = name => console.log('hello ' + name + '!');

hello('Tom');

※その他の違いについて

この違いに関してはまだ学んでいないのですが、とりあえず頭にいれておきます！

まとめ

今までなんとなく...で使っていたアロー関数ですが、これで少しスッキリしました、、、！！
なるべく読みやすいコードが書けるようになりたいものです📝

📕参考書
JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

独習JavaScript 新版

🎥参考動画
【JS】ガチで学びたい人のためのJavaScriptメカニズム

✍️もりけん塾にてJavaScriptの基礎を学習中です☺️

Discussion