Useful Javascript Expression
September 05, 2020
IIFE: Immediately Invoked Function Expression
Self-Executing Anonymous Function 으로 알려진 디자인 패턴
즉시 실행 함수 표현: 정의되자마자 즉시 실행되는 Javascript Function
;(function() {
statements
})()괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)
전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지, IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.
즉시 실행 함수를 생성하는 괄호()
자바스크립트 엔진은 함수를 즉시 해석해서 실행한다.
// 표현 내부의 변수는 외부로부터의 접근이 불가능하다.
;(function() {
const aName = "Barry"
})()
// IIFE 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
aName // throws "Uncaught ReferenceError: aName is not defined"IIFE를 변수에 할당하면 IIFE 자체는 저장되지 않고, 함수가 실행된 결과만 저장된다.
const result = (function() {
const name = "Barry"
return name
})()
// 즉시 결과를 생성한다.
result // "Barry"클로저 Closure
Combination of functions stacked or bundled together with access over outer layers or outer function’s scope.
function makeFunc() {
let name = "Mozilla"
function displayName() {
alert(name)
}
return displayName
}
/**
* myFunc변수에 displayName을 리턴함
* 유효범위의 어휘적 환경을 유지
*/
let myFunc = makeFunc()
//리턴된 displayName 함수를 실행(name 변수에 접근)
myFunc()자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성한다. displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다.
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.
첫 번째 예시의 경우, myFunc은 makeFunc이 실행될 때 생성된 displayName 함수의 인스턴스에 대한 참조다. displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 “Mozilla” 가 alert 에 전달된다.