자바스크립트 심화(10) 즉시 실행함수

즉시실행함수는 왜 필요할까? 함수만으로도 충분히 기능을 만들고 사용할 수 있는데 특이한 형태의 함수를 만들어야 하는 이유를 생각해보자. 가령, 사람의 몸을 복잡한 프로그램에 비유하면, 내장기관들은 모두 함수를 갖고 있다. 간은 해독작용을 하고, 위장은 음식물을 처리하고, 대장은 배설기능을 담당한다. 더 세분화하면 수많은 하부 기관들(클래스)이 있다. 

그런데 심장과 같은 장기를 생각해보자. 

심장과 같은 장기는 잠시 멈췄다가 다시 뛰고 또 멈추는 식으로 상황에 따라 기능을 실행해서는 안 된다. 피가 돌고있는 한 심장은 즉시 실행되어야 한다. 사람의 몸에는 심장처럼 즉시실행을 해야하는 조직들로 가득차 있다. 손톱이나 머리카락 같은 경우도 영양이 보충되면 즉시 자라난다. 

1 즉시실행함수가 필요한 이유

프로그램도 규모가 커지면 사람의 몸처럼 '즉시 실행'을 담당해야 할 부분들과 상황에 따라 기능을 실행하는 부분으로 나눠진다. 특히, <script>태그에 경로만 지정해줬을 때 자동으로 각종 기능들을 사용할 수 있는 라이브러리 같은 경우, 즉시 실행함수가 대부분인 경우가 많다. '자동화'라는 의미 뒷편에는 언제나 항상 뛰고 있는 즉시실행 함수가 있다는 점을 염두에 둬야 한다.

2 즉시실행함수 표현식

즉시실행함수는 말 그대로 선언을 하자마자 즉시 실행되는 함수다. 즉시실행함수의 표현은 다음과 같다.

(function(){     console.log("fun"); }())

함수를 선언하고 앞뒤로 괄호를 감싸는 방식 혹은 아래처럼 함수의 마지막에 괄호를 붙이는 방식을 많이 사용한다. 또한, 다소 특이하지만 +를 맨앞에 붙이는 방법도 있다. 

(function(){     console.log("fun") })() +function(){     console.log("fun") }()

즉시실행 함수는 함수를 반환할 수 있고, 인자를 전달하는 것도 가능하다. 

let answer = (function(first, second, operator){        let result = 0;          if(operator === '+'){               result = first + second;          }else if(operator === '-'){               result = first - second;           }                    return function(){  //①               return result;          };   })(100,200,'+');      console.log('answer값은: '+answer() );

①에서 return값으로 익명함수를 반환한다. console.log()에서 answer()이 아닌 answer을 사용하면 함수가 그대로 반환되고, answer()함수를 넣으면 300이라는 결과값이 나온다. 만일 answer 내부에 클래스가 있다면, 클래스의 값들 역시 반환할 수 있으며 여러가지 기능을 넣을 수 있다.