Javascript 2015, ECMAScript6, ES6

• 프로리액트 React.js를 이용한 모던 프론트엔드 구축 ISBN 979-11-5839-042-6 부록B
• ES6 문법 정리

자바스크립트 2015는 ECMAScript6 또는 ES6이라고도 하며, 자바스크립트 언어의 새로운 버전이다. ES6에는 클래스, 모듈, 새로운 변수 선언 키워드와 프로미스를 비롯해 복잡한 애플리케이션을 작성하기 위한 새로운 구문이 많이 추가됐다. 또한 화살표 함수, 템플릿 문자열, 분해와 같이 코드의 표현력을 높이기 위한 새로운 도우미와 편의 문법^{syntactic sugar}기능도 추가 됐다.

• 클래스
• 모듈
• let과 const
• 프로미스
• 화살표 함수
• 템플릿 문자열
• 구조분해 할당

클래스 Class

자바스크립트 클래스는 ES6에 추가됐으며 자바스크립트의 기존 프로토타입 기반 상속에 기반을 두는 편의 문법이다. 클래스 구문이 자바스크립트에 새로운 객체 지향 상속을 추가하는 것은 아니지만 훨신 간다하고 알아보기 쉬운 자바스크립트 클래스 구문으로 객체를 생성하고 상속을 처리할 수 있다.

클래스는 프로토타입 기반 상속, 상위 호출, 인스턴스와 정적 메서드, 생성자를 지원한다.

    class Point {
        constructor( x, y ) {
            this.x = x;
            this.y = y;
        }

        toString() {
            return `(${this.x}), ${this.y})`;
        }
    }

    class Pixel extends Point {
        constructor( x, y, color ) {
            super( x, y );
            this.color = color;
        }
    }

    toString() {
        return super.toString() + ' in ' + this.color;
    }

    const p = new Pixel( 25, 8, 'green' );
    p.toString();   // (25, 8) in green

모듈 Module

ES6 모듈은 자바스크립트 코드를 포함하는 파일이다. 특수한 모듈 키워드는 따로 없으며 export 키워드가 추가되지만 일반적인 스크립트와 동일하다.

익스포트 Export

모듈 안에서 선언한 항목을 공용으로 선언하고 다른 모듈에서 사용할 수 있게 하려면 export를 이용해 해당 항목을 익스포트해야 한다.
최상위 함수 클래스, var, let, const를 익스포트할 수 있다.

    function generateRandom(){
        return Math.random();
    }

    function sum( a, b ) {
        return a + b;
    }

    export { generateRandom, sum };

임포트 Import

import 문은 외부 모듈, 다른 스크립트 등에서 익스포트한 함수, 객체, 기본형을 임포트하는 데 사용된다.

    import { generateRandom, sum } from 'utility';

    console.log( generateRandom() );    // 임의의 수를 로깅한다.
    console.log( sum(1, 2) );   // 3

기본 익스포트

기본 익스포트를 사용해 모듈에서 단일 값을 익스포트할 수 있다.

    var utils = {
        generateRandom: function() {
            return Math.random();
        },
        sum: function( a, b ) {
            return a + b;
        }
    };

    export default utils;

임포트 할 때는 기본 익스포트의 이름을 지정하면 된다.

         import utils from 'utility';
         console.log( utils.generateRandom() ); // 임의의 수를 로깅한다.
         console.log( utils.sum(1,2 ) );    // 3
     

let과 const

var 선언은 다음 예제 코드에서 볼 수 있듯이 함수 내에서 로컬 스코프만 갖는 잠재적 위험을 안고 있다.

        function foo() {
            var myVar = "10";
        }

        foo();
        console.log( myVar );   // 변수가 함수 스코프로 undefined 에러
    

다른 블록 구조 안에서 선언한 변수는 전역 스코르를 갖는다.

        if( true ) {
            var myVar = "10";
        }

        console.log( myVar );   // "10" 출력: myVar 변수는 "if"는 전역 스코프에 속한다.
    

let

let은 개선된 var라고 생각할 수 있다.

    if( true ) {
        let myVar = "10";
    }

    console.log( myVar );   // undefined 오류, myVar 는 "if" 스코프에 속한다.

const

단일 값 할당을 위한 선언으로서 값에 대한 읽기 전용 참조를 만든다. 포함된 값이 변경불가가 되는 것은 아니며 변수 식별자를 다시 할당할 수 없다는 의미다.

    const MY_FAV = 7;   // 상수 7 정의
    MY_FAV = 10;    // "상수에 값 할당" 오류

프로미스 Promise

프로미스는 비동기 프로그래밍을 위한 라이브러이 미래에 사용 가능할 수 있는 값에 대한 일급 표현.

    function timeout( duration = 0 ){
        return new Promise( (resolve, reject) => {
            setTimeout( resolve, duration );
        });
    }

    var p = timeout( 1000 ).then( () => {
        return timeout( 2000 );
    }).then( () => {
        throw new Error("Errrrrr....");
    }).catch( err => {
        return Promise.all( [timeout(100), timeout(200)] );
    });

화살표 함수 Arrow Function

함수 단축 표기법으로 구문을 간결하게 표현하고 부모 스코프와 렉시컬^lexical this를 공유하는 두 가지 용도가 있다.

간결한 구문 Simple Syntax

    // 예
    setInterval( () => console.log("TEST"), 1000 );

    // 1행 (암시적 반환)
    let square = ( num ) => num * num;
    console.log( sqare(5) );    // 25

    // 여러행
    nums.forEach( v => {
        if( v % 5 === 0 ) {
            fives.push( v );
        }
    });

    // 여러행 (암시적 반환)
    let numbers = ['one', 'two', 'three', 'four', 'five', 'six', 'seve'];
    numbers.map( (num) =>(
        num + ' is Number!\n';
    ));

렉시컬 바인딩 Lexical Binding

화살표 함수는 this값을 선언된 위치에서 부모 스코프와 렉시컬 바인딩(정적 바인딩)한다.

    var bb = {
        _name : 'BB',
        _friends: [],
        echoFriends(){
            this._friends.forEach( f => 
                console.log( this._name + ' see ' + f )
            );
        }
    };

템플릿 문자열 Template String

백틱(`)을 이용해 기존 문자열의 한계를 근본적으로 해결한 기능

    // 문법
    var greeting = `Hi World`;

    // 문자열 대체
    var like = "I Like";
    console.log( `${like} You` );   // I Like You

    // 다중행 문자열
    console.log( `1행 문자열
        2행 문자열` );

구조분해 할당 Destruction Asset

    // 배열 할당
    var a, b, rest;
    [a, b] = [1, 2];

    console.log( a ); // 1
    console.log( b ); // 2

    // 객체 할당
    var tmpA = { name: "AAA" };
    var tmpB = { name: "BBB" };

    var { name: nameA } = tmpA;
    var { name: nameB } = tmpB;

    console.log( nameA );   // AAA
    console.log( nameB );   // BBB

    // 매개변수에서 사용
    function g( {name: x} ) {
        cosole.log( x );
    }

    g( {name: 5} ); // 5
    g( 5 ); // undefined