本記事ではアロー関数の書き方と使い方、通常のfunctionとの違いについて解説しています。
アロー関数について何となく使っているという方やアロー関数を使いたいけど書き方や違いが分からないという方はぜひ本記事をご参考ください。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
アロー関数とは
アロー関数とは無名関数をより楽に記述することができる省略記法で、ES6から導入されました。
アロー関数の名前の由来は「()=>」が矢印(arrow)に似ていることからアロー関数と呼ばれています。
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");
