[Web] 함수 표현식과 IIFE(즉시 실행 함수 표현식) 개념

함수 표현식과 IIFE(즉시 실행 함수 표현) 개념 정리

1. 함수 표현식(Function Expression)

: 함수 문법으로 생성한 함수 객체를 변수에 할당하는 방식

let date = function selectYear(x) {
	const year = new Date().getFullYear();
    return '당신이 선택한 년도는 ${year + x}입니다.'
}
console.log(date(1)); // 당신이 선택한 년도는 2023년 입니다.
console.log(selectYear(4)); // error - Date is not defined

함수 리터널의 함수 이름(selectYear)은 아래처럼 생략이 가능하다. 이러한 함수를 익명 함수라고 한다.

let date = function (x) {

함수명을 작성하였어도 호출할 때는 함수의 이름이 아닌 함수 객체를 가리키는 식별자(date)를 사용해야 한다. 즉 함수 이름으로 호출하는 것은 불가능하다.

2. 즉시 실행 함수 표현식(IIFE: Immediately Invoked Function Expression)

: 정의 후 즉시 실행되는 JavaScript 함수이다.

 

IIFE 함수는 함수명을 생략해도 실행되며 익명함수를 만들고 그 함수를 즉시 호출할 수 있습니다.

하지만, IIFE함수는 단 한번만 호출이 되며 다시 호출할 수는 없습니다.

const date = (function () {
    var year = new Date().getFullYear();
    return '당신이 선택한 년도는 ${year + x}입니다.'
})();

console.log(date(1)); // 당신이 선택한 년도는 2023년 입니다.
console.log(year); // error - year is not defined

 

변수 year은 즉시 실행함수 안에서 실행이 되며 IIFE는 일반 함수처럼 사용할 수 있을 뿐만 아니라 변수나 함수 이름의 충돌을 방지할 수 있다.

 

IIFE는 불필요한 전역변수와 함수를 생성하지 않고 IIFE에서 생성된 변수와 함수의 이름은 전역 Scope와 출동하지 않습니다. IIFE 내부에 선언된 변수와 함수는 외부에서 호출이 되지 않습니다.

 

다시 정리하면,

 

• 특정 변수로의 접근을 막기 위해 사용

 - 특정 변수에 대한 접근을 정의된 함수의 Scope 내에서만 허용하도록 만들기 위해 IIFE함수를 사용할 수 있다고 합니다. 예를 들어 브라우저가 로드되는 자바스크립트 파일이 여러 개일 경우 다른 자바스크립트 파일에서도 접근이 가능할 수 있습니다. 이러한 접근을 방치하기 위해 사용이 됩니다.

 

• 사용하는 라이브러리들의 변수명이 출동할 경우

 - JQuery와 Cash라이브러리 모두 $ 를 사용하기 때문에 일어날 수 있는 충돌을 IIFE함수를 사용함으로 방지할 수 있다고 합니다.

 

 

---

참고 글: JavaScript's Immediately Invoked Function Expressions

https://stackabuse.com/javascripts-immediately-invoked-function-expressions/