Sign in Subscribe
4 min read

javascript ES6 정리

해당 글은 http://es6-features.org/#ExpressionBodies 에서 제가 자주사용하는것들을 정리한거입니다.

Arrow 

odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

기존은 위와 같이 function을 정의 해야하지만 이제는 C#의 람다와 비슷하게 다음과 같이 정의할수 있습니다. 

odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

덕분에 foreach나 reduce함수를 다음과 같이 선언할수 있게 되었습니다.

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

Extended Parameter Handling

function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1) === 50

다른언어에서는 매우 매우 정상이여야할 default인자가 들어갔으며 Spread Operator이라는 문법이 추가되어 가변인자를 손쉽게 받을수 있게 되었습니다.

var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]

function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, ...params) === 9

확인해본결과 해당 하나하나 꺼내야하는 C언어와 달리 …a는 배열형태로 들어가며 손쉽게 로직처리를 할수있습니다.

Template Literals 

var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

이제 위와 같이 짜증나는 + “” 연산을 아래처럼 피할수 있게 되었습니다.

var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},want to buy ${card.amount} ${card.product} for a total of ${card.amount * card.unitprice} bucks?`

중요할점은 ‘,” 이 아닌 `이라는 점입니다.

Extended Literals

바이러니를 손쉽게 표현할수 있게 되었습니다. C++11에 들어온 c++ 11 binary literal과 매우 유사합니다.

c++11 : https://en.cppreference.com/w/cpp/language/integer_literal )

0b111110111 === 503
0o767 === 503

또한 유니코드 literal도 지원을 합니다. 딱히 필요성은 안보이네요

"𠮷".length === 2
"𠮷".match(/./u)[0].length === 2
"𠮷" === "\uD842\uDFB7"
"𠮷" === "\u{20BB7}"
"𠮷".codePointAt(0) == 0x20BB7
for (let codepoint of "𠮷") console.log(codepoint)

Enhanced Object Properties

JS의 가장 중요한 타입인 Object입니다. json으로 return을 하게될때 키와 값이 중복이 되는경우가 많았습니다.

var x = 0, y = 0;
obj = { x: x, y: y };

이코드가 아래처럼 정리할수 있습니다.

var x = 0, y = 0
obj = { x, y }

또한 Object에 매서드를 다음과 같이 정의할수 있게 되었습니다.

obj = {
    foo (a, b) {
        …
    },
    bar (x, y) {
        …
    },
    *quux (x, y) {
        …
    }
}

전에는 아래처럼 키를 두고 값을 따로 설정하여 정의 하였다고 합니다. 

obj = {
    foo: function (a, b) {
        …
    },
    bar: function (x, y) {
        …
    },
    //  quux: no equivalent in ES5
    …
};

Destructuring Assignment

제가 자주 쓰는 문법중 하나인데 변수하나하나의 이름을 두게되면 다음과 같은 코드가 만들어 지게 됩니다.

let FirstName = "asd";
let LastName = "sadas"

이게 많은경우 변수마다 그룹을 지어주거나 let을 그만 쓰고싶을때가 있었습니다. 이제는 다음과 같이 처리가 가능합니다.

var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

Generators

동작은 C#의 yield랑 동일합니다.

function* range (start, end, step) {
    while (start < end) {
        yield start
        start += step
    }
}

for (let i of range(0, 10, 2)) {
    console.log(i) // 0, 2, 4, 6, 8
}

손쉽게 반환해야할 객체를 만들수 있습니다.

Typed Arrays

드디어 빌어먹을 노드에 Primary Type이 생겼습니다. 하지만 이는 네트워크때 주로 쓰일거같습니다. 전에는 이런게 없어 네트워크의 데이터를 파싱해야할 경우 C++의 코어를 대신써서 처리한듯합니다. 이제 ES6오게되면서 순수 노드로 처리가 가능하다는 말이됩니다.

// create an ArrayBuffer with a size in bytes
var buffer = new ArrayBuffer(8);

console.log(buffer.byteLength);
// expected output: 8
Uint8Array

New Built-In Methods

이제 그지같은 IsNaN을 구현할 필요가 없게 되었지만.. 그래도 구립니다.

Number.isNaN(42) === false
Number.isNaN(NaN) === true

Number.isFinite(Infinity) === false
Number.isFinite(-Infinity) === false
Number.isFinite(NaN) === false
Number.isFinite(123) === true

좋아졌다구 한들 아래처럼 개막장인 경우가 많아 타입에 대해 한번 인터프린터로 확인후에 로직을 만드는 습관이 생겼습니다.

Published by:

rinechran