ECMA 2015를 공부해보자

 Javascript의 속도가 점점 빨라지면서 이를 이용하여 단순 HTML코드에서 사용되는 스크립트를 넘어, 어플리케이션을 만드는 데에도 사용되고 있다. 따라서 현재 트렌드를 따라가기 위해, 현재 사용되고 있는 ECMA5 문법에 새로운 스펙이 추가 된 ECMA2015(es6)가 표준화 되었다. 그러나 현재 몇몇 브라우저에서 제한된 문법만 지원되고 있을 뿐이어서 실제 개발이나 서비스에 도입하는데는 시간이 걸릴 것으로 보인다.

 그렇다면 미리 적용해 볼 수 있는 방법은 없을까? 결론부터 말하자면 가능하다. Babel같은 트랜스파일러를 통해 es6 문법을 es5로 컴파일하여, 문법은 es6로 작성하고 실행은 es5로 하는 것이다. 이 페이지에서는 Babel을 설치한 후 앞으로 사용 될 es6 문법을 미리 공부해 보고자 한다.

1. Babel Install

 es6 문법을 es5로 컴파일 하기 위해선 Babel 이라는 트랜스파일러가 필요하다. npm을 이용해서 설치하도록 하자.

(npm이 설치되어 있지 않은 사람은 https://nodejs.org/ko/ 에서 다운받도록 하자. 사용법에 대해선 이 포스팅에선 설명하지 않도록 하겠다. 적절한 구글링을 하면 관련 내용을 찾을 수 있을 것이다.)

프로젝트를 만든 후 npm을 이용하여 Babel을 설치한다.

Babel에 대한 정보는 공식 사이트(https://babeljs.io/)에서 더 자세히 얻을 수 있으니 참고하자. 

$ npm install babel-cli -g --save-dev

* 공식 문서에서는 전역 설치를 권장하지 않으나 path설정하기 귀찮음으로 그냥 전역에 설치해서 사용하자.

리눅스나 맥을 사용하는경우 관리자 권한이 필요하기 때문에 sudo 키워드를 붙여주도록 하자.

2. Preset Install

 es6를 es5로 컴파일 하기 위해선 프리셋이 필요하다. 필요한 es6 문법만 골라서 설치할 수 도 있지만, 전체적으로 한번씩 사용해 보기 위해 전부 설치해보자.

$ npm install babel-preset-es2015 --save-dev

다음으로 사용할 프리셋을 등록해주자.

프로젝트 폴더 바로 아래에 .babelrc라는 파일을 만든 후 아래 내용을 채워 넣어주자.

{
  "presets": ["es2015"]
}

3. es6 문법으로 만든 스크립트를 만들어 보자

이제 babel을 사용하기 위한 준비는 모두 끝났다. 실제로 es6문법을 사용해보고 babel로 컴파일 해보자.

arrow.js 라는 이름으로 자바스크립트 파일을 하나 만든 후, 아래와 코드를 써넣는다.

var arrowTest = (x) => x*x;

es6에 새로추가된 arrow 문법이다. 익명함수를 축약해서 사용할 수 있다. 물론 this의 범위 등 세부적인 부분이 다르지만 만 나중에 다시 보기로 하고 컴파일 하는 것에 집중하자.

해당 코드를 작성한 후 babel을 이용하여 컴파일 한다.

$ babel arrow.js

아래와 같이 es5로 컴파일 된 코드를 볼 수 있을 것이다.

var arrowTest = function arrowTest(x) {
    return x * x;
};

물론 다음과 같이 사용하면 해당 코드를 파일로도 출력 하는 것도 가능하다.

$ babel arrow.js -d build/ 

build 폴더가 생기고, 안을 열어보면 컴파일 된 arrow.js 파일을 볼 수 있다.

4. 간단히 ES6 문법을 알아 보자

이제 컴파일 하는 방법을 알았으니, 몇가지 es6문법을 사용해보자. 여기서는 해당 문법에 대해 간략히만 살펴볼 것이기 때문에 관심히 있는 사람은 찾아보기 바란다.

1) arrow function

앞 컴파일 예제에서 사용한 문법이다. 익명함수를 화살표(=>)를 이용하여 표현할 수 있다. 익명함수와 다른 점은 this의 범위가 lexical 범위 안에 있는 this를 가리킨다.

2.) let / const

