🌐
Javascript基礎Ⅲ
クロージャー、即時関数
プライベートな変数を作成
function incrementFactory(){
let num = 0;
function increment(){
num = num + 1;
console.log(num);
}
return increment;
}
const increment = incrementFactory();
increment();
increment();
increment();
//--実行結果
1
2
3
動的に動かす場合
function addNumberFactory(num) {
function addNumber(value) {
return num + value;
}
return addNumber;
}
const add5 = addNumberFactory(5);
const result = add5(20);
const add25 = addNumberFactory(22);
const result2 = add25(8);
console.log(result);
console.log(result2);
//--実行結果
25
30
即時関数(IIFE)
関数定義と同時に一度だけ実行される関数
let result =
(function (dummy_argument){
return return_value;
})(actual_argument);
actual_argument(実引数)で渡された値がdummy_argument(仮引数)へ
※この関数のスコープの中でのみ使用可能
結果がreturnで戻り値がresultの中へ格納される
function a() {
console.log("called");
}
a();
(function () {
console.log("called___");
})();
//--実行結果
called
alled___
()の意味
- 関数の実行
- グループ化
let result_num = 1 + 2 * 3;
console.log(result_num);
let result_num2 = (1 + 2) * 3;
console.log(result_num2);
//--実行結果
7
9
グループ化することで()内が優先して計算される、優先順位をあげる
function () {
console.log("error");
}();
//--実行結果
//書き方が間違っていますよとブラウザが表示してくれる
Uncaught SyntaxError: Function statements require a function name
(function () {
console.log("not error");
})();
//--実行結果
not error
//関数式
let b = (function () {
console.log("not error");
})();
const b = (function () {
console.log("not error");
})();
//--実行結果
not error
not error
一度だけ実行する場合もしくは、関数式にしてやるとエラーが出ない
let c = (function (num) {
console.log("call num " + num);
return num;
})(11);
//--実行結果
call num 11
即時関数
関数の中でしか使わないまたは、外で定義した変数などがある場合をはっきりさせたい時
let c = (function () {
let privateVal = 0; //一度だけ呼ばれるこのスコープの中だけ
let publicVal = 10; //一度だけ呼ばれる
console.log("called");
//このスコープの中だけ
function privateFn() {
console.log("pvivate");
}
function publicFn() {
console.log("public");
}
return {
publicVal,
publicFn,
};
})();
c.publicFn();
console.log(c.publicVal);
//--実行結果
called
public
10
Discussion