[Javascript] 즉시실행함수와 콜백함수

즉시실행 함수 (IIFE)

즉시실행함수(IIFE, Immediately Invoked Function Expresstion)는 함수를 정의하면서 동시에 호출한다. 자바스크립트의 프레임워크에서 주로 사용한다.

// 이름이 없는 익명 함수를 만들자 마자 바로 호출
 (function() {
      console.log("hello");
    }()); 

// arrow 함수로도 가능
(() => {
      console.log("hello");
})();

필요없는 전역 변수의 생성을 줄일 수 있다. 또한 즉시 실행 함수는 외부에서 접근할 수 없는 자체 scope를 생성한다. 내부 변수를 외부로부터 보호해 private하게 보호할 수 있다는 장점이 있다. 또한 초기화 코드나 모듈화 패턴을 만들 때 유용하게 사용된다.

즉, IIFE 사용의 가장 큰 목적은 데이터 프라이버시와 코드 모듈화라고 할 수 있다.

/* 숫자를 세기 위한 Counter 객체 구현 */
// 1. 먼저 객체를 반환하는 형태의 즉시실행함수 생성
const counter = (function() {
     // 2. 즉시실행함수 내부에는 현재 counter값을 저장하기 위한 current 변수 생성
    let current = 0;

      // 3. 즉시실행함수의 반환 객체는 counter라는 변수에 할당
      return {
          // 3.1 현재 current 값을 출력하는 getCurrent 함수
        getCurrent: function(){
            return current;
        },

          // 3.2 현재 current 값에 1을 더하는 increaseValue 함수
          increaseValue: function() {
            current += 1;
              return current;
        },

          // 3.3 현재 current 값에 1을 빼는 decreaseValue 함수
          decreaseValue: function() {
            return current-1;
        },
    };    
})();
console.log(count.getCurrent());
console.log(count.increaseValue());
console.log(counter.decreaseValue());

위의 코드에서 current 변수는 private하기 때문에 클로저를 통한 접근 외에는 접근 및 수정이 불가능하다.

 

💡 클로저란?

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다.

위 정의에서 말하는 함수란 반환된 내부함수를 의미하고, 그 함수가 선언될 때의 Lexical environment란 내부함수가 선언됐을 때의 scope를 의미한다. 즉, 클로저는 반환된 내부함수가 자신이 선언되었을 때의 환경(Lexical environment)인 scope를 기억하여 내부함수 밖에서 호출되어도 그 scope에 접근할 수 있는 함수를 말한다.

쉬운 설명! 사례와 함께 보는 자바스크립트의 클로저(Closure)란?

---

콜백함수 (callback function)

사용자가 호출하지 않고 특정 순간에 시스템이 호출하는 함수를 의미한다. 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 콜백함수를 전달받고 함수 내부에서 필요할 때 콜백함수를 호출할 수 있다.

 

즉, 콜백함수는 지금 바로 실행되지 않지만 다른 함수의 입력 값으로 전달되어 다른 함수에 의해서 나중에 호출되게 하는 것이다.

<button id="callback-btn">Click here</button>

/* 사용자가 버튼을 클릭했을 때, 콘솔에 메시지 남기기 */
document.queryselector("#callback-btn").addEventListener("click", function() {
          console.log("Button clicked!");
});

버튼의 id값을 전달받아 addEventListener 메소드를 사용하여 이벤트 리스너를 추가하는 코드이다. 이벤트 리스너 함수의 매개변수로 이벤트 타입인 click과 버튼이 클릭되었을 때 메시지를 남기는 기능을 가진 콜백함수를 지정하였다.

 

위와 같이, 콜백함수는 자바스크립트에서 특정 이벤트가 발생했을 때, 시스템에 의해 호출되는 함수이다. 

 

콜백함수가 왜 필요한지?

콜백함수는 자바스크립트의 비동기 처리 방식의 문제점을 해결해주기 위해 특정 시점에서 호출이 되도록 사용하는 함수이다.

 

💡 자바스크립트의 비동기식 처리?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 방식이다. 이러한 방식은 작업이 완료되기 전에 그 결과를 사용하려 하는 경우에 문제가 발생할 수도 있다. 이러한 문제를 해결하기 위해 콜백함수가 사용된다. 콜백함수는 특정 작업이 완료되었을 때 함수를 호출하여 적절하게 결과를 처리할 수 있다.

getData();
test();

function getData() {
    // ajax 통신
}
function func() {
    // ajax 통신 후 받아온 data 를 가지고 실행
    alert("I got the data.");
}

다음과 같이 ajax통신을 하고 받아온 data를 가지고 실행이 되어야하는 func 함수가 있다고 가정할 때, 위의 코드처럼 짜면 비동기식 처리 특성 때문에 getData()에서 ajax통신이 끝날 때 까지 기다려주지 않는다. ajax통신을 하는 시간에 이미 func 함수가 실행되어 alert이 먼저 뜰 것이다.

 

이러한 문제를 해결해주는 함수가 콜백함수 이다.

getData(func);

function getData(callback) {
    // ajax 통신
    success : function(data) {
        alert("ajax 통신 성공");
       callback();
    }
}
function func() {
    alert("I got the data.");
}

이렇게 하면 ajax 통신이 완료된 후에 func 함수가 실행된다.

 

but, 콜백을 많이 사용하면 가독성도 떨어지고 오류찾기도 힘들고 유지보수 힘들고 요새는 또 promise 함수가 이러한 점을 보완해서 나왔다고 한다.