ES6+(ECMAScript2015+)
var
헷갈릴수 있는 녀석이다.
앞으론 어지간해선 쓰지말자.
let
Block( {} ) 단위 스코프 변수
const
Block( {} ) 단위 스코프 상수
단 값 재할당은 안되지만 Object내의 값은 바꿀수 있음.
class 와 getter setter
class Product {
constructor() {
this._id = null;
}
get id() {
return this._id
}
set id(id) {
if (!!id && !isNaN(id) && !Number.isInteger(id))
throw new Error('id must integer');
this._id = id;
}
}
class newProduct extends Product {
constructor() {
super();
}
getId() {
return `Id is ${this.id}`;
}
}
Default Parameter
function print(value = "hello world"){
console.log(value);
}
Spread operator(펼침연산자)
내용을 하나씩 풀어 대입해준다.
function f(x, y, z) {
return x + y + z;
}
const args = [1, 2, 3];
f.apply(this, args);
f(...args);
const numList1 = [1,2,3];
const numList2 = [4,5,6];
const numList3 = [...numList1, ...numList2];
const user = { "name" : "gildong" };
const diffUser = { ...user, "age" : 40 };
Destructuring assignment
Object
const user = { "name" : "gildong", "age" : 40, "path" : "pangyo" };
const { name, age, path : address, company = "무직" } = user;
function sum({a, b}) {
return a + b;
}
const values = { a : 10, b : 20};
sum(values)Array
const numList = [1, 2, 3, 4, 5, 6, 7, 8];
const [first, second, ,four, ...rest] = numList;
console.log(rest);
Arrow function(화살표 함수)
lambda 표현식으로 함수를 정의할 수 있다. 아래 함수는 모두 동일한 일을 한다.
function sum(a, b) {
return a + b;
}
const sum = (a, b) => { return a + b };
const sum = (a, b) => a + b;
const double = d => d * 2;
Arrow function의 경우 함수가 정의된 시점이 this가 됨. 즉 화살표 함수를 감싸는 스코프를 this로 계승 받음.
var userName = "둘리";
let user = {
"userName" : "gildong",
func : function() {
setTimeout(function() {
console.log("func", this, this.userName);
},1000);
},
arrowFunc() {
setTimeout(() => {
console.log("arrowFunc", this, this.userName);
},1000);
}
}
user.func();
user.arrowFunc();
let user2 = {
"userName" : "gildong",
func : function() {
console.log("func", this, this.userName);
},
arrowFunc : () => {
console.log("arrowFunc", this, this.userName);
}
}
user2.func();
user2.arrowFunc();
Property value shorthand
const id = 10;
const obj = { id };
String
템플릿 문자열(backtick), backtick을 통한 multiline 제공
const message = "world";
console.log(`hello ${message}
javascript`)
Map
key, value 구조로 데이타 저장. 잘 알고 계시는
const names = new Map();
names.set("철수", 1);
names.set(2, "영희");
names.keys();
names.values();
names.size;
names.has("철수");
names.delete("철수");
WeakMap
Map은 원시 타입, 객체 참조값 모두 키로 사용할 수 있으나 WeakMap은 객체 참조값만 사용가능하다.
포인트는 내부에 저장된 객체를 참조하는 값이 없을 경우 가비지 콜렉션의 대상이 된다.
이터러블 규약을 따르지 않아 열거할 수 없고 크기를 알수 없다.
개인적으로 어디에 쓸지 잘 모르겠다.
let wm = new WeakMap();
function func(){
const someObj = {};
wm.set(someObj, 1);
wm.has(someObj);
console.log(wm);
}
func();
console.log(wm);
Set
유일한 데이타를 저장하기 위해서 사용한다.
특이한 점은 Object의 경우 참조값이 들어가게 된다.
따라서 아래 예제와 같이 {}을 넣으면 동일한 값이지만 참조값이 다르므로 추가된다.
const keySet = new Set();
keySet.add("10");
keySet.add("20");
keySet.add(20);
keySet.add({});
keySet.add({});
keySet.has(20);
keySet.delete(20);
keySet.size;
keySet.clear();
WeakSet
Set은 원시타입과 객체참조값 모두 담을수 있지만 WeakSet은 객체 참조값만 담을 수 있다.
WeakMap처럼 이터러블 규약을 따르지 않는다.
내부에 저장된 값을 참조하는 값이 없을 때는 가비지 콜렉션 대상이 된다.
Generator
절차적 처리를 위해서 사용하며 제너레이터 함수의 yield 의 수만큼 순차적으로 값을 반환한다.
function* action(url){
}
function* generator_function() {
let a = yield 12
let b = yield a + 1
let c = yield b + 2
yield c + 3
}
let generator = generator_function()
console.log(generator.next().value)
console.log(generator.next(5).value)
console.log(generator.next(11).value)
console.log(generator.next(78).value)
console.log(generator.next().done)
Promies
콜백헬 방지
작성중.....
Async await(es7)
비동기를 동기처럼 작동시킴
작성중....
