프론트엔드 개발자를 위한 ES6 #3

in Devlog on Es6, JavaScript


ES6 알아보기 마지막 파트.

Map/Set & WeakMap/WeakSet

Set Data-Structure

set을 기반으로한 일반적인 알고리즘의 자료구조 클리너가 지원된다.

let s = new Set()
s.add("hello").add("goodbye").add("hello")
s.size === 2
s.has("hello") === true
for (let key of s.values()) // insertion order
    console.log(key)

Map Data-Structure

map을 기반으로한 일반적인 알고리즘의 자료구조 클리너가 지원된다.

let m = new Map()
m.set("hello", 42)
m.set(s, 34)
m.get(s) === 34
m.size === 2
for (let [ key, val ] of m.entries())
    console.log(key + " = " + val)

메모리 누수에서 자유로운 오브젝트-키의 양방향 자료구조가 지원된다.

let isMarked     = new WeakSet()
let attachedData = new WeakMap()

export class Node {
    constructor (id)   { this.id = id                  }
    mark        ()     { isMarked.add(this)            }
    unmark      ()     { isMarked.delete(this)         }
    marked      ()     { return isMarked.has(this)     }
    set data    (data) { attachedData.set(this, data)  }
    get data    ()     { return attachedData.get(this) }
}

let foo = new Node("foo")

JSON.stringify(foo) === '{"id":"foo"}'
foo.mark()
foo.data = "bar"
foo.data === "bar"
JSON.stringify(foo) === '{"id":"foo"}'

isMarked.has(foo)     === true
attachedData.has(foo) === true
foo = null  /* remove only reference to foo */
attachedData.has(foo) === false
isMarked.has(foo)     === false

Typed Arrays

Typed Arrays

임의의 바이트기반의 자료구조로 네트워크 프로토콜이나, 암호화 알고리즘, 파일 포맷 조작 등등이 지원된다.

New Built-In Methods

Object Property Assignment

하나 또는 그 이상의 객체를 할당해서 나열할 수 있는 함수가 생겼다.

var dst  = { quux: 0 }
var src1 = { foo: 1, bar: 2 }
var src2 = { foo: 3, baz: 4 }
Object.assign(dst, src1, src2)
dst.quux === 0
dst.foo  === 3
dst.bar  === 2
dst.baz  === 4

Array Element Finding

배열에서 요소를 찾는 함수가 생겼다.

[ 1, 3, 4, 2 ].find(x => x > 3) // 4

String Repeating

스트링을 반복하는 함수가 생겼다.

" ".repeat(4 * depth)
"foo".repeat(3)

String Searching

스트링에서 검색할 수 있는 함수가 생겼다.

"hello".startsWith("ello", 1) // true
"hello".endsWith("hell", 4)   // true
"hello".includes("ell")       // true
"hello".includes("ell", 1)    // true
"hello".includes("ell", 2)    // false

Number Type Checking

non-number와 무한대를 검사할수 있는 함수가 생겼다.

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

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

#### Number Safety Checking

정수형 숫자가 안전한 범위안에 있는지 체크할 수 있게되었다.

 Number.isSafeInteger(42) === true
Number.isSafeInteger(9007199254740992) === false

Number Comparison

엡실론 값을 좀더 정확히 비교할 수 있게 되었다.

console.log(0.1 + 0.2 === 0.3) // false
console.log(Math.abs((0.1 + 0.2) - 0.3) < Number.EPSILON) // true

Number Truncation

버림이 구현되었다.

console.log(Math.trunc(42.7)) // 42
console.log(Math.trunc( 0.1)) // 0
console.log(Math.trunc(-0.1)) // -0

Number Sign Determination

부호를 판단 할 수 있게되었다.

console.log(Math.sign(7))   // 1
console.log(Math.sign(0))   // 0
console.log(Math.sign(-0))  // -0
console.log(Math.sign(-7))  // -1
console.log(Math.sign(NaN)) // NaN

Promises

Promise Usage

비동기로 만들어 미래에 보여지게 할 수 있다.

function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
    })
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after 300ms:${msg}`)
})

Promise Combination

하나 또는 그 이상의 프로미스를 묶어 순서에 상관없이 관리할 수 있다.

function fetchAsync (url, timeout, onData, onError) {
    …
}
let fetchPromised = (url, timeout) => {
    return new Promise((resolve, reject) => {
        fetchAsync(url, timeout, resolve, reject)
    })
}
Promise.all([
    fetchPromised("http://backend/foo.txt", 500),
    fetchPromised("http://backend/bar.txt", 500),
    fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
    let [ foo, bar, baz ] = data
    console.log(`success: foo=${foo} bar=${bar} baz=${baz}`)
}, (err) => {
    console.log(`error: ${err}`)
})

Meta-Programming

Proxying

런타임에 객체 메타작업을 할 수 있다.

let target = {
    foo: "Welcome, foo"
}
let proxy = new Proxy(target, {
    get (receiver, name) {
        return name in receiver ? receiver[name] : `Hello, ${name}`
    }
})
proxy.foo   === "Welcome, foo"
proxy.world === "Hello, world"

Reflection

객체 메타작업에 칠치하는 것을 부를 수 있게 되었다.

let obj = { a: 1 }
Object.defineProperty(obj, "b", { value: 2 })
obj[Symbol("c")] = 3
Reflect.ownKeys(obj) // [ "a", "b", Symbol(c) ]

Internationalization & Localization

Collation

문자열 집합을 정렬하고 검색할 수 있다. 대조는 로케일과 유니코드를 파라미터로 받는다.


// in German,  "ä" sorts with "a"
// in Swedish, "ä" sorts after "z"
var list = [ "ä", "a", "z" ]
var l10nDE = new Intl.Collator("de")
var l10nSV = new Intl.Collator("sv")
l10nDE.compare("ä", "z") === -1
l10nSV.compare("ä", "z") === +1
console.log(list.sort(l10nDE.compare)) // [ "a", "ä", "z" ]
console.log(list.sort(l10nSV.compare)) // [ "a", "z", "ä" ]

Number Formatting

자리수를 로컬라이즈하여 그루핑할 수 있다.

var l10nEN = new Intl.NumberFormat("en-US")
var l10nDE = new Intl.NumberFormat("de-DE")
l10nEN.format(1234567.89) === "1,234,567.89"
l10nDE.format(1234567.89) === "1.234.567,89"

Currency Formatting

숫자를 현지화해 현재 심볼을 붙일 수 있다.

var l10nUSD = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" })
var l10nGBP = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" })
var l10nEUR = new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" })
l10nUSD.format(100200300.40) === "$100,200,300.40"
l10nGBP.format(100200300.40) === "£100,200,300.40"
l10nEUR.format(100200300.40) === "100.200.300,40 €"

Date/Time Formatting

시간과 날짜를 현지화할 수 있다.

var l10nEN = new Intl.DateTimeFormat("en-US")
var l10nDE = new Intl.DateTimeFormat("de-DE")
l10nEN.format(new Date("2015-01-02")) === "1/2/2015"
l10nDE.format(new Date("2015-01-02")) === "2.1.2015"

마치며

ES6에 대해서 알아보았다. 자바스크립트는 점점더 강력해지고있으며 실용적인 기능들이 매우 많아지고, 쓰기 편해지고 있는 것을 알 수 있다.

2023년 새해에는 성장하고 함께하고 싶다면?

Pre A 단계 이상의 스타트업 C 레벨들이 모여서 커뮤니티를 만들었습니다. 같이 스터디하고 친해질 일잘러를 찾습니다.


© 2017. by isme2n

Powered by aiden