ES6 - namgunghyeon/wiki GitHub Wiki

Class

Class๋Š” ์‚ฌ์‹ค ํ•จ์ˆ˜. ํ•จ์ˆ˜ ์„ ์–ธ๊ณผ ํด๋ž˜์Šค ์„ ์–ธ์˜ ์ค‘์š”ํ•œ ์ฐจ์ด์ ์€ ํ•จ์ˆ˜ ์„ ์–ธ์˜ ๊ฒฝ์šฐ ํ˜ธ์ด์ŠคํŒ…์ด ์ผ์–ด๋‚˜์ง€๋งŒ, ํด๋ž˜์Šค ์„ ์„ ์€ ๊ทธ๋ ‡์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ ๋‹ค๋ฅธ ์–ธ์–ด์— ์žˆ๋Š” class ํ˜•ํƒœ์™€ ๊ฐ™์•„ ์ดํ•ดํ•˜๋Š”๋ฐ ์–ด๋ ต์šด ์—†์–ด ๋ณด์ธ๋‹ค.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions

class Polygon {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    get area() {
        return this.calcArea();
    }

    calcArea() {
        return this.height * this.width;
    }
}

var polygon = new Polygon(1, 2);
console.log('area : ', polygon.area);
console.log('area : ', polygon.calcArea);
console.log('area : ', polygon.calcArea());

Static methods

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    static distance(a, b) {
        const dx = a.x - b.y;
        const dy = a.y - b.y;

        return Math.sqrt(dx * dx + dy * dy);
    }
}
var aPoint = new Point(1, 2);
var bPoint = new Point(2, 1);
console.log('distance : ', Point.distance(aPoint, bPoint));

Extends

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' make a nose');
    }
}

class Dog extends Animal {
    speak() {
        console.log(this.name + ' barks.');
    }
}

var dog = new Dog('choco');
dog.speak();

Supper

class Cat {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + ' make a nose');
    }
}

class Lion extends Cat {
    speak() {
        super.speak();
        console.log(this.name + ' roars.');
    }
}
var lion = new Lion('king');
lion.speak()

Species

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/species

class MyArray extends Array {
    static get [Symbol.species]() {
        return Array;
    }
}

var array = new MyArray(1,2,3);
var mapped = array.map(x => {
    return x * x
});
console.log(mapped)
console.log(mapped instanceof MyArray); // false
console.log(mapped instanceof Array);   // true

Arrow Function Expression

(ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ํ‘œํ˜„) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98 ์ž์‹ ์˜ this, arguments, super ๋˜๋Š” new.target์„ ๋ฐ”์ธ๋”ฉ ํ•˜์ง€ ์•Š๋Š”๋‹ค var that = this์„ ํ•˜์ง€ ์•Š์•„๋„ ๋œ๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ํ•ญ์ƒ ์ต๋ช…์ด๋‹ค.

(param1, param2, โ€ฆ, paramN) => { statements }
(param1, param2, โ€ฆ, paramN) => expression
// ๋‹ค์Œ๊ณผ ๋™์ผํ•จ:  => { return expression; }

// ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ํ•˜๋‚˜๋ฟ์ธ ๊ฒฝ์šฐ ๊ด„ํ˜ธ๋Š” ์„ ํƒ์‚ฌํ•ญ:
(singleParam) => { statements }
singleParam => { statements }

// ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ์—†๋Š” ํ•จ์ˆ˜๋Š” ๊ด„ํ˜ธ๊ฐ€ ํ•„์š”:
() => { statements }
var a = [
  "Hydrogen",
  "Helium",
  "Lithium",
  "Berylยญlium"
];

var a2 = a.map(function(s) {
    return s.length;
});
var a3 = a.map(s => s.length);
console.log(a2);
console.log(a3);

function Person() {
    this.age = 0;
    setInterval(function growUp() {
        //setInterval ์œ„์— ์„ ์–ธ๋œ this์™€ ์•„๋ž˜ ์„ ์–ธ๋œ this๋Š” ์„œ๋กœ ๋‹ค๋ฅธ this
        this.age++;
   }, 1000);
}

function Person2() {
    var that = this;
    this.age = 0;
    setInterval(function growUp() {
        that.age++;
   }, 1000);
}

function Person3(){
  this.age = 0;
  setInterval(() => {
      //setInterval ์œ„์— ์„ ์–ธ๋œ this์™€ ์•„๋ž˜ ์„ ์–ธ๋œ this๋Š” ๊ฐ™์€ this
      this.age++;
  }, 1000);
}
 var func = () => ({ foo: 1 });

let

ํ˜„์žฌ scope์—์„œ๋งŒ ์œ ํšจํ•œ let ๋ณ€์ˆ˜

function varTest() {
   var x = 1;
   if (true) {
       var x = 2;  // ๊ฐ™์€ ๋ณ€์ˆ˜
       console.log(x);
   }
   console.log(x);
}

function letTest() {
   let x = 1;
   if (true) {
       let x = 2;  // ๋‹ค๋ฅธ ๋ณ€์ˆ˜
       console.log(x);
   }
   console.log(x);
}
console.log('varTest')
varTest()
console.log('letTest')
letTest()

Const

Read Only refrence to a value

const MY_FAV = 7;

MY_FAV = 20;
console.log('MY_FAV', MY_FAV);

