비동기 즉시 실행 함수 - bidong-gi jeugsi silhaeng hamsu

목차

"Immediately Invoked Function Expression"의 줄임말로, 정의되자마자 즉시 실행되는 함수 표현식을 말한다.

'Self-Executing Anonymous Function' 이라고도 불리며,

전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라

IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다.

// 아래 두 함수는 동일한 동작을 수행한다.
var app = function() {
    console.log('함수 호출'); // "함수 호출" 출력
};
app();


// 즉시실행함수 IIFE
(function() {
    console.log('함수 호출'); // "함수 호출" 출력
}());

두 함수는 모두 동일한 로직을 가지고 있다.

IIFE는 전체 익명함수를 괄호로 감싸줌으로써 내부 코드가 선언문이 아니라 표현식인 것처럼 Parser를 속인다.

​

익명함수이기 때문에 재사용은 적합하지 않다! 물론 기명으로도 가능은 하다.

하지만 보통 함수에게 이름을 짓는 것은 호출이 목적인 경우가 대부분인데,

한번 자동으로 실행된 이후 생명을 다하는 IIFE에게 이름을 지어주는 것은 의미가 없다.

어찌되었든 IIFE를 익명으로써야하는지, 기명으로 써야하는지에 대해서는 개발자들 사이에서도 의견이 갈리는 것 같다.

즉시실행 함수 표현식 종류

//아래 함수선언문은 아무것도 반환하지 않는다(혹은 undefined)
function() {
} 

//이런 표현식을 쓰면 !undefined는 true를 반환한다. 그리고 바로 실행하기도 함. 단, 리턴값이 없어야함
!function() {
}()

//함수 실행의 결과로 실제 반환되는 값을 얻으려면
(function(){
})();

//익명 즉시실행함수(더글러스 클락포드 권장표기법)
(function() {
}());

즉시실행함수를 쓰는 이유

​

1. 클로저 구현할때

let func = (function() {
  var counter = 0;
      
  return function(){ // 클로저
    return ++counter; 
  }
})();

func(); // 1
func(); // 2
func(); // 3

​

2. async / await 비동기 처리를 바로 사용할때

(async () => {
  ... 코드1
  await promise();
  ... 코드2
})();

즉시실행함수 주의할점

보통 자바스크립트에서 세미콜론(;) 을 생략해도 문제없다.

하지만 즉시실행 함수를 사용하려고 할때 세미콜론을 붙이지 않으면 에러가 뜬다.

Reference

http://milooy.github.io/TIL/JavaScript/javascript-run-function.html#%E1%84%8C%E1%85%B3%E1%86%A8%E1%84%89%E1%85%B5%E1%84%89%E1%85%B5%E1%86%AF%E1%84%92%E1%85%A2%E1%86%BC%E1%84%92%E1%85%A1%E1%86%B7%E1%84%89%E1%85%AE

https://velog.io/@grinding_hannah/JavaScript-IIFE-%EC%A6%89%EC%8B%9C-%EC%8B%A4%ED%96%89-%ED%95%A8%EC%88%98%ED%91%9C%ED%98%84%EC%8B%9D-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

잘못된 내용이 있으면 댓글로 피드백 부탁드립니다 :)

이 글이 좋으셨다면 구독 & 좋아요

여러분의 구독과 좋아요는
저자에게 큰 힘이 됩니다.

async function 키워드는 표현식 내에서 async 함수를 정의하기 위해 사용됩니다.

또한 async function statement을 사용하여 async 함수를 정의할 수 있습니다.

    async function [name]([param1[, param2[, ..., paramN]]]) { statements }

    function resolveAfter2Seconds(x) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(x);
        }, 2000);
      });
    };


    var add = async function(x) { // async function 표현식을 변수에 할당
      var a = await resolveAfter2Seconds(20);
      var b = await resolveAfter2Seconds(30);
      return x + a + b;
    };

    add(10).then(v => {
      console.log(v);  // 4초 뒤에 60 출력
    });


    (async function(x) { // async function 표현식을 IIFE로 사용
      var p_a = resolveAfter2Seconds(20);
      var p_b = resolveAfter2Seconds(30);
      return x + await p_a + await p_b;
    })(10).then(v => {
      console.log(v);  // 2초 뒤에 60 출력
    });

Specifications

Browser compatibility

BCD tables only load in the browser