생각보다 헷갈리고 응용법도 다양하기 때문에 한 번 정리해볼 필요성을 느껴서 쓰게 되었다.

🍎즉시실행함수

🥕문법

(function (Parameter) {})(Parameter);

함수선언 부분을 소괄호()로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호()를 한 번 더 붙여주는 방식이다. 이렇게 작성하면 묻지도 않고 바로 함수가 실행된다.

• 뒤에 있는 소괄호()가 바로 앞의 함수를 실행하는 명령이다. 즉시실행함수는 이름에서부터 알 수 있듯이 즉시 실행이 목적이기 때문에 기본 베이스는 익명함수라고 볼 수 있다.
• 기명함수로 작성해도 외부에서는 재사용이 불가능하다.
  
  
  

예제1) 즉시 실행

(function () {
 console.log('Hi~!');
})();

// Hi~!

바로 출력된다.

(function () {
 // ...
}());
(function () {
 // ...
})();
!function () {
 // ...
}();
+function () {
 // ...
}();

다양한 방법으로 즉시실행함수를 쓸 수 있다.
이 글에서는 2번째 형태를 따르겠다.

예제2) Parameter를 넘길 수 있다

(function (x, y) {
  console.log(x + y);
})(4, 5);

// 9

일반 함수처럼 Parameter를 작성하고, 호출할 때 Argument를 넘겨줄 수 있다.

• 뒤에 있는 소괄호()가 함수를 실행하는 명령이라고 한 이유를 알 수 있다.
  
  

예제3) 재사용불가능

(function sayHello() {
  console.log('Hello!');
})();

sayHello(); // ReferenceError

앞서 말했듯이 즉시실행함수는 기명함수로 적어도 재사용이 불가능하다.

(function countdown(n) {
  console.log(n);
  if (n === 0) {
    console.log('End!');
  } else {
    countdown(n - 1); // 재귀적 사용을 위해 재사용
  }
})(5);

하지만 함수 내부에서 재귀적 용도로는 사용할 수 있으니 상황에 맞게 활용하시면 된다.

🥕활용

즉시실행함수는 나처럼 자주 Parameter를 작성하는 것이 귀찮을 때 아주 유용하다.

const firstName = 'Lee';
const lastName = 'Sam';

const checkName = (function () {
  const fullName = `${firstName} ${lastName} `;
  return `Checked, ${fullName}`;
})();

checkName // 'Checked, Lee Sam '

이렇게 작성하면 checkName만 입력하고 따로 Argument를 적지 않아도 함수가 실행된다.
보통 바로 실행되야하는 경우 쓰게 된다. 리액트에서 바로 실행돼야하는 hook 개념이라고 보면 된다.

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res); 
  }, 3000);
}

taskA(3, 4, (res) => {
  console.log("A TASK RESULT : ", res);
});
console.log("코드 끝"); // 코드 끝 A TASK RESULT :  7

콜백함수 cb에 (res) => {console.log("A TASK RESULT : ", res);}를 넣었다.
즉 ((res) => { console.log("A TASK RESULT : ", res); })(res)와 같은 구조가 된 것이다. 이는 앞서 살펴본 즉시실행함수이다.

이정도만 알면 신입 개발자라면 그래도 충분하지 않을까 싶다.