자바스크립트 ES5와 ES6 차이

ES란? 

• ECAMSCRIPT의 약자로 자바스크립트의 표준 규격을 나타내는 용어
• ES5 (2009년) ES6(2015년)출시 
• 매년 업데이트 되고 있지만 ES5와 ES6의 차이가 크기 때문에 많이 비교됨

요즘 많은 회사들이 ES6을 쓰고 있는데 왜 ES5까지 알아야 할까? 

기존에 작성된 코드를 이해하기 위해

---

ES5와 ES6 차이

1. let, const 추가

함수레벨 스코프를 사용하고 재할당이 재선언이 가능한 var 와 달리

let과 const는 블록레벨 스코프를 가지며, 

let은 재할당 가능, 재선언 불가

const는 재할당/재선언 불가하여 상수에만 쓰임 

 

2. 화살표함수 추가

화살표 함수(Arrow function)가 추가되어 함수를 간결하게 나타낼 수 있고 가독성 및 유지보수성이 올라감

단, 기존의 함수와 this 바인딩이 다르기 때문에 적절히 사용

 

3. 클래스 추가

ES5까지는 프로토타입을 기반으로 클래스를 대신했지만

ES6부터 클래스가 도입됨

클래스 : 객체를 생성하는 함수 (=생성자 함수)

 

4. 템플릿 리터럴

작은따옴표나 큰 따옴표 대신 백틱(`)으로 문자열을 감싸 표현하는 기능

const name = "놀먹"
cosnt age = "20"

console.log(`내 이름은 ${name}이고, 나이는 ${age}살이야. ${`잘 부탁해`}`)

// 내 이름은 놀먹이고, 나이는 20야. 잘 부탁해

 5. 모듈사용

모듈이란 재사용하기 위한 코드 조각으로 세부사항을 캡슐화시키고 API부분만 외부에 노출시킨 코드들

모듈은 모듈 스코프를 가지며 export, import 키워드로 사용 가능

 

6. Default parameter

기존 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6이후 default parameter가 추가됨

 

7. Destrucuring

비구조화 할당. 객체나 배열의 요소를 해체하여 개별 변수를 할당하는 것

let arr = ["one", "two", "three"];
let [one, two, three] = arr;
console.log(one, two, three);
// one two three

let [one,two,three] = ["one", "two", "three"];
console.log(one,two,three)
// one two three

 

8. Promise

기존의 콜백지옥을 해결하기 위해 도입

프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 됨

 

9. Multi-line Strings

백틱(`)을 이용하여 여러 줄의 문자열을 쉽게 처리