자바스크립트 즉시 실행 함수 ({})();에 대해

2020-08-15

원문 : https://developer.mozilla.org/ko/docs/Glossary/IIFE

자바스크립트 코드를 짜다보면 가끔 이런 형식의 코드를 볼 수 있다.

(function() {
    statements
})();

처음에는 따라하느라 궁금하지 않은데 어느 순간에 이게 도대체 무슨 역할을 하는지 궁금해진다. 결론은 뒤에 (); 괄호가 붙으면 즉시 실행 함수를 생성하고 자바스크립트 엔진은 함수를 즉시 해석하여 실행한다.

let result = (function() {
    let name = "Barry";
    return name;
})();

result;

이렇게 하면 함수를 실행한 결과만 result에 저장된다. 실제로 즉시 실행 함수를 사용하지 않고 console.log(result);를 동작하면 그냥 함수 전체가 출력될 뿐 return 값은 나오지 않는다.

그리고 function 앞에 있는 처음 괄호는 Self-Executing Anonymous Function으로 알려진 디자인 패턴이다. 이는 외부로부터 내부 변수에 대한 접근을 막아 오염을 방지한다.

(function() {
	let aName = "Sam";
  return aName;
})();

aName; // Uncaught ReferenceError: aName is not defined"

접근이 불가능하므로 에러가 발생한다.

https://jsfiddle.net/6vw1z7aj/