[JS] ES6 (ES2015) 의 특징들

ES6 (ES2015) 의 특징들

화살표 함수(Arrow Function)

=> 로 사용할 수 있으며 함수와 달리 this가 함수 스코프에 바인딩 되지 않고 렉시컬 스코프를 가진다. 즉, 자신을 감싸는 코드와 동일한 this를 공유한다. 또한 표현식과 문에서도 사용할 수 있다.

// 표현식 (expression)
var odds = evens.map(v => v + 1);
var nums = evens.map((v , i ) => v + i );
var pairs = evens.map(v => ({even: v, odd: v + 1}));

//문 (Statement)
nums.forEach(v => {
    if(v % 5 === 0 )
        fives.push(v);
});

// 렉시컬 this
var bob = {
    _name: "Bob",
    _friends: [],
    printFriends() {
        this._friends.forEach(f => 
        console.log(this._name + " knows " + f));
    }
}

클래스(Classes)

프로토타입 기반의 객체지향 패턴을 쉽게 만든 장치로, 상속과 생성자 및 인스턴스와 정적 메서드 등을 지원한다

class SkinnedMesh extends THREE.Mesh {
    constructor(geometry, meterials) {
        super(geometry, materials);

        this.idMatrix = SkinnedMesh.defaultMatrix();
        this.bones = [];
        this.boneMatrices = [];
        // ...
    }
    update(camera) {
        // ...
        super.update();
    }
    get boneCount() {
        return this.bones.length;
    }
    set matrixType(matrixType) {
        this.idMatrix = SkinnedMesh[matrixType]();
    }
    static defaultMatrix() {
        return new THREE.Matrix4();
    }
}

템플릿 문자열(Template String)

복잡한 문자열을 쉽게 만들어주는 장치로 문자열 안에 문자열 및 변수를 넣을 수 있고 여러줄의 문자열을 넣을 수 있다

// 문자열 안에 문자열 사용하기
`In JavaScript '\n' is a line-feed.`

// 여러 줄 문자열
`In JavaScript this is not legal.`

// 문자열 보간(interpolation)
var name = "Bob" , time = "today";
`Hello ${name}, how are you ${time}?`

비구조화 (Destructuring)

배열과 객체의 패턴 매칭을 통해서 바인딩을 하는 기법이다.

// 배열 매칭
var [a, , b] = [1,2,3];

// 객체 매칭
var { op: a, lhs: {op: b}, rhs : c} = getASTNode()

// 객체 매칭을 단축해서 사용
// op, lhs, rhs가 스코프 내에서 바인딩됨
var {op, lhs, rhs} = getASTNode()

// 매개변수 위치에도 사용 가능
function g({name: x}) {
    console.log(x);
}
g({name: 5})

//Fail.soft 비구조화 (Fail-soft는 고장이 나도 작동하도록 짠 프로그램을 말한다)
var [a] = [];
a === undefined;

// 기본 값이 있는 Fail-soft 비구조화
var [a = 1] = [];
a === 1;

기본값 + Rest + Spread

기본 값은 주어지는 값이 없을 때 초기화시키는 값이고 rest 문법은 명시한 변수 외의 나머지를 배열로 가져오는 것이다. Spread 문법은 배열을 반대로 펼치는 역할이다.

function f(x, y=12) {
    return x + y;
}
f(3) == 15

function f1(x, ...y){
    // y는 배열
    return x * y.length;
}
f1(3, "hello", true) == 6

function f2(x, y, z) {
    return x + y + z;
}
// 각 배열의 원소를 인자로 넘긴다.
f2(...[1,2,3]) == 6

Let + Const

블록 스코프를 갖고 재선언이 불가능하며 선언 이전에 사용할 수 없다.

function f() {
    { 
        let x;
        {
            // 블록 스코프를 갖기 때문에 허용!
            const x = "sneaky";
            // const는 재할당 불가, 에러!
            x = "foo";
        }
        let x = "inner";
    }
}

출처 : https://github.com/baeharam/Must-Know-About-Frontend/