ES6의 특징

ES6의 특징

Javascript ES6의 대표적인 10가지 특징

1. Block-Scoped Constructs Let and Const
2. Default Parameters
3. Template Literals
4. Muti-line Strings
5. Destructing Assignment
6. Enhanced Object Literals
7. Arrow Functions
8. Promises
9. Classes
10. Modules

1) Block-Scoped Constructs Let and Const

• var => function scope, 호이스팅, 재선언 가능, 재할당 가능

• let => block scope, 재선언 불가, 재할당 가능

• const => block scope, 재선언 불가, 재할당 불가 (상수), 반드시 선언과 동시에 값 할당

let, const 도 실제로 호이스팅이 되지만, var와 다르게 호이스팅 후 선언, 초기화가 동시에 이루어지지 않기 때문에 ReferenceError가 발생한다.

2) Default Parameters

함수의 파라미터 정의 부분에 default 값을 선언할 수 있다.

const foo = (a, b = 1) => {
  return a + b;
}
foo(5) // 5 + 1 = 6

3) Template Literals

Javascript 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 문법
‘', “" 대신 백틱(``) 을 사용한다.
변수를 표현할 때는 ${변수} 로 표현한다.

const name = 'JS';
'My Name is' + name + '.' // 백틱을 사용하지 않은 문자열 연결
`My name is ${name}.` // My Name is JS. 

4) Muti-line Strings

Template Literals를 이용하여 문자열에 개행을 할 수 있다.

const foo = 'Cannot use
	     Multi line' // Syntax Error (X)
const bar = `Can use
	     Multi line` // (O)

5) Destructing Assignment

배열이나 객체의 속성을 분해하여 그 값을 개별 변수에 담을 수 있게 하는 Javscript 표현식

const array = [1, 2, 3, 4, 5];
const [a, b] = array; 
// const a = 1;
// const b = 2; 와 동일
const object = {foo: 3, bar: 4};
const {foo, bar} = object;
// const foo = 3;
// const bar = 4; 와 동일

**예제**
// 이름과 성을 요소로 가진 배열
let arr = ["Bora", "Lee"]
// 구조 분해 할당을 이용해
// firstName엔 arr[0]을
// surname엔 arr[1]을 할당하였습니다.
let [firstName, surname] = arr;
alert(firstName); // Bora
alert(surname);  // Lee

(1) 쉼표를 사용하여 요소 무시하기

쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다.

// 두 번째 요소는 필요하지 않음
let [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert( title ); // Consul

(2) 할당 연산자 우측엔 모든 이터러블이 올 수 있습니다.

배열뿐만 아니라 모든 이터러블(iterable, 반복 가능한 객체)에 구조 분해 할당을 적용할 수 있습니다.

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

(3) 할당 연산자 좌측엔 뭐든지 올 수 있습니다.

할당 연산자 좌측엔 ‘할당할 수 있는(assignables)’ 것이라면 어떤 것이든 올 수 있습니다.

아래와 같이 객체 프로퍼티도 가능합니다.

let user = {};
[user.name, user.surname] = "Bora Lee".split(' ');
alert(user.name); // Bora

(4) '…'로 나머지 요소 가져오기

배열 앞쪽에 위치한 값 몇 개만 필요하고 그 이후 이어지는 나머지 값들은 한데 모아서 저장하고 싶을 때가 있습니다. 이럴 때는 점 세 개 ...를 붙인 매개변수 하나를 추가하면 ‘나머지(rest)’ 요소를 가져올 수 있습니다.

let [name1, name2, ...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
alert(name1); // Julius
alert(name2); // Caesar
// `rest`는 배열입니다.
alert(rest[0]); // Consul
alert(rest[1]); // of the Roman Republic
alert(rest.length); // 2

(5) 중첩 구조 분해

객체나 배열이 다른 객체나 배열을 포함하는 경우, 좀 더 복잡한 패턴을 사용하면 중첩 배열이나 객체의 정보를 추출할 수 있습니다. 이를 중첩 구조 분해(nested destructuring)라고 부릅니다.

아래 예시에서 객체 options의 size 프로퍼티 값은 또 다른 객체입니다. items 프로퍼티는 배열을 값으로 가지고 있습니다. 대입 연산자 좌측의 패턴은 정보를 추출하려는 객체 options와 같은 구조를 갖추고 있습니다.

let options = {
  size: {
    width: 100,
    height: 200
  },
  items: ["Cake", "Donut"],
  extra: true
};
// 코드를 여러 줄에 걸쳐 작성해 의도하는 바를 명확히 드러냄
let {
  size: { // size는 여기,
    width,
    height
  },
  items: [item1, item2], // items는 여기에 할당함
  title = "Menu" // 분해하려는 객체에 title 프로퍼티가 없으므로 기본값을 사용함
} = options;
alert(title);  // Menu
alert(width);  // 100
alert(height); // 200
alert(item1);  // Cake
alert(item2);  // Donut

6) Enhanced Object Literals

ES6 이전 객체 정의 방식을 개선한 문법

const key = 'value';
const myObject = {key}; // myObject = {key: 'value'}
const prop = 'foo';
const newObejct = {
  [prop]: 'hey', // 문자열을 key값으로 사용할 수 있다.
  ['b' + 'ar']: 'there'} // newObject = {foo: 'hey', bar: 'there'}

7) Arrow Functions

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구
문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지
않습니다. 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에
가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.
-MDN

