2oneweek.dev

08. JS에서 함수를 정의하는 방법

    Tags

  • JavaScript
08. JS에서 함수를 정의하는 방법 thumbnail

Function Definition

함수 정의 방식에는 4가지 형태가 있다.

  1. 함수 선언문
  2. 함수 표현식
  3. new 키워드
  4. 화살표 함수


함수 선언문 Function Declaration

function put(item) {}
  • "function 키워드 + 함수 이름"을 사용하여 정의
  • JS Engine은 function 키워드를 만나면, function Object를 생성하고, 함수 이름을 function Object의 이름으로 사용하게 된다.


함수 표현식 Function Expression

var putFunc = function (item) {};
  • "할당문 + function 키워드"를 사용하여 함수 정의
  • 엔진이 만든 function object의 이름으로 변수의 이름을 사용한다.


new Function("params","body")




Engine의 해석

자바스크립트는 스크립팅 언어다.

  • 작서된 코드를 위에서부터 한 줄씩 해석하고 실행한다.
  • 하지만 자바스크립트는 일반적인 스크립팅 언어가 아니다.
  • 상황에 따라서 중간에 있는 코드가 먼저 "해석"될 수도 있다.

해석 순서

  1. 엔진은, 먼저 함수 내부에 있는 "함수 선언문"을 모두 추려낸다.
  2. "함수 선언문"을 작성된 순서대로 해석한다.
  3. 모든 "함수 선언문"의 해석이 끝났으면, 모든 "표현식"을 추려낸다.
    • var a = 123;var b = function(){}는 모두 표현식이다.(변수에 할당하는 형태는 모두 표현식이다.)
    • 함수 표현식은, 할당되는 것이 Function Object인 경우를 말하는 것이다.
  4. 작성한 순서대로 모든 표현식을 해석한다.


예시

function book() { var title = "타이틀"; function getBook() { return title; } var readBook = function () {}; getBook(); } book();
  1. book() 함수 호출로 내부로 진입
  2. 엔진은 book 함수 내부를 한 바퀴 돌면서, 함수 선언문만 해석
    • Scope를 생성하여 각 function Object의 [[Scope]] 에 넣어주는 단계
    1. function getBook(){};
  3. 선언문 해석이 끝나면, 엔진은 다시 book함수의 첫번째 줄로 돌아온다. 엔진은 표현식만을 해석한다,
    • 이때, 변수 선언(메모리 공간 확보)을 한다. 또한 엔진은, 확보된 공간에 담긴 변수의 값으로 undefined를 할당한다.
    1. var title = undefined;
    2. var readBook = undefined;
  4. 코드 실행
    • var title = "타이틀";
    • var readBook = function(){};
      • 표현식의 function Object는 실행 단계에서 생성된다. function Object가 생겼으므로, 호출이 가능해진다.
    • getBook();
Written by@2-one-week
현재 블로그 개발 중

GitHubLinkedIn