[JavaScript] 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)

즉시실행함수 (IIFE, Immediately-Invoked Function Expression)

// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)

const a = 7;

const double = () => {
  console.log(a * 2);
};

double(); // 14

💡 (✏️)() : 소괄호 2개 작성하고 첫번째 소괄호 안에 화살표 함수 넣어준다.

(() => {
  console.log(a * 2); // 14
})();

// 즉시실행함수 (IIFE, Immediately-Invoked Function Expression)

const a = 7;

const double = () => {
  console.log(a * 2);
};

double()

;(() => {
  console.log(a * 2);
})();

double 함수가 끝나고, 명령이 끝났다 라고 double(); 세미콜론(;)을 붙여줘야 한다.
읽기 좋은 형태로 줄바꿈 한다라고 하면, double(); 뒤에 바로 세미콜론 붙이고,
즉시 작성을 할 수도 있겠지만 일반적인 경우에는 ; 을 잘 작성하지 않기 때문에
오히려 double(); 함수 뒤에 붙은 세미콜론이 이상해보일 수 있다.

애초에 ; 세미콜론 부분에서 줄 바꿈을 해주는 방법이 있다.
그러면 double() 이라는 함수가 줄 바꿈을 포함해서 세미콜론으로 끝나게 되고,
그 다음에 소괄호로 시작이 되는 즉시실행함수가 동작한다.​

 

함수를 만들 때 기본적으로 호출하기 위해서 이름을 부여한다. (ex. double)
만약에 함수를 만들면서 별도의 이름 없이 실행되기를 원한다면,
'즉시실행함수' 문법을 통해서 함수의 이름 없이 익명함수로 내용을 만들고, 바로 실행할 수 있다.

즉시실행함수 다양한 사용 패턴 👇🏻
일단 제일 처음에는 모든 '즉시실행함수' 패턴 제일 앞쪽에 ; 이 붙어있다는 것을 전제.

;(() => {})(); // (F)()
;(function () {})(); // (F)()
;(function () {}()); // (F())
;!function () {}() // !F()
;+function () {}() // +F()

 

위 코드에서 중괄호 {console.log(a*2)} 안에 콘솔창 기입하고 저장하니,
저절로 이렇게 바꿔지고 14가 출력이 되었다.

(() => {
  console.log(a * 2);
})();
(function () {
  console.log(a * 2);
})();
(function () {
  console.log(a * 2);
})();
!(function () {
  console.log(a * 2);
})() +
  +(function () {
    console.log(a * 2);
  })();

 

((a, b) => {
  console.log(a);
  console.log(b);
})(1, 2);

두 번째 소괄호 부분에 숫자 1, 2 넣게되면 콘솔에 출력됨.
두 번째 소괄호로 들어가는 각각의 데이터들을 즉시 실행하는 해당 함수에 매개변수로 전달할 수 있다.

 

((a, b) => {
  console.log(a);
  console.log(b);
})(window, document);

window 전역객체, document 도큐먼트 객체 전달할 수 있다.
저장하게 되면 즉시실행함수 내부에서 window 객체와 document 객체로 해석이 된다.
a, b 라는 전혀 해당하지 않은 객체에 대해서 유추할 수 없는 이름으로 바꿔서 쓸 수 있다.
이러한 방식으로 해당하는 코드를 난독화 할 수 있다.

 

((a, b) => {
  console.log(a.innerWidth); // 윈도우 객체에서 사용할 수 있는 속성 innerWidth (화면의 가로너비)
  console.log(b.body); // html의 body 요소
})(window, document);

👉🏻 이런 방식으로 즉시실행함수는 두 번째 소괄호로 들어오는 각각의 데이터들을
즉시실행하는 함수의 매개변수로 받아서 쓸 수가 있다. 당장 유용한 기능이라고 보기엔 조금 어렵지만,
이런 방식을 통해서 외부의 변수를 다른 이름으로 내부에서 쓸 수 있겠고,
대표적인 사용 사례로는 코드의 난독화가 있다는 것을 가볍게 기억하기.