// 매개변수가 없는 경우
var foo = () => {console.log('foo')};
foo(); // 'foo'
// 매개변수가 하나인 경우
var foo = x => {console.log(x)};
foo('bar'); // bar
// 매개변수가 여러개인 경우
var foo = (a, b) => a + b // {}를 사용하지 않으면 return문을 사용하지 않아도 값이 return 된다.
foo(1, 2); // 3
var foo = (a, b) => {return a + b}
foo(1, 2) // 3
var foo = (a, b) => {a + b}
foo(1, 2) // undefined (return이 없으므로)

8) Promises

Javascript 비동기 처리에 사용되는 객체.
Promise 이전의 비동기 처리는 Callback 함수를 설정하는 방식으로 이루어졌다.
따라서, 비동기 처리를 연속적으로 하는경우 Callback 지옥이 발생된다.

const getData = () => {
  return new Promise((resolve, reject) => {
    $.get('url주소', function(response) {
      if (response) {
        resolve(response); // 요청에 대한 응답이 제대로 돌아오면 resolve를 호출
      }
      reject(new Error("Request is failed")); // 응답이 없으면 reject를 호출
    });
  });
}
getData().then((data) => { // 비동기 처리가 끝나면
  console.log(data) // response를 출력
}).catch((err) => {
  console.log(err) // err를 출력
})

Promise의 상태

• Pending (대기) : Promise 생성 시
• Fullfilled (이행) : resolve 실행 시
• Rejected (실패) : reject 실행 시

9) Classes

ES6부터 Javascript도 class와 class 상속을 지원한다.
(ES6 이전에는 class 대신 생성자를 사용했다.)

// ES6 이전
function Person(name, age) {
    this.name = name;
    this.age = age;
}
// 프로토타입 메소드
Person.prototype.introduce = function() {
  return '안녕하세요. 제 이름은' + this.name + '이고, 나이는' + this.age + '입니다.';
}
var person = new Person('홍길동', 25);
console.log(person.introduce()); // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다.
// ES6
class Person {
  constructor({name, age}) { // Destructing Assignment(구조분해할당)
    this.name = name;
    this.age = age;
  }  
  // 메소드
  introduce() {
    return `안녕하세요. 제 이름은 ${this.name} 이고, 나이는 ${this.age} 입니다.`;
  }
}
const person = new Person({ name: '홍길동', age: 25 });
console.log(person.introduce()) // 안녕하세요. 제 이름은 홍길동 이고, 나이는 25 입니다.

10) Modules

Javascript의 중요한 새 기능, 또는 새 기능들의 통칭
import, export를 이용해 내보내거나 불러올 수 있다.

// my-module
// export는 import 할 때 {} 로 감싸주어야 한다.
export const member = () => { // export는 해당 모듈에서 여러개 존재 가능
  return 'use Module';
}
// export default는 import 할 때 {} 로 감싸주지 않아도 된다.
const name = (name) => `My name is ${name}.`;
export default name; // export default는 해당 모듈에서 하나만 존재
import name from "my-module";
import * as name from "my-module"; // my-module의 모든 기능을 name으로 alias
import { member } from "my-module"; // my-module의 member 라는 기능만 사용
import { member as myMember } from "my-module" // my-module의 member 기능을 myMember 라는 이름으로 사용