IIFE(즉시실행함수)

Kaydenna92·2022년 12월 10일
0

JavaScript

목록 보기
6/15

🧐 즉시실행함수란?

  • 정의되자마자 즉시 실행되는 함수를 말한다.
  • 다음과 같이 소괄호로 함수를 감싸서 실행하는 문법을 사용한다
(function() {
  console.log('즉시실행함수');
})();
// 화살표 함수로도 가능하다.
(() => {
  console.log('즉시실행함수');
})();

1. 즉시실행함수에 익명함수를 사용해야 하는가?

  • 선언과 동시에 호출되고 반환되어 재사용할 수 없기 때문에 이름을 지어주는 것은 의미가 없음.

2. 즉시실행함수를 왜 사용하는가?

  1. 필요없는 전역 변수의 생성을 줄일 수있다.
    함수를 생성하면 그 함수는 전역 변수로써 남아있게 되는데, 많은 변수의 생성은 전역 스코프를 오염시킬 수 있다. 따라서 즉시실행함수로 선언하면 내부 변수가 전역으로 저장되지 않기때문에 전역 스코프의 오염을 줄일 수 있다.

  2. private 한 변수를 만들 수 있다.
    즉시실행함수는 외부에서 접근할 수 없는 자체적인 스코프를 가지게 된다.
    이는 클로저의 사용목적과도 비슷하며 내부 변수를 외부로부터 private하게 보호할 수 있는 장점이 있다.

3. 즉시실행함수를 어떻게 활용할까?

  1. 단 한번의 사용만 필요한 함수
    즉시실행함수는 한 번의 실행 이후 없어지기 때문에 단 한번의 사용만 필요한 함수에 사용된다. 예를 들어, 변수를 초기화 하는 함수가 있다.
let isAdult;
(function init(age) {
    let currentAge = age;
    if (age >= 20) {
        isAdult = true;
    } else {
        isAdult = false;
    }
})(20);
console.log(isAdult); //  true
console.log(currentAge); //  Uncaught ReferenceError: currentAge is not defined

성인임을 나타내는 isAdult 변수를 즉시실행함수를 활용해 초기화하는 예제. init 함수에 입력되는 age 인자에 따라 다른값을 할당하게 된다.
이후 isAdult 값을 콘솔로 찍어보면 true 가 할당됨을 알 수 있고, 내부변수인 currentAge는 전역으로 저장되지 않음을 확인 할 수 있다.


2. 자바스크립트 모듈
자바스크립트 모듈을 만들때에도 즉시실행함수가 많이 활용된다. 숫자를 세기 위한 Counter 싱글튼 객체를 구현해보며 알아보자!

const Counter = (function counterIIFE() {
    // 현재 counter 값을 저장하기 위한 변수
    let current = 0;
    return {
        getCurrentValue: function () {
            return current;
        },
        increaseValue: function () {
            current = current + 1;
            return current;
        },
        decreaseValue: function () {
            current = current - 1;
            return current;
        },
    };
})();
console.log(Counter.getCurrentValue()); // 0
console.log(Counter.increaseValue()); // 1
console.log(Counter.decreaseValue()); // 0
  • 즉시실행함수의 반환 객체에 현재 current 값을 출력하는 getCurrentValue 함수, 현재 current 값에 1을 더하는 increaseValue 함수 그리고 현재 current 값에 1을 빼는 decreaseValue 함수를 정의했다.
  • 전역에서 반환 객체의 함수를 통해 current 값을 얻거나 수정 할 수 있다.
  • 위의 예제에서 current 변수는 private 하기 때문에 클로저를 통한 접근 외에는 접근 및 수정이 불가능하다.
profile
persistently

0개의 댓글