11-3. Function 오브젝트 / 함수 형태, 함수 선언문, 함수 표현식

함수 형태

• 함수 선언문

  • Function Declaration
  • function getBook(book) {코드}

• 함수 표현식

  • Function expression
  • var getBook = function(book) {코드}
    자바스크립트 엔진이 function 키워드를 만나면 function 오브젝트를 만들고 getBook에 할당합니다.
    따라서 getBook은 함수 이름이면서 function 오브젝트입니다.

함수 표현식은 var getBook = 1 + 2; -> getBook에 3이 할당됨.
이런 개념입니다.

함수 선언문

• function getBook(title){함수 코드} 형태

  • function 키워드, 함수 이름, 블록{}은 작성 필수

  • 파라미터, 함수 코드는 선택

      function getBook(title) {
          return title;
      }
      var result = getBook("JS책");
      console.log(result); // JS책
    

• 함수 이름을 생성한 function 오브젝트의 이름으로 사용

함수 표현식

• var getBook = function(title){코드}

  • function 오브젝트를 생성하여 변수에 할당

  • 변수 이름이 function 오브젝트 이름이 됨

      var getBook = function (title) {
          return title;
      }
      var result = getBook("JS책");
      console.log(result); // JS책
    

• 식별자 위치의 함수 이름은 생략 가능

  • var name = function abc(){} 에서 abc가 식별자 위치의 함수 이름입니다.

      var getBook = function inside(value) {
          if (value === 102) {
              return value;
          };
          console.log(value);
          return inside(value + 1);
      }
      getBook(100);
      // 100 <- console.log()
      // 101 <- console.log()
      // 102 <- 그냥 getBook 리턴값
    

    1. inside 이름으로 function 오브젝트를 생성하여 getBook 변수에 할당합니다.
    2. **함수 외부에서 inside()를 호출할 수 없으며** getBook()을 호출하여 함수 안으로 이동한 후 inside()를 호출할 수 있습니다.
    3. 함수 안에서 inside()를 호출하는 것은 자신을 호출하는 것이므로 무한으로 반복하여 호출하게 됩니다.
    4. 함수가 종료되도록 조치를 취해야 합니다.

위 코드를 보면 함수 안에서 자기 자신을 다시 호출하는 형태로 되어있습니다.
함수 안에서 자기 자신을 부르는 것을 재귀함수라고 합니다.
이처럼 재귀함수는 함수를 빠져나가는 코드를 작성해야됩니다.
그렇지 않으면 계속 호출하게 되니까 무한반복을 하게 됩니다.
그리고 최근에는 inside 대신에 getBook을 호출합니다.

그런데 함수를 왜 두가지 형태로 사용할까? (함수 표현식 / 함수 선언식)
왜 이렇게 사용하는 것일까요.
한가지로만 사용하면 안되는 걸까요?
왜 복잡하게 두 가지 형태가 있을까요?

사전지식이 필요해 중고급과정에서 다룹니다만, 간단하게 말씀드리면 함수 선언문이 먼저 function 오브젝트를 만들고 그 다음에 함수 표현식으로 function 오브젝트를 만듭니다.
꽤 차이가 있죠?
순서가 다르니까요.
이에 따라서 동반되는 처리도 달라집니다.