JavaScript

【JavaScript】アロー関数の書き方と使い方

本記事ではアロー関数の書き方と使い方、通常のfunctionとの違いについて解説しています。

アロー関数について何となく使っているという方やアロー関数を使いたいけど書き方や違いが分からないという方はぜひ本記事をご参考ください。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

アロー関数とは

アロー関数とは無名関数をより楽に記述することができる省略記法で、ES6から導入されました。

アロー関数の名前の由来は「()=>」が矢印(arrow)に似ていることからアロー関数と呼ばれています。

functionとアロー関数の違い

functionとアロー関数の違いは書き方だけではありません!アロー関数を普段通りのfunctionと同じ使い方をしていると見慣れないエラーが表示されたり想定外の挙動を起こしてしまう可能性があります。

functionとアロー関数の違いを以下の表にまとめました。

functionとアロー関数の違い
functionアロー関数
this実行時コンテキストレキシカルスコープ
new可能不可
call,apply,bindのthis指定可能不可
prototypeありなし
argumentsありなし
引数名の重複可能不可
巻き上げ可能不可
ジェネレータ関数可能不可
同関数名で再定義可能不可

アロー関数の書き方

アロー関数の基本的な書き方は以下のとおりです。

/* functionを使った方法 */
const fn = function (num) {
};

/* アロー関数を使った方法 */
const arrowFn = (num) => {
};

()を省略できる時

アロー関数では、引数が一つだけ設定されている場合に引数を囲っている「()」を省略することができます。引数が0個または複数設定されている時は省略することができませんので、注意しましょう。

/* 引数がないため省略不可 */
const arrowFn1 = () => {
  console.log("引数なし");
};

/* 引数1つのため省略可 */
const arrowFn2 = name => {
  console.log(name);
};

/* 引数2つのため省略不可 */
const arrowFn3 = (name, age) => {
  console.log(name, age);
};

arrowFn1();
arrowFn2("John");
arrowFn3("John", 20);

使用しているエディタの設定によって、省略記法で書いても自動で()が付いてしまう場合があります。

{}とreturnを省略できる時

アロー関数では、関数内に記述されている実行コードが1行の場合{}とreturnを省略することができます。

/* functionの場合 */
const calcFn = function (num1, num2) {
  return num1 + num2;
};

console.log(calcFn(1, 2));

/* アロー関数の省略記法 */
const arrowCalc = (num1, num2) => num1 + num2;

console.log(arrowCalc(1, 2));

functionの時に比べてかなりコードがかなりスッキリしましたね!

アロー関数ではthisが使えない

アロー関数ではthisを使うことができません。JavaScriptではthisを頻繁に使うためこの違いを知らないでfunctionと同じような書き方をしてしまうと、windowオブジェクトを参照してしまい欲しい値を取得することができないので覚えておきましょう。

window.name = "Banana";

const fruits = {
  name: "Apple",
  say: () => {
    console.log(`私の好きなフルーツは${this.name}です。`); // -> 私の好きなフルーツはBananaです。
  },
};

fruits.say();

アロー関数ではargumentsオブジェクトが使えない

アロー関数では引数に渡る値を取得するために使われるargumentsオブジェクトを使うことができません。

const name = (name1, name2, name3) => {
  console.log(arguments[0]); // -> Uncaught ReferenceError: arguments is not defined
};

name("Tom", "John", "Michael");

アロー関数でも可変長の引数を取得したい場合は、レスト構文(…引数名)を使用しましょう。

const name = (...name) => {
  console.log(name); // -> ['Tom', 'John', 'Michael']
};

name("Tom", "John", "Michael");

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村