ECMAScript 2015(ES6)에 추가된 기본 문법들을 간단한 코드를 통해 알아보려 합니다. (설명이 아닌 그냥 가볍게 훑어 볼 수 있는 코드입니다.)

1. 블록 스코프

var a = 'a';
var a = 'b';
console.log(a);
// 'b'

let a = 'a';
let a = 'b';
// SyntaxError

var a = 'a';
if(true) {
  var a = 'b';
  console.log(a);
  // 'b'
}
console.log(a);
// 'b'

let a = 'a';
if(true) {
  let a = 'b';
  console.log(a);
  // 'b'
}
console.log(a);
// 'a'

let a = 'a';
a = 'b';
console.log(a);
// 'b'

const a = 'a';
a = 'b';
// TypeError

const a = { a: 'a' }
a.a = 'b';
console.log(a);
// {a: 'b'}

a = { b: 'b' };
// TypeError

2. 파라미터 기본값

const a = (a = false) => {
  console.log(a);
};
a(true);
// true;
a();
// false;

3. 펼침 연산자, 나머지 파라미터

// 펼침 연산자
let arr = [1, 2];
arr = [...arr, 3, 4, ...[5, 6]];
console.log(arr);
// [1, 2, 3, 4, 5, 6]

const sum = (a, b, c, d) => {
  return a+b+c+d;
};
sum(...arr);
// 10

// 나머지 파라미터
const arg = (a, b, ...arg) => {
  console.log(arg);
};
arg(...arr);
// [3, 4, 5, 6]

4. 해체 할당

let arr = [1, 2, 3, 4];
[a, b, c, d] = arr;
console.log(b);
// 2

[, , , d] = arr;
console.log(d);
// 4

let obj = { a: 'a', b: 'b' };
let {a, b} = obj
console.log(b);
// 'b'

5. 화살표 함수

let a = (a) => {
  console.log(a);
}
// 한줄구문의 경우 {} 를 생략할 수 있다.
let a = (a) => console.log(a);
// 아규먼트가 하나인 경우 ()를 생략할 수 있다.
let a = a => console.log(a);

화살표 함수는 구문이 짧아진 것 이외에도 일반 함수와 this가 가르키는 오브제의 규칙이 다르며, new 키워드를 사용하여 객체 생성자로 사용할 수 없습니다.

6. 객체 리터널의 프로퍼티 및 메소드 정의

let b = 'bbb';
let obj = {
  a: 'aaa',
  b
};
console.log(obj);
// {a: "aaa", b: "bbb"}

let obj = {
  ['aa' + 'bb'] : 'ccc'
};
console.log(obj);
// {aabb: "ccc"}

let obj = {
  sum(a, b) {
    return a + b;
  }
};
console.log(obj.sum(1, 2));
// 3