IIFE

즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)
용어 그대로 즉시 실행되는 함수 표현식입니다.

다음은 MDN에 소개되어 있는 예제입니다.

(function () {
	var aName = "Barry";
})();

// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"

올바르게 사용하기 위해서는 다음과 같이 해야 합니다.

var result = (function () {
	var name = "Barry"; 
	return name; 
})(); 
// 즉시 결과를 생성한다.
result; // "Barry"

즉, IIFE는 내부에서 선언된 변수는 해당 함수내에서만 사용 할 수 있고 외부에서는 접근이 불가능한 javascript의 scope 특성을 이용한 Self-Executing Anonymous Function 으로 알려진 디자인 패턴입니다.

그렇다면 IIFE 외부에서 선언된 변수를 IIFE 내부에서 접근하는 것은 어떨까요
다음 코드는 IIFE 외부에 변수 a를 선언 및 초기화하였고 IIFE를 변수 f2에 할당한 코드입니다.

const a = 1;
const f2 = (function() {
	return ++a
})()
console.log(f2);
console.log(f2);
console.log(f2);

“Uncaught TypeError: Assignment to constant variable.”

IIFE에서 a에 다시 값을 할당하려고 했기때문에 오류가 발생하였습니다.
a에 접근은 가능한 것 같습니다.

그러면 변수 a를 재할당이 가능한 let이나, 좀 더 유연한 var로 선언하면 가능하겠네요

var a = 1;
const f2 = (function() {
	return ++a
})()
console.log(f2);
console.log(f2);
console.log(f2);

2
2
2

흠…변수 a의 값에 정상적으로 접근은 한것 같은데,,예상했던 것과는 조금 다른 결과가 나왔습니다.
제가 원했던 코드는

var a = 1;
const f2 = (function() {
	return ++a;
})
console.log(f2());
console.log(f2());
console.log(f2())

2
3
4

와 같은 결과가 나오길 원했는데,,,
IIFE 함수를 변수에 저장하고 이를 호출할때 마다 함수가 실행되었으면 싶은데..
머가 문제지…
f2에 동일한 익명함수를 할당한거 같은ㄷ…아… 같은 함수가 아니구나…!!

IIFE는 즉시 실행되는 함수이고, f2에는 그 결과가 저장된 것이니

const f2 = function() { return 2++ } 

이 아니라

const f2 = 2

라는 것을 이틀만에 깨달았습니다.

지금 생각해보면 너무나도 당연한거라 작성하던 포스팅을 지워야 하나 싶었지만,,삽질이라는 기록으로 남기고자 합니다.