JavaScript의 ES란? ES5/ES6 문법 차이
-
ES란, ECMAScript의 줄임말로 자바스크립트가 각각의 브라우저에서 문제 없이 작동할 수 있도록 정해놓은 표준 규격이다. 뒤에 숫자는 버전을 의미한다.
-
과거 버전을 알아야 하는 이유는, 레거시 코드(누군가 남기고 간 기존 코드)를 최신 문법으로 리팩토링 할 수 있어야 하고, 구글링한 코드의 동작을 해석해서 유지 보수할 수 있어야 하기 때문이다.
-
ES5, ES6 등 구분이 필요한 이유는, 버전 차이에 따른 기능 추가가 뚜렷했기 때문이다.
-
취업시장에선 ES6+(ES6 이후. 모던 자바스크립트라고 부름) 이상을 요구하고 있다.
<ES6: ES5에서 달라진 점>
1. let, const 키워드 추가
- ES6 이전 var 키워드는 함수 레벨 스코프를 가지며 암묵적 재할당이 가능했다. 단점을 보완하기 위해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가됐다. 변수의 생명주기에 영향을 끼치며, 키워드만 봐도 변수의 변화가 생기는지 안생기는지 알 수 있게 됐다.
- Arrow function 추가
- 화살표 함수가 추가되어 함수를 간결하게 나타낼 수 있게 됐다. 가독성 및 유지 보수성이 올라갔다.
- 하지만 기존의 함수와 this 바인딩이 다르다. 화살표 함수는 lexical this를 따르기 때문에 추가 공부가 필요하다. 화살표 함수에선 매개변수가 하나일 때 () 괄호 생략 가능, {} 중괄호 및 return도 생략이 가능하다.
- Default parameter 추가
- 기존에는 함수의 매개변수에 초깃값을 작성하려면 함수 내부에서 로직이 필요했으나, ES6 이후 default parameter가 추가됐다.
-
Template literal 추가
-
Multi-line string
- 백 틱을 사용하게 되면 여러 라인의 문자열도 \n 줄 바꿈과 덧셈 연산자 없이 작성 가능하다.
-
클래스 추가
-
모듈
<script type="module" src="lib.mjs"></script>
<script type="module" src="app.mjs"></script>- 모듈이란 재사용하기 위한 코드 조각을 뜻하며, 세부사항은 캡슐화시키고 API 부분만 외부에 노출시킨 코드들이다. 사용법은 type에 module을 추가하고, 파일 확장자를 mjs로 변경시키는 것이다.
- 모듈은 모듈 스코프를 가지며, export, import 키워드로 사용한다.
- 디스트럭처링 할당
- 디스트럭처링이란 비구조화, 파괴를 뜻하는 단어이며 크게 객체나 배열에서 사용해서 개별 변수에 할당하는 것이다.
- rest와 spread 문법 추가
- 프로미스
- 비동기 통신에 있어 기존에는 콜백 함수를 사용한 콜백 패턴을 사용했고, 결과적으로 콜백헬을 발생시켰다. 이를 해결하기 위해 프로미스가 도입 됐으며, 프로미스 후속처리 메소드를 통해 에러 처리를 효과적으로 할 수 있게 됐다.
- string 메소드(includes, startsWith, endsWith)
- true/false 값을 리턴하며 문자열 메소드들로 검사 로직을 수행할 수 있다.
[WIL]
- 목요일까지 알고리즘 공부를 하고, 금요일부터 새로운 조에 배정돼 리액트와 자바스크립트 기본 개념들에 대해 공부하고 있다.
- 알고리즘 공부는 꾸준히 해야겠다. 카카오 문제같은 경우 문제가 길기도 하고, 어려운 문제들을 자주 접하면서 익숙함을 유지하면 나중에 따로 시간 들여 공부하지 않아도 되고, 코드도 점점 간결해지겠징?! 일주일동안 서른개가 넘는 문제들을 풀다보니 코드가 짧아졌다는 얘기를 들을 수 있었다 ㅎ헤헤
- 유튜브가 보고싶을땐 코딩 유튜브를 보려고 여러개 구독해놨다 ㅎㅎ 호호
- 피곤해서 이번주는 이틀정도 누워만 있었는데, 시간 내서 운동 좀 해야겠다,, 디스크 생기겠삼~