const MY_FAV = 20; //Error

let MY_FAV = 20; //Error

console.log('MY_FAV', MY_FAV);

export

ํŒŒ์ผ ๋˜๋Š” ํ•จ์ˆ˜์—์„œ ์™ธ๋ถ€๋กœ ๋…ธ์ถœํ•  ๋•Œ ์‚ฌ์šฉ ์•„์ง ์–ด๋Š๊ณณ์—์„œ ๊ตฌํ˜„๋˜์–ด ์žˆ์ง€ ์•Š์•„ Babel๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.

export { name1, name2, โ€ฆ, nameN };
export { variable1 as name1, variable2 as name2, โ€ฆ, nameN };
export let name1, name2, โ€ฆ, nameN; // ๋˜๋Š” var
export let name1 = โ€ฆ, name2 = โ€ฆ, โ€ฆ, nameN; // ๋˜๋Š” var, const

export default expression;
export default function (โ€ฆ) { โ€ฆ } // ๋˜๋Š” class, function*
export default function name1(โ€ฆ) { โ€ฆ } // ๋˜๋Š” class, function*
export { name1 as default, โ€ฆ };

export * from โ€ฆ;
export { name1, name2, โ€ฆ, nameN } from โ€ฆ;
export { import1 as name1, import2 as name2, โ€ฆ, nameN } from โ€ฆ;

//module "my_module.js"
export function cube(x) {
    return x * x * x;
}

const foo = Math.PI + Math.SQRT2;
export { foo }


//moduel demo.js
import { cube, foo} from 'my_module.js';

console.log(cube(3))
console.log(foo);

import

export๋กœ ๋…ธ์ถœํ•˜๋ฉด import๋กœ ๋‹ค๋ฅธ ๊ณณ์—์„œ ์‚ฌ์šฉ import๋„ ์•„์ง ์–ด๋Š๊ณณ์—์„œ ๊ตฌํ˜„๋˜์–ด ์žˆ์ง€ ์•Š์•„ Babel๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•œ๋‹ค.(Phyton import ์™€ ๊ฐ™์€ ๋Š๋‚Œ)

import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";

import * as myModule from "my-module.js";
๋ชจ๋“ˆ ์ „์ฒด๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค. ๊ทธ๋ฆฌ๊ณ  myModule์ด๋ฆ„์œผ๋กœ ๋ฐ”์ธ๋”ฉ๋˜์–ด ์‚ฌ์šฉํ•œ๋‹ค.

import {myMember} from "my-module.js";
๋ชจ๋“ˆ ๋‚ด์—์„œ myMember ํ•˜๋‚˜๋งŒ ๊ฐ€์ ธ์˜จ๋‹ค.

import {foo, bar} from "my-module.js";
๋ชจ๋“ˆ ๋‚ด์—์„œ foo, bar๋ฅผ ๊ฐ€์ ธ์˜จ๋‹ค.

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";
reallyReallyLongModuleMemberName๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ shortName์œผ๋กœ ๋ณ„๋ช…์„ ์ง€์–ด ์‚ฌ์šฉํ•œ๋‹ค. (mysql AS์™€ ๊ฐ™์€ ๋Š๋‚Œ)

function*

ํ•จ์ˆ˜ ๋์— *๊ฐ€ ๋ถ™์„ ๊ฒฝ์šฐ Generator ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator yield ๋งŒํผ next๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.


function* name([param[, param[, ... param]]]) {
   statements
}

function* idMaker() {
    var index = 0;
    while (index < 3) {
        yield index ++;
    }
}

var gen = idMaker()

console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);
//0
//1
//2
//undefined

function* anotherGenerator(i) {
    yield i + 1;
    yield i + 2;
    yield i + 3;
    console.log(i)
}

function* generator(i) {
    yield i;
    yield* anotherGenerator(i);
    yield i + 10;
}

var gen = generator(10);
console.log(gen.next().value);
//generator ์•„๋ž˜ yield
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);
//์œ„ 3๊ฐœ๋Š” anotherGenerator์— ์žˆ๋Š” yield
console.log(gen.next().value);
//๋งˆ์ง€๋ง‰ yield
console.log(gen.next().value);


function* logGenerator() {
    console.log(yield);
    console.log(yield);
    console.log(yield);
}

var gen = logGenerator();

gen.next();
gen.next('pretzel');
gen.next('california');
gen.next('mayonnaise');

for ... of

(Array, Map, Set, String, TypedArray, arguments)

"use strict";
let iterable = [10, 20, 30];

for (let value of iterable) {
   console.log(value);
}

for (const value of iterable) {
   console.log(value);
}

iterable = "boo";
for (let value of iterable) {
   console.log(value);
}

iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
   console.log(value);
}

iterable = new Map(["a", 1], ["b", 2], ["c", 3](/namgunghyeon/wiki/wiki/"a",-1],-["b",-2],-["c",-3));

for (let entry of iterable) {
   console.log(entry);
}

iterable = new Set([1, 1, 2, 2, 3, 3]);
//์ค‘๋ณต ์—†๋Š” ๋ฐ์ดํ„ฐ ์…‹
for (let value of iterable) {
 console.log(value);
}

ES6 ECMAScript 6 โ€” New Features: Overview & Comparison

http://es6-features.org