자바스크립트 즉시실행함수

소괄호 () 가 의미하는 바가 무엇인지 알아보고, 즉시실행함수(IIFE)가 무엇인지 알아보도록한다.

함수 선언과 표현

먼저 함수 선언과 표현에대한 차이점을 알아보도록 한다.

함수선언 (Function Declarations)

function name(parameter) {
  statements
}

name : 함수이름
parameter : 함수의 인자이며 255개까지 인자를 가질 수 있습니다
statements : 함수의 본문을 기술합니다

함수의 선언은 이름을 가지며 선언시 자동으로 호이스팅(hoisting) 됩니다.

foo()

function foo() {
  console.log('hello')
}
// "hello"

함수 선언을 뒤에 했음에도 불구하고 foo() 호출시에 정상적으로 작동

함수표현 (Function Expressions)

var variable = function name(parameter) {
  statements
}

variable : 함수를 담을 변수
name : 함수이름이며 생략가능
parameter : 함수의 인자이며 255개까지 인자를 가질 수 있습니다
statements : 함수의 본문 기술

함수를 변수에 할당을 시키면 함수표현이 된다. 변수 선언과 같음
자동으로 호이스팅이 되지 않으며, 인터프리터가 라인에 도달해야 실행 가능하다

foo()

var foo = function() {
  console.log('hello')
}

foo()
/*
Uncaught TypeError: foo is not a function
"hello"
*/

즉시실행함수(IIFE)

MDN문서 에 보면 함수표현식만이 즉시실행 가능하다고 적혀있다. 선언과 동시에 즉시 실행이 가능하게 하려면, 선언을 표현식으로 바꿔야한다.

선언을 표현식으로 바꾸는 방법은 소괄호로 감싸는 방법이다.

foo = function() {
  console.log('foo')
} // 함수선언을 함수 표현식으로 표현
foo() // "foo"

다음은 선언과 동시에 사용되는 방법이다.

;(foo = function() {
  console.log('foo')
})() // "foo"

익명함수 표현식은 다음과 같이 표현한다

;(function() {
  console.log('hello')
})() // "hello"

소괄호안에 익명의 함수를 기술하면, 소괄호의 시작부분부터 종결부분까지 전체가 평가된 후 반환 된다. 결국 반환값은 자기 자신이 되어버린다

위의 코드에서 실제로 반환된 값은 익명함수 전체이다. 반환된 익명함수 전체를 실행시키기 위해 괄호를 추가했다. 추가적으로 이 익명함수의 반환값은 무엇일까?

var a = (function() {
  console.log('hello')
})()
console.log(a)
//console.log(a());

/* 출력결과
hello
undefined

마지막 주석문은 변수 a에는 익명함수가 아닌 익명함수의 반환값인
undefined 이므로 error 이다.
*/

즉시실행함수 (IIFE) 를 쓰는이유는?

전역변수(global scope) 의 선언을 막기위해

IIFE 내부에 선언된 변수들의 범위(scope)는 익명함수내로 한정이 되기 때문에 중복선언문제가 해결된다.

var foo = 'bye'

;(function() {
  var foo = 'hello'
  console.log(foo) // "hello"
})()

console.log(foo) // "bye"

똑같은 변수 foo임에도 불구하고 익명함수를 통해 중복문제를 해결했다.

클로저에서의 값의 중복 해결

클로저는 외부함수의 변수에대한 참조를 기억한다. 흔한 루프문이다.

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i)
  }, 1000)
}
/*출력값
3
3
3
*/

i 를 참조하지만 i는 전역으로 선언이 되어있기 때문에 전역 i는 마지막 값인 3이 된다. 그래서 3이 세번 찍힌다.

그렇다면 for문이 돌때 각각의 환경을 만들어주어야한다.
이 때 IIFE를 쓰면 된다.

for (var i = 0; i < 3; i++) {
  ;(function(x) {
    setTimeout(function() {
      console.log(x)
    }, 1000)
  })(i)
}
/*출력값
0
1
2
*/

for문이 돌때마다 즉시실행함수에 i값이 parameter로 전달된다. 그리고 그 값을 x에 저장한다.
함수각각의 환경이 다르므로 각자의 값들을 기억할 수 있는것이다.