プログラミングBlog

プログラミング学習用

ちょいちょい書いてます

アプリ開発サークル勉強会⑧ 開催日時 2021年2月20日(土) 7:00-9:00

Javascript アロー関数について①

アロー関数と通常関数の違いについて調べていました。
調べる前は通常関数の書き方を簡易的にしただけのイメージが強かったのですが、
どうやら違うようで使えなくなる機能があったため、使いどころに注意が必要です。

arguments

コードを書いて比較していきます。 引数の合計値を求める関数を定義しました。

通常関数

function sum() {
    var total = 0;
    for (var i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return console.log(total);
}

sum(1, 2);

結果:

3

アロー関数

var sum = () => {
    var total = 0;
    for (var i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return console.log(total);
}

sum(1, 2);

[object Object]こちらに値を代入しようとしていますが、argumentsが定義されていないので
エラーとなりました。
結果:

0[object Object]function require(path) {
      return mod.require(path);

スコープについて

スコープとは、直訳すると範囲という意味で、プログラミングだと 定義した変数がどの範囲まで使うことができるかを指します。 調べた限り、4つのスコープが存在するようです。
グローバルスコープ、ローカルスコープこのへんはどの言語でも共通の認識かと思われます。
グローバルは全体、ローカルは関数の中で変数を宣言した場合その範囲でしか使えない。
レキシカルスコープとダイナミックスコープについて。
変数のスコープの決まり方ですが、レキシカルスコープは宣言した時点で決定する。
ダイナミックスコープは実行時に決定する。
アロー関数はレキシカルスコープのようです。

this

thisの取り扱いについて。
難しいのでコードを書いて検証してみました。

引数の値の合計値を返す関数

通常関数

定義した関数の一つ上の階層にあるオブジェクトを返す。

function sum1(a, b) {
    console.log(this);
    return a + b;
}

sum1(1, 2);

結果:

{Object [global] {
  global: [Circular],
  clearInterval: [Function: clearInterval],
  clearTimeout: [Function: clearTimeout],
  setInterval: [Function: setInterval],
  setTimeout: [Function: setTimeout] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  },
  queueMicrotask: [Function: queueMicrotask],
  clearImmediate: [Function: clearImmediate],
  setImmediate: [Function: setImmediate] {
    [Symbol(nodejs.util.promisify.custom)]: [Function]
  }
}

アロー関数

thisは定義されていないため、空っぽを返す。

var sum2 = (a, b) => {
    console.log(this);
    return a + b
}

sum2(1, 2);

結果: {}

testにvalueとtest関数を定義

通常関数

定義した関数の一つ上の階層にあるオブジェクトを返す。
この場合だと変数test1です。

var test1 = {
    value: 1,
    test: function () {
        console.log(this);
    }
}

test1.test();

結果:

{ value: 1, test: [Function: test] }

アロー関数

thisは定義されていないため、空っぽを返す。

var test2 = {
    value: 1,
    test: () => {
        console.log(this);
    }
}

test2.test();

結果:

{}

thisの動きが全く違いますね。。。
他にもたくさん違いがあるので、覚えることが多そうです。

参考サイト

qiita.com wemo.tech