アプリ開発サークル勉強会⑧ 開催日時 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の動きが全く違いますね。。。
他にもたくさん違いがあるので、覚えることが多そうです。
