2oneweek.dev

23. 즉시실행함수 (IIFE)란?

    Tags

  • JavaScript
23. 즉시실행함수 (IIFE)란? thumbnail

Immediately Invoked Function "Expression"

즉시 실행 함수란,

  • 엔진이 function 키워드를 만나면, function Object를 생성하고 바로 호출한다. 즉시 실행하므로 즉시 실행 함수라고 한다.

    (function () { console.log("즉시실행함수"); }); (function () { console.log("즉시실행함수"); })();

(function(){..})의 형태

  • () 함수를 감싸는 소괄호 소괄호는 그룹핑 연산자다. 그룹핑 연산자는 소괄호 안의 표현식을 평가하고, 평가 결과를 반환한다.

  • function(){..} 함수 이름이 없으므로 함수 선언문도 아니고 함수 표현식도 아니다. 이것을 익명함수, 무명함수라고 한다.

    • 소괄호 없이, 익명함수를 사용하면 에러가 발생한다. var value = function(){...} 처럼 할당을 해서 함수에 이름을 만들어 주거나, 애초에 함수 이름을 선언해야된다.

  • function() 의 소괄호 함수 끝에 있는 소괄호는 그룹핑 연산자가 아니라 호출문이다. var value = (function () { return 100; })(); console.log(value); //=> 200
    • 이렇게 function Object 뒤에 소괄호를 붙이면, 호출을 하게되고, 100을 return 하여 value에 할당된다.

즉시 실행 함수 실행 과정

(function () { console.log("즉시실행"); })();
  • 그룹핑 연산자를 작성하지 않으면, 함수 이름이 없으므로 문법 에러가 발생한다. 그룹핑 연산자를 쓰면, 표현식에 function을 작성한 것이므로 문법에러가 발생하지 않는다.

    • 그룹핑 연산자는 표현식을 평가하고 결과를 반환한다.
  • 그룹핑 연산자가 평가 결과를 반환하기 전 까지, 메모리에 표현식과 표현식의 평가 결과가 저장된다. 반환이 되면, 메모리에서 지운다.

  • 따라서 function(){}()로 인해 만들어진 오브젝트나 실행 결과도 메모리에 저장되지 않는다. 따라서 저장해야할 것이 있으면 표현식 바깥의 변수나 객체에 저장해야 한다.

    • 저장할 필요가 없는 1회성 코드이면서, 엔진이 function 키워드를 만나는 시점에 즉시 실행해야 한다면, 이처럼 즉시 실행 함수를 쓰면 된다.
  • 무명 함수는 그룹핑 연산자 안의 코드를 한 번만 사용할 때 쓴다. 주로 초깃값을 설정할 때 사용한다.

Written by@2-one-week
현재 블로그 개발 중

GitHubLinkedIn