ES5 ES6 차이

ES란 ? ECMASCRIPT의 약어 뜻하며 자바스크립트의 표준 규격을 나타내는 용어.

뒤에 숫자는 버전을 뜻하는데 ES5(2009년) ES6(2015년) ES11(2020년)출시하였습니다.

ES5와 ES6 사이에는 시간 차이가 있는데요.(6년) 많은 기능들을 추가되었습니다.

실무에서는 ES6+(ES6 이후, 모던 자바스크립트) 이상을 요구하고 있습니다.

ES5 ES6의 차이점 & ES6 추가된 사항

1. 키워드 변경
   ES5 에서 쓰이는 var 키워드 는 함수 레벨 스코프를 갖고있으며 재할당 기능하였다. 그래서 변수의 중복 선언이 가능하고 자신도 모르게 선언했던 변수명을 또 사용할 경우 로직에 문제 생긴다
   그래서 ES6에서는 var를 권장하지 않고 let과 const를 사용한다.

2. Arrow fucntion
   자바에서 흔히 쓰이는 람다식이랑 똑같이 사용한다. 화살표 함수는 함수를 간결하게 나타낼수 있으며 가독성이 매우 올랐다. 화살표 함수는 매개변수가 하나 일때 소괄호 생략이 가능하며, retrun 또한 생략이 가능하다.

3. Template literal
   기존의 문자열 방식은 누가봐도 굉장히 불편했다.

console.log('es5' +' '+'문자열'+' '+'표시법입니다.')

console.log(`es6 문자열 표시법입니다.`)

위와같이 띄어 쓰기를 위해 빈 공백을 또 써야했고 가독성 또한 떨어졌습니다. ES6에서는 백쿼터가 도입이 되며 가독성을 높였습니다. 백쿼터를 쓰면서 띄어쓰기(\n)을 안쓰고, 변수명또한 ${변수명} 을 사용하면 + 를 안쓰고 가독성있게 문자열을 나열할수있게되었습니다.
ex)

let ES6 = 'ES6 문법'
console.log(`
안녕하세요 ${ES6} 문법입니다.
${ES6}은 가독성이 매우 좋습니다
	`)

위와같은 결과가 출력이 된다.

4. 클래스
   객체 생성 방식 중 하나이며, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍입니다.
   클래스 기반의 객체지향 프로그래밍에 익숙한 개발자들에 요청에 의해 생기지 않았나 추측합니다.
   자바스크립트에서 클래스는 문법적 설탕이라는 생각이며, 자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각합니다.
   (생성자 함수)
   단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작하게 됩니다.

5. 모듈
   모듈이란, 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화시키고, API 부분만 외부에 노출시킨 코드들입니다.
   사용법은 type에 module을 추가하고, 파일 확장자를 mjs로 변경시키는 것입니다.
   모듈은 모듈 스코프를 가지며, export, import 키워드로 사용합니다.

6. 프로미스
   비동기 통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용하였습니다. 결과론적으로, 콜백헬을 발생시켰습니다.
   이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게 되었습니다.

이번 포스팅은 ES5 ES6의 차이점과 ES6 추가된 기능을 알아보았다. 기초부터 다시 공부하는 과정이기에 공부한것을 계속 포스팅할 예정이다