자바스크립트 즉시 실행 함수 ({})();에 대해
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/