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___

()の意味

1. 関数の実行
2. グループ化

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