AttackTube

クロージャ(closure)についての解説の続き。

前回書いた記事
【JavaScript】クロージャ(closure) (attacktube.com)
【JavaScript】クロージャ(closure)とonclickメソッド (attacktube.com)

クロージャ(closure)はプライベートな変数や関数を作ることに利用できる。
プライベートな変数とメソッドを定義したコードを次に示す。

const myspace = {};

//myspace.sampleは即時関数であり定義して即座に実行される。
//クロージャ(closure)はプライベートな変数や関数を作る。
myspace.sample = function() {

    //strはmyspace.sampleの中からだけアクセス可能
    const str = "hello world";
    const that = {};
    const my = {};

    //my.Test関数はmyspace.sampleの中からだけアクセス可能
    my.Test = function() {
        console.log(str);
    };

    //that.Init関数はmyspace.sampleの外からアクセス可能
    that.Init = function(num) {
        console.log(num + "年");
        my.Test();
    };

    return that;

};


myspace.sample().Init(2023);

Javascriptにはfunction文(The function Statement)とfunction式(The function Expression)が存在する。
function文とfunction式は別物である。
function文は省略記法であり、functionオブジェクトをvar文で変数に格納することを意味している。

//function文(The function Statement)
function foo() {}

//これは、以下のfunction式(The function Expression)を用いた記述と同じ意味になる。
var foo = function() {};

即時関数(IIFE)の説明
JavaScriptで即時関数を使う理由 – Qiita ExternalLink

IIFE(Immediately Invoked Function Expression; 即時実行関数式)という。
IIFE (即時実行関数式) | MDN (mozilla.org) ExternalLink

IIFEは定義されるとすぐに実行される。
即時関数の中のthisにはグローバルオブジェクトがセットされることに注意する。

ある文の先頭にfunction文を記述することはできない。なぜなら、公式の文法では、functionとい
う単語から始まる文はfunction文であることになっているからだ。
文の先頭にfunction式を書くには、function式を括弧でくるめばいい。

(function() {

	//この中の変数はグローバル変数でなくローカル変数である。
	var hidden_variable;

})();

クロージャ(closure)についての解説の続き。

前回の記事
【JavaScript】クロージャ(closure) (attacktube.com)

クロージャの挙動について理解を深めていく。

クロージャ(closure)について解説する。

クロージャを簡単に説明すると「関数オブジェクトの1つ」である。
ただし、クロージャは単純な関数オブジェクトではなく、「環境付き」の関数オブジェクトである。

JavaScriptの関数は、その関数が作成されたときの「環境」を保持するように設計されている。
クロージャは関数の中に関数を定義する。このとき、内側の関数が外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセス可能である。
この内側の関数は、外側の関数で定義した変数やパラメータ(thisとargumetsを除く)にアクセスできる環境付きの関数オブジェクト(クロージャ)である。

つまり、関数を定義して、その関数の中に関数を定義してあったらクロージャである。

次にクロージャのサンプルコードを示す。
closureTest関数の中にret関数を定義してある。
外側の関数はclosureTest関数であり、内側の関数はret関数である。

closureTestを呼び出してcounter関数を生成する。
counter関数を実行するたびに10づつ値が増えていく。

新しくclosureTestを呼び出すと、そこで生成された関数は全く別の環境を保持することになる。
counter関数の環境とcounter2関数は異なる環境である。

JavaScriptのカリー化と部分適用の違いがよく分かっていない。
人によって認識違ったり、書籍やWebサイトの情報も書いてあることがそれそれ違っていたりする。

クロージャの代表的な使い方として「部分適用」というテクニックがある。
「部分適用」は引数の数を減らすテクニックである。

今まで「カリー化」と「部分適用」は使ったことないな。

空の配列にmapメソッドを使用してもエラーにならずに、空の配列がmapメソッドで生成される挙動になる。

forEachは配列の値がundefinedになっていたら、スルーされる挙動をするみたいだな。
それから、空の配列に対してforEachを使用してもエラーにはならない。

const array1 = [];

array1[1] = 90;
array1[5] = 190;

console.log("array1");

for (let i = 0; i < array1.length; i += 1) {
    console.log("array1[" + i + "] = " + array1[i]);
}

console.log("---------");

array1.forEach((element, i) => {
    console.log("array1[" + i + "] = " + element);
});

const array2 = [];

array2.forEach((element, i) => {
    console.log("array2[" + i + "] = " + element);
});

/*

array1
array1[0] = undefined
array1[1] = 90
array1[2] = undefined
array1[3] = undefined
array1[4] = undefined
array1[5] = 190
---------
array1[1] = 90
array1[5] = 190

*/