ES5와 ES6의 차이

ES란?

ECMAScript를 줄여서 부르는 말로 기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈인 크로스 브라우징 이슈를 해결하기 위해 Javascript를 표준화한 것이다.

 

ES5와 ES6의 차이

1. 변수

ES5에는 변수선언을 var 밖에 존재하지 않았다. 

var는 재선언과 재할당이 자유롭다.

 

ES6부터 let, const가 추가 되었다.

 

let은 재선언은 불가하지만 재 할당은 가능하다.

const는 재선언도 불가하고 재할당도 불가하다.

 

2. 화살표 함수

ES6부터 새롭게 등장한 화상표 함수로 함수 표현이 좀 더 간단해졌다.

 

함수선언식

화살표 함수

화살표함수의 파라미터가 1개일때 소괄호를 생략할 수 있으며 중괄호와 리턴을 생략 가능하다.

 

 

3. 템플릿 리터럴

ES6부터 새롭게 등장한 템플릿 리터럴 덕분에 문자열 표현이 훨씬 간단해졌다.

템플릿 리터럴이란 작은 따옴표나 큰 따옴표 대신 백틱(``)으로 문자열을 감싸 표현하는 기능을 말한다.

템플릿 리터럴을 사용하면 ${...}을 사용해 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.

 

ES5

ES6

 

4.디폴트 파라미터

디폴트 파라미터는 함수에서 인자로 디폴트 값을 설정할 수 있다. 함수를 호출하는데 매개 변수가 존재하지 않더라도 함수가 디폴트 값으로 매개변수를 초기화하는 기능이다.

• 기본형태

• 함수를 기본 디폴트 값으로 설정

 

5. 모듈

ES5이전에는 각 기능별로 JS파일을 나누고 개발 및 관리하는 것이 불가능했다.

 

ES5

require를 통해 모듈화를 할 수 있었다.

require를 통해 파일 자체를 사용할 수 있었다.

 

ES6

impotr / export로 모듈을 관리할 수 있다.

모듈은 실현가능한 특정 프로그램의 그룹이다.

그리고 이것은 다른 파일의 변수, 함수를 참조한다.

 

6. 클래스

ES5에선 class라는 키워드는 없었지만 프로토타입을 통해 실현 가능했다.

ES6에서는 class 키워드를 사용해서 선언할 수 있다.

 

 

 

 

---

참고 

https://doozi0316.tistory.com/entry/JavaScript-ECMAScript%EB%9E%80-ES5%EC%99%80-ES6%EC%9D%98-%EC%B0%A8%EC%9D%B4var-const-let-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98-class

[JavaScript] ECMAScript란? ES5와 ES6의 차이