즉시 실행 함수 (IIFE)

1. 즉시실행함수 

함수는 원래 선언부 (혹은 표현식)과 호출부가 따로 필요하다. 

왜냐하면 선언부는 함수의 내용에 대해 기술만 하여 놓은 곳이고, 호출부는 함수의 내용을 쓰는 곳 이기 때문이다. 

 

즉시 실행함수는 함수의 선언과 호출을 한번에 하는 함수를 말한다. 

 

밑에 즉시 실행함수 사용 패턴을 배우겠지만, 대표적인 패턴으로 즉시실행함수의 모습을 살펴보면, 

//(실행할 함수)(인수);

// 예시
((a) => {
	console.log(a*2);
    })(7);

 이와 같다. 

()() 가 붙어 있는 형태로, 첫번째 ()에는 실행할 함수, 두번째 ()에는 함수에 들어갈 인자를 기술하면 된다.

2. 패턴 

// 즉시 실행 함수 패턴

// 1. 화살표 함수 사용 패턴 -> 화살표 함수로 즉시 실행 함수를 쓸 수 있는 패턴은 이것밖에 없다.

(() => {})(); 

// 2. 함수 선언문 사용 패턴 
    (function () {})();
    (function () {} ());

// 3. 자주 안 쓰이는 패턴이지만 알아 두기
!(function () {})();
+(function () {})();

3. 스스로 해보기 

console.log(
  ((a) => {
    for (i = 0; i < 10; i++) {
      a += i;
    }
    return a;
  })(0)
);

console.log(
  ((a) => {
    return a.reduce((acc, cur) => {
      return acc + cur;
    }, 0);
  })([1, 2, 3, 4, 5, 6, 7, 8, 9])
);

잘 몰랐던 점

1. reduce 는 콜백함수를 불러 계산하고 그 결과를 반환한다. reduce의 결과를 쓰기 위해선 reduce 자체도 반환 해야한다. 

a.reduce 옆에는 return을 붙이지 않아서 해당 reduce 연산의 결과를 출력하지 못하고 계속 undefined가 나왔다.

 

2. for 루프 안에서 return을 써버리면, 한번 루프 돌고 그대로 for 루프를 탈출해버린다.

 

break와 return의 차이점

: break => 해당 키워드가 쓰인 반복문을 탈출한다.

  return => 해당 키워드가 쓰인 함수 자체를 탈출한다. 

 

그래서 함수(반복문) 형태로 되어있는 반복문 내에 return을 써버리면 반복문 뿐만 아니라 함수 자체도 탈출함으로 유의 하자. 

 

<참고>

JavaScript에서 return과 break의 차이 | 꿈꾸는 지구별 개발자, Phang (jihyehwang09.github.io)