ES : ECMAScript 의 약어로 JS의 표준 규격을 나타내는 용어이다. 뒤에 붙는 숫자는 버전을 뜻한다. ES5 는 2009년, ES6는 2015년 발표되었다.
취업시장에서는 ES6+ 를 요구한다.
ECMAScript 란
JavaScript가 넷스케이프 커뮤니케이션즈로부터 개발된 이후, MS에서 JScript를 개발하였다.
두 언어는 서로 호환되지 않는 부분이 있어 크로스 브라우징 이슈(모든 브라우저에서 기능이 동일하게 동작하지 않는 것)가 발생하였다.
이 크로스 브라우징 이슈를 해결하기 위해 JS를 표준화 할 필요가 있었고, 그것이 ECMAScript이다.
둘의 차이점
- 템플릿 리터럴
- 화살표 함수
- this
- 변수 선언
- 모듈
- 클래스
템플릿 리터럴
따옴표로 표현하던 문자열을 (백틱)으로 감싸 표현하는 기능이다. 이것 덕분에 문자열 표현이 간편해졌다. 템플릿 리터럴을 사용하면 플레이스 홀더${name}`를 사용하여 백틱 내부에 문자열과 함께 표현식을 넣을 수 있다.
아래는 비교
//ES5
let name = 'sehyun';
console.log("my name is" + name);
//ES6
let name = 'sehyun';
console.log(`my name is ${name}.`);multi-line string
원래는 \n을 사용해서 줄바꿈을 해야했지만 백틱을 사용해서 줄바꿈에 신경쓸 필요가 없어졌다.
const i = `안녕하세요.
인하대학교 학생입니다.`;
//줄바꿈을 하기위해 특별히 해줘야할 처리가 없다 그냥 엔터뿐!destructuring 할당
비구조화, 파괴를 뜻하는 단어이다. 객체나 배열에서 사용해 개별 변수에 할당하는 것을 말한다.
//array 디스트럭쳐링
const arr = [1, 2, 3];
const [one, two, three] = arr;
//object 디스트럭쳐링
const obj = { firstName: 'park' , lastName: 'sehyun' };
const {lastName, firstName} = obj;우항에 있는 자료구조를 파괴하여 좌항에 있는 변수들에 각각 할당하는 것인데, 위 예제에서 배열은 순서를 중요하게 여기게 되고, 객체는 키 값을 중요하게 여겨 순서를 바꾸어도 동일하게 동작한다. (이때 키 값이 아닌 밸류만 추출함)
화살표 함수
함수 선언법이 간단해졌다. 가독성이 올라갔다.
화살표 함수에서는 매개변수가 하나일 때는 () 괄호를 생략할 수 있고, 한줄로 표현 가능하면 {} 및 return 도 생략할 수 있다.
//ES5
function sum (a, b) {
return a+b;
}
//ES6
const sum = (a, b) => a + b;
const sum = (name, age) => {
console.log(`my name is ${name} and im ${age}`);
}변수 선언
ES5에서는 var밖에 없었다. var는 변수 선언시 사용되는 키워드로, 재할당과 재선언에 자유도가 매우 높다. 다만 호이스팅 문제가 있다.
ES6에서는 let, const 가 추가되었다. let은 한번 선언된 변수가 있으면 동일한 이름으로 재선언 할 수 없다. 하지만 값은, 재할당 할 수 있다.
let x = 1;
s = 2;
console.log(x); //2
let x = 3; //재선언이므로 에러const 는 한번 초기화된 변수에 재할당, 재선언 둘 다 할 수 없다. 그리고 let, const 는 블록 스코프 변수이다. 영역 밖에서는 참조할 수 없다.
모듈
ES5는 생략
ES6에서는 import/export 로 모듈을 관리할 수 있다. 모듈이란 실현 가능한 특정 프로그램의 그룹으로 다른 파일의 변수, 함수를 참조한다. 여러 모듈을 사용할 때는 사용하고 싶은 곳에 export를 붙이고, import할 때는 { } 안에 넣어서 사용하면 된다. 만약 모든 모듈을 전달받기 위해서는
import * as 'object name' from '파일경로';형식으로 사용하면 된다.
