(JavaScript) AST(Abstract Syntax Tree)

자바스크립트 컴파일러의 내부 메커니즘 중 AST라는 것이 있습니다.

AST에 대해 간단히 소개하고 직접 확인할 수 있는 사이트도 공유하고자 합니다.

AST는 ‘Abstract Syntax Tree’의 약자로 우리말로 하면 ‘추상 구문 트리’라고 합니다. 이 AST는 기본적으로 코드의 프로그램을 나타내는 ‘노드(Node)’ 트리 입니다.

노드는 가능한 가장 작은 단위이며 기본적으로 ‘타입’과 ‘위치’ 속성을 가진 POJO (즉, 일반적인 오래된 자바스크립트 객체)입니다.

모든 노드들은 이 2개의 속성을 가지지만 ‘타입’을 기반으로 다양한 다른 속성들 또한 가질 수 있습니다.

AST 양식의 코드는 조작하기가 매우 쉽기 때문에 추가, 삭제 또는 수정과 같은 작업을 할 수 있습니다.

아래의 예제 코드는

function addFive(num) {
  return num + 5;
}

다음의 AST를 가지게 됩니다.

{
  type: "Program",
  start: 0,
  end: 44,
  body: [{
    type: "FunctionDeclaration",
    start: 1,
    end: 44,
    id: {
      type: "Identifier",
      start: 10,
      end: 17,
      name: "addFive"
    },
    expression: false,
    generator: false,
    async: false,
    params: [{
      type: "Identifier",
      start: 18,
      end: 21,
      name: "num"
    }],
    body: {
      type: "BlockStatement",
      start: 23,
      end: 44,
      body: [{
        type: "ReturnStatement",
        start: 27,
        end: 42,
        argument: {
          type: "BinaryExpression",
          start: 34,
          end: 41,
          left: {
            type: "Identifier",
            start: 34,
            end: 37,
            name: "num"
          },
          operator: "+",
          right: {
            type: "Literal",
            start: 40,
            end: 41,
            value: 5,
            raw: "5"
          }
        }
      }]
    }
  }],
  sourceType: "module"
}

astexplorer.net 과 같은 사이트에서 자바스크립트 코드를 작성하고 즉시 AST를 확인할 수 있습니다.

AST에 대해 자세히 설명하는 많은 훌륭한 글들이 많습니다. 그 글들을 확인하실 때 위와 같은 사이트를 병행하여 보신다면 도움이 될 것입니다.

감사합니다.