ES6 (ECMAScript 2015)

1. ES6

ECMAScript is a standard script language. 자바스크립트 언어의 표준.

http://www.ecma-international.org/ecma-262/6.0/

2. 새로 추가된 기능 (주요)

2-1. 기본 매개 변수 (Default Parameters)

let phone = function(color,brand,tax) {
  let color = color || 'brack'
  let brand = brand || 'samsung'
  let tax = tax || 0
  ...
}

기존 함수에 넘겨주는 인자값에 대한 default 처리를 위해 위와 같이 처리 했었다면 ES6에서는 아래와 같이 간단히 처리할 수 있다.

  let phone = function(color = 'black',brand = 'samsung',tax = 0) {
    ...
}

단, 주의해야 할 점이 있다. 인자값으로 0 또는 false가 입력될 때 두 예시의 결과는 다르다. ES5에서는 || 처리 시 0 또는 false 값이 입력 되어도 거짓이 되므로 기본값으로 대체된다. 하지만 ES6의 기본 매개 변수를 사용하면 undefined 를 제외한 입력된 모든 값(0, false, null 등)을 인정한다.

2-2. 템플릿 리터럴 (Template Literals)

back-ticked문자열 안에 ${ } 라는 새로운 구문을 사용해서 간단히 처리 가능하다.

let myPhone = `My phone is ${phone}.`

2-3. 멀티 라인 문자열 (Multi-line Strings)

마찬가지로 back-ticked문자열을 이용하면 간단히 처리 가능하다.

let python = `Why Django?
With Django, you can take Web applications from concept to launch in a matter of hours.
Django takes care of much of the hassle of Web development, so you can focus on writing
your app without needing to reinvent the wheel. It’s free and open source.`

2-4.비구조화 할당 (Destructuring Assignment)

• with Objects

let phone = {
  brand : 'samsung',
  color : 'black',
  model : 'note 5'
}

/*
let brand = phone.brand
let model = phone.model
*/

let {brand, model} = phone  
                           
model  // note 5

• with Array

let numbers = [1,2,3,4]

/* 
let fir = numbers[0]
let sec = numbers[1]
let thi = numbers[2] 
*/

let [fir,sec,thi] = numbers 

fir // 1

2-5. Spread Operator

Spread Operator 는 배열의 여러 요소들을 한번의 인자로 넣을 수 있게 된다. 함수에 배열의 인자들을 다 넣어야 할 때 사용하면 유용하다.

function someAdd(a,b,c) {
  // do something with a,b,c
}
let args = [1,2,4]

someAdd(...args);

2-6. Rest Parameters

Rest Parameter 는 spread operator 와 반대로 spread operator 로 받은 인자를 배열처럼 사용할 수 있게, 배열의 method도 사용할 수 있도록 바꿔준다.

let multiplybyNum = function(x, ...nums) {
  nums.forEach(function(num) {
    console.log(x * num)
  });
};

2-7. 화살표 함수 (Arrow Functions)

화살표 함수는 항상 익명 함수이며 this의 값을 현재 문맥에 바인딩 시킨다.

const squares = [1, 2, 3].map(x => x * x) // 1, 4, 9

2-8. 클래스 (Class)

class 문법도 class 표현식과 class 선언 두 가지 방법을 제공한다.

• Class 선언

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

• Class 표현식

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};

• constructor(생성자)

  • class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메소드. "constructor" 라는 이름을 가진 특수한 메소드는 클래스 안에 한 개만 존재할 수 있다.

  • 만약 클래스에 여러 개의 constructor 메소드가 존재하면 SyntaxError 가 발생. constructor는 부모 클래스의 constructor 를 호출하기 위해 super 키워드를 사용할 수 있다.

• super

  • 객체의 부모가 가지고 있는 함수들을 호출하기 위해 사용된다.

    class Cat { 
      constructor(name) {
        this.name = name;
      }
    
      speak() {
        console.log(this.name + ' makes a noise.');
      }
    }
    
    class Lion extends Cat {
      speak() {
        super.speak();
        console.log(this.name + ' roars.');
      }
    }

3. ES6 당장 사용할 수 있는 방법 (Babel)

ES6는 확정되었지만 아직 모든 브라우저에서 완전하게 지원되지 않는다. 따라서 지금 당장 ES6 사용하고 싶다면 Babel과 같은 컴파일러를 사용해야 한다. Babel은 독립 실행형 도구로 실행하거나 빌드 시스템에서 사용할 수 있다. Grunt, Gulp 및 Webpack 용 Babel 플러그인이 있다.

4. 참고문서

1. https://velog.io/@rlcjf0014/%EC%9D%B4%EB%A8%B8%EC%8B%9C%EB%B8%8C-8%EC%9D%BC%EC%B0%A8-TIL-8-1-ES6-%EC%99%80-%ED%82%A4%EC%9B%8C%EB%93%9C-uek388btlm

2. https://blog.asamaru.net/2017/08/14/top-10-es6-features/

3. http://woowabros.github.io/experience/2017/12/01/es6-experience.html

4. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes