자바스크립트 ES6 문법

• ECMAScript 2015(ES6)에서 새로 추가된 기능들이 많다.
• codename은 Harmony이다.

화살표 함수

const fn = (text) => {
	console.log(text + " 입니다.");
}

fn("aaa");

클래스

class Target {
	constructor (score) {
    	this.score = score;
    }
}

const t = new Target(5);
console.log(t.score);

템플릿 리터럴

const lang = "영어";

const str = `abcdefg
${lang}
hijklnmop`;

destructuring

• 객체, 배열 구조 분해 할당

const arr = [-1, 2, 3];
const obj = {a: 1, b: -2, c: -3};

const [q, w, e] = arr;
const {a, b, c} = obj;

console.log(q, w, e); // -1 2 3
console.log(a, b, c); // 1 -2 -3

• 값 바꾸기

let left = "a";
let right = "b";

[left, right] = [right, left];

console.log(left, right); // b a

Default

const fn = (a, b = -1) => {
	return a * b;
}

console.log(fn(3)); // -3
console.log(fn(3, 5)); // 15

Rest

const fn = (...nums) => {
	let answer = 0;
	for(let i = 0; i < nums.length; i++) {
    	answer += nums[i];
    }
    return answer;
}

console.log(fn(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 55
console.log(fn(1, -2)); // -1

Spread Parameters

const fn = (a, b, c) => {
	return a * b * c;
}

const arr = [-4, 2, 3];
console.log(fn(...arr)); // -24

Let, Const

let a;
a = 7;
a = -8;

const b = "fixed data";

for-in, for-of

const arr = [-1, 1, 2, -2, 3, -4];

let inArr = "";
for(let i in arr) {
	inArr += i;
}
console.log(inArr); // "012345"

let ofArr = "";
for(let i of arr) {
	ofArr += i;
}
console.log(ofArr); // "-112-23-4"

Generators

function* fn() {
	let num = 1;
  while(num < 5) {
   yield num++;
  }
}

let iter = fn();
console.log(iter.next().value); // 1
console.log(iter.next().value); // 2
console.log(iter.next().value); // 3

Promises

function fn(num) {
  return new Promise((resolve, reject) => {
    if(num > 10) {
      resolve("성공");
    } else {
      reject("실패");
    }
  });
}

fn(20)
  .then(el => console.log(el)) // 성공
  .catch(err => console.log(err));

fn(-1)
  .then(el => console.log(el))
  .catch(err => console.log(err)); // 실패

Map, Set, WeakMap, WeakSet

• Map

let map = new Map();

map.set(0, "zero");
map.set('1', "one");

map.forEach((value, key) => {
  console.log(`Key: ${key} & value: ${value}`);
});

// Key: 0 & value: zero
// Key: 1 & value: one

• Set

let set = new Set();

set.add(1);
set.add(1);
set.add(1);
set.add(1);
set.add(1);

console.log(set); // {1}

• WeakMap

const wm = new WeakMap();

const obj1 = {};
const obj2 = {'1': 1};

wm.set(obj1, "zero");
wm.set(obj2, "one");

const a = wm.get(obj1); // "zero"
console.log(a);

const b = wm.has(obj2);
console.log(b); // true

• WeakSet

const ws = new WeakSet();
const obj1 = {"a": "apple"};
const obj2 = {};

ws.add(obj1);

console.log(ws.has(obj1)); // true
console.log(ws.has(obj2)); // false

• WeakMap과 WeakSet은 다른 참조가 없으면 자동으로 가비지 컬렉터에 의해서 해제된다.

• 따라서, 캐싱에 유리하다.

• WeakMap의 key, WeakSet의 value는 객체만 가능하다.

Math, Number, String, Array, Object APIs

• Number.isNaN, Number.isInteger, Array.from, .keys, .values, Object.assign 등은 모두 ES6부터 추가된 문법이다.

🥚 async/await은 ECMA 2017에서 새로 추가되었다.

const fn = async () => {
  let wait = new Promise((resolve, reject) => {
    setTimeout(() => resolve("async, await"), 5000)
  });
  let result = await wait;
  console.log(result); 
}

fn();