トップページ > ブログ > 【JavaScript】アロー関数式について

BLOG

ブログ

UPDATE:2023.10.20

CATEGORY

【JavaScript】アロー関数式について

今回は便利なのについ使用することを忘れてしまう
JavaScriptの「アロー関数式」を備忘録的な形で紹介します。

アロー関数式


アロー関数式はES6から使用できるようになった構文です。
従来の関数式を簡略化して使用することができます。

アロー関数式


使用方法

従来の無名関数
(function (a) {
  return a + 10;
});

アロー関数式
a => a + 10;

とても簡略化されていますね。



アロー関数の特徴


・引数が一つの場合は()を省略することができる。

従来の無名関数
(function (a) {
  return a + 10;
});

アロー関数式
a => a + 10;

ただし引数が複数の場合は()が必須となります。

×これは間違い
a, b => a + b + 10;

〇引数が複数の場合は()が必要
(a, b) => a + b + 10;


ちなみに上記関数の従来の記述はこうです。

従来の無名関数
(function (a, b) {
  return a + b + 10;
});



アロー関数を使用するメリット


①関数を短く書くことができる
②関数定義時にthisが決まる

①については前述の説明で理解できたかと思います。

②については理解が難しいところなので、私自身も勉強しなおしつつ説明を書いていこうと思います。


そもそも、JavaScriptのthisとは何なのでしょうか?
とても簡単に説明すると、thisは『呼び出した場所や方法によって中身が変わる変数』です。
なので、thisが何なのかはその都度変わります。
(今回はアロー関数とそれ以外の関数(メソッド含む※)でのthisの話をします)
※メソッドは関数を値に持つプロパティ


アロー関数のthis
⇒関数定義時に決める事ができる

それ以外の関数(メソッド含む)のthis
⇒関数を実行するときに決まる


アロー関数以外のthisの「関数を実行するときに決まる」は若干問題があり、
実行した時にthisが決まるので予期せぬ挙動を返すこともあります。
(ただしこれが必要な場合もあります)


アロー関数は「関数定義時に決める事ができる」ので、実行するまでthisが何かわからない問題を回避できます。

アロー関数がどのthisを参照するかは
・外側の関数スコープから見た「this」を参照
・関数スコープの中にいなければ、windowオブジェクトを指す
これなら関数実行時に決まるよりも、thisの中身が想像しやすいですね◎


参考
アロー関数が便利な理由と使いどころ

関数とスコープ

JavaScript、アロー関数のthisについて。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE