ES6(ECMAScript6)란?
ECMAScript 2015로도 잘 알려져 있는 ECMAScript 6는 ECMAScript 표준의 가장 최신 버전입니다.
ES6는 새로운 언어 기능이 포함된 주요 업데이트이며, 2009년도에 표준화된 ES5 이후로 언어 기능에 대한 첫 업데이트이기도 합니다.
ES6에서 주로 사용하는 새로운 기능은 다음과 같습니다.
- const / let
- arrow functions(화살표 함수)
- template literals(템플릿 리터럴)
- default parameters(기본 매개변수)
- array and object destructing(배열 및 객체 비구조화)
- import and export
- Promise(프로미스)
- rest parameter and spread operator(나머지 매개변수 및 확산 연산자)
- classes(클래스)
각각의 기능들을 살펴 보겠습니다.
const/let
const와 let은 ES6에서 도입된 새로운 변수선언 키워드입니다. 함수 레벨 스코프를 가지는 var와는 달리 const와 let은 블럭 레벨의 스코프를 가집니다.
var는 호이스팅 되기 때문에 변수를 선언하기 전에 사용해도 오류가 나지 않았었습니다. 하지만 const는 재선언할 수 없고 재할당도 불가능합니다. let도 비슷하게 재선언할 수 없지만 재할당은 가능합니다.
arrow functions
화살표 함수는 화살표 모양을 사용해서 function 이라는 키워드를 줄일 수 있게 되어 코드를 더욱 깔끔하고 읽기 쉽게 만들어줬습니다.
// ES5
function hello(name){
return 'hello ' + name;
}
console.log(hello('Tiger')); // 'hello Tiger'
// ES6
const hello2 = (name) => `hello ${name}`;
console.log(hello2('Cat')); // 'hello Cat'위의 예시처럼 화살표 함수가 더 읽기 쉽고 깔끔합니다. return 키워드를 따로 사양하지 않아도 됩니다.
map, filter, reduce등의 내장 함수와도 함께 사용할 수 있습니다.
template literals
ES5에서는 문자열을 연결하기 위해서 더하기 연산자를 사용해야 했지만 템플릿 리터럴을 사용한다면 더하기 연산자 없이 백틱(') 을 사용하여 문자열 내에서 변수를 사용할 수도 있습니다.
// ES5
function user(name, age){
return '안녕 ' + name + ' 너의 나이는 ' + age + '살 이다!';
}
console.log(user('고양이', 3)); // '안녕 고양이 너의 나이는 3살 이다!'
// ES6
const user2 = (name, age) => {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
console.log(user2('강아지', 1)); // '안녕 강아지, 너의 나이는 1살 이다!'default parameters
매개변수를 쓰지 않는 경우 기존 ES5에서는 undefined를 반환했었습니다. 하지만 기본 매개변수를 정해두면 매개변수를 쓰지 않더라도 기본값으로 정해둔 매개변수를 반환합니다.
const user = (name, age=1) => {
return `안녕 ${name}, 너의 나이는 ${age}살 이다!`;
}
console.log(user('강아지')); // '안녕 강아지, 너의 나이는 1살 이다!'array and object destructing
비구조화를 통해 배열 또는 객체의 값을 새 변수에 더 쉽게 할당할 수 있습니다.
const user1 = {
name: 'Tiger',
age: 3,
id: 'kingTiger',
pw: '1234'
};
// ES5 - 이전에는 각 변수에 각 값을 할당해야 했습니다.
let name = user1.name;
let age = user1.age;
let id = user1.id;
let pw = user1.pw;
// ES6
let { name, age, id, pw } = user1;배열의 경우 객체와 동일한 구문을 사용하며 중괄호를 대괄호로 바꾸면 됩니다.
import/export
작성한 자바스크립트 파일을 모듈화해서 다른 컴포넌트에서 사용이 가능합니다. 하나의 작은 컴포넌트 단위로 나눠서 여러 곳에서 재사용이 가능합니다. export를 사용하면 JavaScript 구성 요소에 사용할 모듈을 내보낼 수 있고 사용하려면 import 하면 됩니다.
Promise
비동기코드를 쓰는 방법입니다. 예를 들어 API에서 데이터를 가져오거나 실행하는데 시간이 걸리는 함수를 가지고 있을 때, 사용할 수 있습니다.
const testPromise = () => {
return new Promise((resolve, reject) => {
resolve('성공!');
});
};
cosole.log(testPromise()); // Promise {<resolved> : '성공!'}Prmoise는 두개의 매개변수를 사용하며 resolve, reject 예상 오류를 처리할 수 있습니다.
rest parameter & spread operator
rest parameter는 배열의 인수를 가져오고 새 배열을 반환하는데 사용됩니다.
spread operator는 rest parameter와 구문이 동일하지만 spread operator는 인수뿐만 아니라 배열 자체를 가집니다. for 반복문이나 다른 메서드를 사용하는 대신 spread operator를 사용하여 배열의 값을 가져올 수 있습니다.
Reference