자바스크립트에서 변수 선언은 var 키워드로 밖에 할 수 없었다. 자바스크립트의 변수 범위는 함수 단위인데 비해,  let / const 키워드로 선언 된 변수는 블럭 단위 스코프를 지원한다.

let x = 10;

{
    let x = 1;
    console.log('x', x); // 1
}

console.log('x', x); // 10

생활코딩에 있는 클로저 강의(https://opentutorials.org/course/743/6544)에 있는 예시에 적용해 보자.

var arr = [];
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}

for(var index in arr) {
    console.log(arr[index]());
}

해당 코드를 실행하면 0, 1, 2, 3, 4가 찍힐 줄 알았던 기대와 달리 5가 5번찍히는 것을 볼 수 있다. 함수 단위 스코프를 사용해서 생기는 문제이다. 클로저를 사용해서 해결 할 수 있지만 es6에서는 좀 더 간단한 방법을 이용하면 된다.

var arr = [];
for(let i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}

for(var index in arr) {
    console.log(arr[index]());
}

for문의 변수선언을 let으로 바꾸었다. 이제 결과를 출력해보면 0, 1, 2, 3, 4가 순서대로 찍히는 모습을 볼 수 있다.

Babel을 통해 내부적으로 변환된 코드는 다음과 같다.

var arr = [];

var _loop = function _loop(i) {
    arr[i] = function () {
        return i;
    };
};

for (var i = 0; i < 5; i++) {
    _loop(i);
}

for (var index in arr) {
    console.log(arr[index]());
}

const의 경우 let과 거의 비슷하다. 다른점은 한 번 할당된 값을 변경하지 못한다는 것이다. 다른 언어에 있는 const를 생각하면 쉽게 이해가 될 것이다.

3) Class

그렇다. 당신이 지금 생각하는 그 클래스가 맞다! 

클래스의 도입에 있어서는 아직 의견이 분분하지만, 개인적으론 다른 언어를 사용했던 사람들이 좀 더 쉽게 접근할 수 있는 방법이 되지 않을까 하는 생각이 든다.

아래 예제는 간단한 고양이 클래스를 만들어 보았다.

물론 extend 키워드를 사용하여 상속도 가능하다.

class Cat {

    constructor(name){
        this.name = name;
    }

    getName(){
        return this.name;
    }
}

let cat = new Cat("momo");
console.log(cat.getName()); // momo

4) import / export

CommonJS나 AMD 명세를 따르는 프레임워크들과 같이 모듈화를 지원한다. 여러모로 객체지향에 한발 더 다가간 느낌이 든다.

// circle
export function area(r) {
    return 3.141592 * r * r
}

// app.js
import * as circle from "circle";
console.log("area = " + circle.area(2));

5) Defualt Argument

C 나 Java를 공부했던 사람들이라면 굳이 설명하지 않아도 무엇인지 이해가 될 것이다.

es6에도 해당 값이 없을 경우 자동적으로 인자를 넣어주는 문법이 추가되었다.

function multiple(input, x = 10) {
    return input * x;
}

console.log(multiple(1)); // 10

아래는 Babel로 컴파일한 결과이다.

"use strict";

function multiple(input) {
    var x = arguments.length <= 1 || arguments[1] === undefined ? 
        10 : arguments[1];

    return input * x;
}

console.log(multiple(1)); // 10

5. 마치며

전체적으로는 다른 객체지향 언어에서 사용되는 문법들이 추가 된 느낌이다. C++이라던자 JAVA를 공부 했던 사람이라면 좀 더 쉽게 접근할 수 있을 것이라 생각한다. 다른 추가된 스펙들을 찾다보면 평소에 있었으면 하는 문법들이 추가 된 것도 발견할 수  있다.

이 밖에도 promise, generator 등 개발을 쉽게 도와줄 새롭고 신박한 문법들이 추가되었다. 또 명령어를 일일이 치기 귀찮은 사람은 빌드 툴과 연동하여 컴파일 할 수도 있으니 찾아보도록 하자.