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);
}