[Question] ES6란?
ES6
JavaScript와 JScript의 호환성 불가로 크로스 브라우징 이슈(기능이 모든 브라우저에서 동일하게 동작하지 않는 이슈)가 발생하였다. 이를 해결하기 위해 JavaScript의 표준을 세웠고, 이것이 ECMAScript이다. ECMAScript의 약자가 ES5나 ES6이고, ES5는 2009년, ES6는 2015년에 발표하였다. 아래는 ES5 대비 ES6의 장점이다.
1. 템플릿 리터럴
백틱(`)으로 문자열을 감싸서 표현한다. 플레이스 홀더(${variable})를 사용하여 백틱 안에 문자열과 함께 표현식을 넣는 것이 가능해졌다.
var firstName = "성주";
var lastName = "이";
console.log(`제 성은 {lastName}이고, 이름은 {firstName}입니다.`)
2. 화살표 함수
함수 선언법을 단순화시켰다.
var printing = (firstName, lastName) => {
console.log({lastName}{firstName});
};
3. this
ES5에서는 내부 함수의 this는 해당 객체가 아닌 window 객체 또는 global 객체(nodejs)와 binding 되고, 이를 해결하기 위해 여러 방법이 존재한다. 그러나 ES6에서는 this가 객체 본인을 가리키기 때문에, 바인딩을 따로 처리해줄 필요가 없다.
4. 변수 선언
변수를 선언할 때 var 이외에 let과 const가 추가되었다.
| 재할당 | 재선언 | 외부에서 내부 참조 | |
|---|---|---|---|
| var | O | O | O only block scope not function scope |
| let | O | X | X |
| const | X | X | X |
5. 모듈
import와 export로 모듈을 관리한다.
import '{f1, f2, ...}' from 'file_path'
export default 'module'
6. 클래스
ES5에서는 class가 없고 prototype으로 이를 실현하였으나, ES6에서는 class를 사용해서 선언할 수 있다. class의 상속과 overriding에는 super를 사용한다.
7. Promise
single thread인 javascript에서 asynchronous 처리를 위해서 callback을 사용해왔다. 그러나, asynchronous 처리의 많은 중첩으로 인하여 에러 및 예외처리가 어려워지고 중첩으로 인한 복잡도가 증가하였다. 이러한 단점을 해결하기 위해 ES6가 promise를 지원하게 되었다.
promise: 비동기에서 성공과 실패를 분리해서 method를 수행한다.
// promise 생성
const prm = function(param) {
return new Promise(function(resolve, reject) {
// promise 안에서 비동기 함수 실행
if (param) {
resolve("성공");
}
else {
reject("실패");
}
});
}
// promise 실행
prm(true).then(function(result) {
console.log(result);
}, function(err) {
console.log(err);
});
// asynchronous method가 promise 객체를 return하면, 계속해서 then catch 하는 식으로 chaining이 가능하다.
asyncThing1()
.then(function() {return asyncThing2();})
.then(function() {return asyncThing3();})
.catch(function(err) {return asyncRecovery1();})
.then(fuction() {return asyncThing4();}, function(err) {return asyncRecovery2();})
.catch(function(err) {console.log("Don't worry about it");})
.then(function() {console.log("All done!");});
const param = true;
const prm1 = new Promise(function(resolve, reject) {
if (param) {
resolve("성공1");
}
else {
reject("실패1");
}
});
const prm2 = new Promise(function(resolve, reject) {
if (param) {
resolve("성공2");
}
else {
reject("실패2");
}
});
// 모든 promise가 완료되면 수행하고, promise의 값들을 보여준다.
Promise.all([promise1, promise2]).then(function(values) {
console.log("모두완료", values);
});
댓글남기기