ES란 ECMAScript의 약자로, 자바스크립트의 표준 규격을 나타낸다. 2009년에 ES5, 그리고 2015년에 ES6가 출시되면서 많은 변화를 가져왔다.
변수 선언 방식
ES5에서는 Function scope를 따르는 var를 사용하여 변수를 선언했었는데, ES6에서는 Block scope를 따르는 let과 const라는 변수선언방식이 생겼다.
var는 함수호이스팅이 되고, 외부에서도 변수에 접근이 가능하므로 예상지 못한 값을 얻을 수 있다.
그러나, 이를 보완하여 let과 const는 block안에서만 참조 및 사용이 가능하다. let은 일반 변수 생성시 사용되며, const는 상수용 변수로 사용된다.
let과 const를 사용하여 보다 예측 가능한 코드를 작성할 수 있다.
화살표 함수
화살표 함수를 사용하면 코드가 더욱 간결해져 코드의 가독성이 좋아진다.
1
2
3
4
5
function age(num){
return num+"살 입니다";
}
console.log(age(10)); //10살 입니다
위 함수를 화살표 함수를 사용하면 다음과 같이 작성할 수 있다.
1
const age = (num) => {return num+"살 입니다"};
함수의 body에 return만 있는 경우 화살표함수는 return 과 {}를 생략할 수 있다.
1
const age = (num) => num+"살 입니다";
템플릿 문자열
원래는 문자열 사용시 큰따옴표나 작은따옴표만 사용할 수 있었다.
그러나 변수와 함께 문자열을 출력할 때 +를 사용해야해서 불편한 점이 있었는데,
ES6에서는 백틱(``)을 사용하여 한줄에 변수와 문자열을 작성할 수 있게 되었다.
문자열은 그대로입력하고, 변수는 ${}사이에 입력하면 된다.
1
2
const num = 20;
const str = `안녕하세요 저는 ${num}살 입니다.`
위 코드의 결과는 다음과 같다. 안녕하세요 저는 20살 입니다.
객체의 변화
ES5에서는 객체 내부함수에서 function이라는 키워드를 항상 작성했어야 했지만, ES6에서는 일반 메서드처럼 age()와 같이 사용할 수 있다.
또한 변수명과 object의 key가 같다면 변수명만 적어주어도 변수명으로 key:value가 생성된다.
class
자바스크립트는 프로토타입 기반의 객체 지향 언어라서 class가 존재하지 않았다.
그래서 함수와 객체를 이용하여 class처럼 사용하였으나, ES6에서 class가 도입되었다.
자바스크립트에서 클래스는 내부적으로 프로토타입을 이용해 만들어졌다.
구조분해 할당
구조분해 할당이란 객체나 배열의 값을 해체하고, 개별 값을 변수에 새로 할당하는 과정을 말한다.
ES5까지의 객체는 기존의 객체에서 값을 꺼내 변수를 만들어서 그 안에 담아 사용하였으나, ES6에서는 따로 변수를 생성하지 않아도 구조분해 할당이 가능하다.
1
2
3
4
5
6
const arr =[1,2,3];
const [one,two,three] = arr;
one //1
import & export
import와 export를 쉽게 코드를 재사용할 수 있다.
export를 사용하여 다른 javascript코드에서 사용할 모듈을 내보낼 수 있고, 그 모듈을 사용하기 위해 import를 사용하면 된다.
Promise
기존에 자바스크립트에서 비동기 처리를 하기 위해 콜백 함수를 사용하였으나, 콜백헬이 발생하여 이를 해결하기 위해 Promise가 도입되었다.
프로미스의 후처리 메소드를 사용하여 에러처리또한 가능하다.
…연산자
…연산자는 2가지 방식으로 쓰일 수 있는데 하나는 rest parameter이고, 하나는 spread operator이다.
rest parameter는 배열의 인수를 가져오고 새 배열을 반환할 때 사용된다.
1
2
const arr = [1 ,2,3,4,4];
const [num1,num2,...rest]=arr;
spread operator는 인수뿐만 아니라 배열자체를 가진다. for반복문이나 다른 메서드를 사용하지 않아도 배열값을 가져올 수 있다.
1
2
3
4
5
6
7
const arr = [1,2,3,4,5,6];
const Func=(...numArr) =>{
return numArr;
}
console.log(Func(arr));//[1,2,3,4,5,6]
그 외 ES6 변경사항을 확인하려면 다음 사이트에서 확인하면 된다. Javascript ES6