ECMAScript2015 (ES6)

1. 개요

 1) 최신 모던 자바스크립트로 간결한 문법

 2) react, vue, angular에서 권고하는 스크립트 언어 형식

 

  ※ Babel

  (1) ES6를 모든 browser에서 사용할 수 없음 -> 구형 browser는 작동 안함

  (2) transpiling을 통해 구 버전의 browser에서 ES6 문법을 인식할 수 있게 ES5로 변환하는 compiler

 

2. var 문법 변화

 1) const: 값을 할당할 수 없음

  (1) 블록단위 변수로 범위가 제한됨

  (2) 한 번 선언한 값에 대해 변경 불가 -> 상수

  (3) 객체나 배열 내부는 변경이 가능

const a = 10;
a = 20;         // error -> 재할당 불가능

 

 2) let: 값을 재선언할 수 없음

  (1) 블록단위 변수로 범위가 제한

  (2) 한 번 선언한 값에 대해서 다시 선언할 수 없음

let b = 10;
let b = 30;   // error
b = 20;       // 20으로 재할당은 가능

 

3. ES5는 블록 단위에 상관없이 scope가 설정됨

var sum = 0;
for(var i=0; i <= 5; i++){
   sum = sum+i;
}

console.log(sum);     // 15
console.log(i);       // 6 -> i가 전역변수로 설정되어 값이 출력됨!

 1) ES5의 특징 중 하나는 hoisting

 2) 함수 선언, 변수 선언을 해석기가 가장 상단에 있는 것처럼 인식

 3) 함수 선언은 hoisting 해당하지만, 함수 표현식은 hoising은 해당 없음

 

4. arrow function

 1) function을 => (arrow)로 대체

var sum = function(a, b){
   return a + b;
}

var sum2 => (a, b){
   return a + b;
}

sum(10, 20);   // 30
sum2(10, 20);  // 30

var arr = ["a", "b", "c"];
arr.forEach(function(value){
   console.log(value);                      // a,b,c
});

var arr2 = ["a", "b", "c"];
arr.forEach(value => console.log(value));   // a,b,c

 

 2) callback function 문법의 간결화

 

 

5. 향상된 객체 리터럴

var dictionary = {
   words: 100,
   
   // ES5
   lookup: function(){
      console.log('find words: es5');
   },
   
   // ES6
   lookup2(){
      console.log('find words: es6');
   }
   
   // 위의 ES5 grammar = ES6 grammar
}

 

6. modules

 1) 호출 전까지 코드 실행 및 동작 없음

 2) javascript 모듈 로더 라이브러리 기능(common.js)을 js 언어 자체에서 지원

 3) default export: 1개의 파일에서는 1개만 import