JavaScript & Node.js
[Javascript] ES6와 ES5의 차이
Haksae
2022. 1. 23. 23:17
ECMA는 지금까지 총 10개의 판이 출판되었다. 그리고 계속해서 발전하고 개선되고 있기 때문에, 자바스크립트는 최신 문법을 잘 습득해놓는 것이 중요하다고 할 수 있다.
그러나 최신 문법만 습득하는 것으로 끝나면 안된다. 과거 버전들의 문법들을 확인하고 무엇이 바뀌었는가를 알고 있는가도 중요하다. 이는 자바스크립트에 대한 깊은 이해에 도움이 되며, 더불어 레거시 코드(누군가 작성한 기존 코드)의 동작을 해석하여 유지보수하고, 더 나아가 최신문법으로 리팩토링 할 수 있는 실력이 된다.
*본 글에서는 가장 많은 변화가 있었던 ES6와 ES5의 문법적 차이를 간략하게 정리할까한다.
[ES6, ES2015]
ES6가 가장 최근 버전이 아님에도 불구하고, 많은 사람들에게 ES6는 여전히 회자된다. 아마도 ES6가 이전 버전에 비해 많은 부분 개선과 기능을 추가했기 때문으로 생각된다. 이를 대변하듯 ES6는 ES2015 혹은 ES6 Harmony라는 이름으로도 불리고, ES6 이후를 모던 자바스크립트라고 부르고 있다.
그렇다면 ES6와 ES5의 차이점은 무엇일까? 간략하게 나열하면 다음과 같다.
1.let,const keyword
2.Arrow function
3.for/of
4.Class
5.Promise
6.Symbol
7.Default parameter
8.function rest parameter
9.String.inclues()/.startsWith()/.endsWith()
10.Array.from()/.keys()/.find()/.findIndex()
11.New Math Methods
12.New Number Properties, Methods
13.New Global Methods
14.Iterable Object.entries
15.Javascript Module
많은 문법적 변화가 있었기 때문에 본 글에서는 간단하게 변화만 짚고 넘어가겠다.
1) Let, Const keyword
- 기존의 var 키워드에 비해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가됨
- 변수에 생명주기에 영향을 끼리며, 키워드만 보아도 변수의 변화가 생기는지 안 생기는지 알 수 있게됨
- 호이스팅에 있어서도 변화가 생겼음
2) Arrow Function
- 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있음
- 가독성 및 유지 보수성이 올라갔다고 판단, 단 기존의 함수와 this 바인딩이 다르다.
- 화살표 함수에서 매개변수가 하나일 때 () 괄호 생략 가능, {} 소괄호 및 return도 생략 가능
3) Default parameter
- 기존에 매개변수에 초기값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6이후 default parameter가 추가됨
4) Template literal 추가
- ES6 이전 문자열 관리가 불편했음. Template literal 이 도입되어 간편해짐
- 사용법은 ` ${ } `
5) Multi-line string
- 문자열이 라인을 넘어가게 되면 관리가 불편했음, ``을 사용하면 여러 라인의 문자열도 쉽게 사용 가능
6) Class
- 객체 생성 방식 중 하나, 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍
- 클래스 기반의 객체지향 프로그래밍에 익숙한 개발자들에 요청에 의해 생기지 않았나 추측
- 자바스크립트에서 클래스는 문법적 설탕이라는 생각, 자바스크립트에서 클래스는 객체를 생성하는 함수라고 생각
- 단, 생성자 함수와 동일하게 동작하지 않으며, 클래스가 엄격하며 호이스팅이 발생하지 않는 것처럼 동작하는 let, const 키워드처럼 동작함
7) Module
- 모듈이란 재사용하기 위한 코드 조각을 의미, 세부사항을 캡슐화 시키고 API 부분만 외부에 노출시킨 코드들
- 모듈은 모듈 스코프를 가지며, export, import 키워드로 사용
8) Destructuring
- 디스트럭쳐링이란 비구조화, 파괴를 뜻하는 단어로, 크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것
9) Promise
- 비동기통신에 있어 기존에는 콜백함수를 사용한 콜백 패턴을 사용
- 결과론적으로 콜백 헬을 발생
- 이를 해결하기 위해 프로미스가 도입되었고, 프로미스 후속처리 메서드를 통해 에러 처리를 효과적으로 할 수 있게됨
10) String Method(includes, startsWith, endWith)
- 문자열 메서드가 추가됨
- 해당 메서드는 true/false로 리턴, 검사 로직 수행 가능
참고
https://hbsowo58.tistory.com/407
https://ssungkang.tistory.com/entry/ES6-Loop-%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-forEach-for-of?category=366274