【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/05/19 02:42時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

アロー関数とは

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

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

functionとアロー関数の違い

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

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

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

アロー関数の書き方

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

/* 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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次