[Javascript] IIFE (즉시 실행 함수)

IIFE란?

IIFE(Immediately-Invoked Function Expressions)

정의되자마자 즉시 실행되는 함수 표현식

---

사용이유?

전역 스코프에 불핑요한 변수의 추가를 방지하고 IIFE 내부에 다른 변수들이 접근하는것을 막을 수 있다.

즉, 데이터 프라이버시와 코드 모듈화

---

문법

(function() {
    console.log('hi IIFE')
}());

(function() {
    console.log('hi IIFE')
})();

// 화살표 함수 사용
(() => console.log('IIFE with arrow'))();

(() => {
    console.log('IIFE with arrow');
})();

 

첫번째 괄호 : function을 감싸는 첫번째 괄호는 익명함수 임을 정의한다.

두번째 괄호 : 마지막에 붙은 ()는 함수를 즉시 실행하고 인자를 받는 역할도 한다.

---

사용법

파라미터가 있는 IIFE

(function (name) {
    console.log(`hello ${name}!`) // hello kim!
})('kim');

두번째 괄호 ()를 사용해서 kim이란 인자를 name에 전달

 

(function(x, y){
    console.log(`${x * y}`) // 200
})(10, 20);

x, y에 각각 10, 20 전달

 

리턴값이 있는 IIFE

const sum = (function(x, y){
    return x + y;
})(1, 2);

console.log(sum) // 3

즉시 실행되어 반환값은 sum에 할당된다.

---

reference 

https://starkying.tistory.com/entry/Javascript-Closure-%EA%B7%B8%EB%A6%AC%EA%B3%A0-IIFE%EC%9D%98-%ED%99%9C%EC%9A%A9