ES5 VS ES6

ES6

1. ECMAScript 2015와 동일한 언어
2. 리액트, 뷰, 앵귤러에서 권고하는 언어형식
3. ES5에 비해 문법이 간결해 져서 코딩하기 수월함

Babel

- ES6 문법을 각 브라우저의 호환에 맞게 ES5로 변환하는 컴파일러(구버전에서 작동하지 않으므로 transpiling이 필요)

https://babeljs.io/

 

const&let - 새로운 변수 선언방식

 

- 블록단위 {}로 변수의 범위가 제한되어있음(스코프 단위)
- const : 한번 선언한 값에 대해서 변경할 수 없음(상수개념) - 재할당하지 않을 경우 사용

    //const를 쓰면 재선언할 수 없어 디버깅할 때 충돌을 줄일 수 있음
- let : 한번 선언한 값에 대해서 함수 본문 또는 블록단위에서 다시 선언 할 수 없음

    //반복문은 계속 값이 바뀌므로 let을 씀

 

 

#ES5와 ES6의 차이점

 

ES5특징 - 변수의 scope(변수의 유효범위)

- {}에 상관없이 스코프(범위)가 설정됨
- hoisting : 함수의 선언문과 변수가 가장 상단에 있는것으로 인식함(코드라인 순서와 관계없이) - 표현식은 해당안됌

  //기존에 변수를 아래에 쓰고 함수선언문을 맨아래에 쓴 후  상단에서 함수를 호출해도 호출할수 있었음 

  // 이런현상이 자바스크립트 해석기가 상단에 있는것으로 인식해서 오류없이 호출할수 있었음

1. 함수 선언식과 변수 선언을 호이스팅
2. 변수 대입 및 할당
3. ES5문법은 오류가 없음

 

*함수 선언문

function 함수명() {
    //function statement
}

 

*함수 표현식

var 변수명 = function() {
    //function expression
}

 

ES6 특징

 

- {} 단위로 변수의 범위가 제한됨(예: for문에 let으로 설정했을경우 {} 밖에서 호출 할 수 없음)
- const 변수로 지정한 값은 변경이 불가능하나 객체나 배열의 내부는 변경 할 수 있음

*객체

const a = {};

a.num = 10; //{num : 10}

*배열

const a = [];

a.push(30); //[30]

 

화살표함수 = arrow Function

- 함수를 정의할때 function키워드를 => 로 대체
- 콜백함수의 문법 간결화

 

var sum = function(){ // es5 }

var sum = () => { // es6 }

function이 () 뒤에 => 로 변경됨

* 화살표 함수 내에서 this는 상위 스코프의 this로 바인딩 된다
* addEventListener을 사용할 경우는 화살표 함수 보다는 일반함수를 사용한다. (이때 일반 함수의 this는 currentTarget)

https://joshua1988.github.io/vue-camp/es6+/fat-arrow.html#%E1%84%80%E1%85%B5%E1%84%8C%E1%85%A9%E1%86%AB%E1%84%8B%E1%85%B4-%E1%84%92%E1%85%A1%E1%86%B7%E1%84%89%E1%85%AE-%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8B%E1%85%B4-%E1%84%87%E1%85%A1%E1%86%BC%E1%84%89%E1%85%B5%E1%86%A8 

- 향상된 객체 리터럴

객체의 속성의 메서드로 사용할 때 function 예약어를 생략하고 생성가능

lookup: function(){} = es5

lookup(){} = es6

객체의 속성명과 값 명이 동일할 때 축약가능(대표적인 예시로 컴포넌트)

var a = 10; var dic = { // a: a, = 속성과 값이 같음 a, }

- Modules(자바스크립트 모듈화 방법) : 파일별로 scope를 만듬

자바스크립트 모듈 로더 라이브러리 (AMD, Common Js) 기능을 js 언어 자체에서 지원
호출(import)되기 전까진 코드 실행과 동작을 하지 않는 특징이 있음

1. import
2. export - default를 쓰는 이유는 한 파일에서 1개만 export 할 수 있다는 의미