[Javascript] 자바스크립트의 즉시실행 함수와 익명 함수(예시 포함)

Intro

즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하자마자 즉시 호출하는 패턴입니다. 이는 함수를 선언과 동시에 실행하여 사용할 수 있는 유틸성 함수나 모듈 패턴을 구현하는 데에 자주 사용됩니다.

 

(function() {
  // 코드 작성
})();

위의 구문에서, 함수는 익명으로 선언되고 함수 정의를 괄호로 둘러싸서 함수를 표현식으로 만듭니다. 그리고 바로 뒤에 괄호로 함수를 호출하여 즉시 실행합니다.

 

즉시 실행함수의 이점

1. 스코프 격리

• 즉시 실행 함수 내에서 선언된 변수와 함수는 즉시 실행 함수 내에서만 유효하며, 전역 스코프를 오염시키지 않습니다. 이를 통해 변수 충돌을 방지하고 모듈화를 구현할 수 있습니다.

(function() {
  var privateVariable = "비공개 변수";
  console.log(privateVariable); // 접근 가능

  // 다른 함수에서 privateVariable에 접근할 수 없음
})();

console.log(privateVariable);

 

2. 정보 은닉(Encapsulation)

• 즉시 실행 함수 내에서 선언된 변수와 함수는 외부에서 접근할 수 없습니다. 이를 통해 비공개 멤버와 공개 인터페이스를 가진 모듈을 생성할 수 있습니다.

ar myModule = (function() {
  var privateVariable = "비공개 변수";

  function privateFunction() {
    console.log("비공개 함수");
  }

  return {
    publicFunction: function() {
      console.log("공개 함수");
    }
  };
})();

myModule.publicFunction(); // "공개 함수" 출력
console.log(myModule.privateVariable); // undefined
myModule.privateFunction(); // TypeError: myModule.privateFunction is not a function

 

3. 초기화 코드 실행

• 즉시 실행 함수는 선언과 동시에 즉시 실행되므로, 초기화 코드를 실행할 수 있습니다. 이를 통해 초기 설정이나 필요한 작업을 즉시 수행할 수 있습니다.

(function() {
  console.log("초기화 코드 실행");
})();

 

즉시 실행 함수는 모듈 패턴과 함께 사용되어 JavaScript 코드를 모듈화하고 스코프를 관리하는 데에 유용합니다. 이 패턴을 사용하면 전역 스코프를 오염시키지 않고 독립적인 모듈을 구현할 수 있으며, 정보 은닉과 초기화 코드 실행을 효과적으로 처리할 수 있습니다.

 

---

익명 함수

• 익명 함수(Anonymous Function)는 이름이 없는 함수입니다. 함수 표현식이나 콜백 함수로 사용될 때 주로 익명 함수가 활용됩니다. 익명 함수는 함수의 정의 자체가 변수에 할당되거나 다른 함수의 인수로 전달될 때 사용됩니다.

var myFunction = function() {
  // 코드 작성
};

위의 예시에서 myFunction 변수에 익명 함수가 할당되었습니다. 이 익명 함수는 이름이 없지만 변수를 통해 호출하거나 다른 함수에 전달하여 사용할 수 있습니다.

 

익명 함수의 주 사용법

1. 콜백 함수

• 다른 함수의 인수로 전달되는 함수로서, 비동기 작업이나 이벤트 핸들러 등에서 사용됩니다.

setTimeout(function() {
  console.log("1초 후에 실행됩니다.");
}, 1000);

 

2. 즉시 실행 함수

• 앞서 설명한 즉시 실행 함수는 주로 익명 함수로 구현됩니다.

(function() {
  // 코드 작성
})();

 

3. 모듈 패턴

• 익명 함수를 사용하여 모듈을 생성하고 모듈의 인터페이스를 정의하는 데 활용됩니다.

var myModule = (function() {
  var privateVariable = "비공개 변수";

  function privateFunction() {
    console.log("비공개 함수");
  }

  return {
    publicFunction: function() {
      console.log("공개 함수");
    }
  };
})();

위의 예시에서 myModule 변수에 익명 함수가 할당되었고, 그 함수는 모듈 객체를 반환합니다. 반환된 모듈 객체의 publicFunction 프로퍼티를 통해 모듈의 공개 함수에 접근할 수 있습니다.

 

익명 함수는 이름이 없기 때문에 한 번만 사용되거나 지역적인 용도로 사용될 때 유용합니다. 익명 함수를 사용하여 코드를 구성하면 전역 스코프를 오염시키지 않고 필요한 로직을 구현할 수 있습니다.