RyoGIFT | Web developer blog

Web開発者のブログです。

「JavaScript Primer 迷わないための入門書」を読んで「Arrow Function」を理解する

JavaScript Primer 迷わないための入門書

JavaScript Primer 迷わないための入門書

 

Vue.jsを1年弱使って開発していましたが、JavaScriptについて詳しくないため「JavaScript Primer 迷わないための入門書」のKindle版を購入して勉強しています。購入してから気づいたのですが、本書の内容はネット上に公開されているため、買わなくてもよかったなーと思いつつ読んでいます。

Arrow Function

その中で「Arrow Function」について、今まで何となく省略する記法なんだろうなという曖昧な理解でコードを書いていましたが、「Arrow Function」の説明を読んで、そういうことだったのかと感動しています。(良く理解せずに書いてはダメですね。。。)

引用元: 関数と宣言 · JavaScript Primer #jsprimer

引用元で勉強になった内容のメモ(抜粋)です。Arrow Function functionキーワードに比べて短く書けるようになっている。名前のとおり矢印のような=>(イコールと大なり記号)を使い、匿名関数を定義する構文である。Arrow Functionには省略記法がある。

・関数の仮引数が1つのときは()を省略できる

・関数の処理が1つの式である場合に、ブロックとreturn文を省略できる

// Arrow Functionを使った関数定義
const 変数名 = () => {
  // 関数を呼び出したときの処理
  // ...
  return 関数の返す値;
};

// 1行のみの場合はreturnとブロックを省略できる
const mulB = x => x * x;
特徴

・名前をつけることができない(常に匿名関数)

・functionキーワードに比べて短く書くことができる

・newできない(コンストラクタ関数ではない)

・arguments変数を参照できない

// functionキーワードの関数式の場合
const array = [1, 2, 3];
const doubleArray = array.map(function(value) {
  return value * 2;
});
console.log(doubleArray); // => [2, 4, 6]

// Arrow Function記法の場合
const array = [1, 2, 3];
const doubleArray = array.map(value => value * 2);
console.log(doubleArray); // => [2, 4, 6]