ES란?
ECMA스크립트(ECMAScript, ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.
ECMAScript는 웹 클라이언트 스크립트로 많이 사용되고 있으며, Node.js 를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. ES6는 ECMAScript의 6번째 에디션이라고 생각하면 된다.
ES6가 중요한 이유
-
ES6 에서는 ES5 이하 버전에서 문제가 되었던 부분들이 해결되고, 많은 기능들이 추가되어 가독성과 유지보수 측면에서 큰 향상을 가져왔기 때문에 ES6는 중요하게 다뤄지고 있다.
-
하지만 구버전 웹 브라우저(주로 IE) 및 레거시 코드와의 호환성 문제가 심각하기 때문에, 대부분의 기업들이 ES6 까지를 호환성의 최대치로 보고 있으며, 이 이후의 표준으로 생긴 기능들의 도입을 신중하게 생각하고 있기 때문에 ES6 가 중요하게 다뤄지고 있다.
ES6 호환하는 방법
바벨(Babel)
바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다.
바벨은 컴파일러가 아니다?
공식 홈페이지에서는 이러한 바벨을 컴파일러라고 소개하지만, 엄밀히 말하면 컴파일러는 아니다.
왜냐하면 컴파일러는 사람이 작성한 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 프로그램을 의미하기 때문이다.
바벨은 컴파일러의 역할과는 다르게 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행한다.
이와 같은 작업을 하는 프로그램을 트랜스 파일러라고 하며 바벨은 보통 트랜스 파일러라 불린다.
ES6 주요 기능
- Class 문법 제공
- let / const
- Arrow function
- 템플릿 문자열 (`)
- 객체 리터럴
- Modules
- 구조 분해 할당
- promise
- async / await
Class
다른 언어에서 지원하는 Class 를 JS 에서도 똑같이 사용할 수 있게 되었다.
기존의 Prototype 과 Class 의 개념이 조금 다르기 때문에 ES6 부터 지원하게 되었다.
class Person {
constructor(name) {
this.name = name
}
hello() {
console.log(`Hello ${this.name} !`)
}
}
const student = new Person('krungy')
student.hello() // Hello krungy !let / const
ES6 이전 까지는 변수 선으로 var 을 사용했으나, var 는 const 와 let 으로 대체되었다.
var 변수 중복 선언이 허용되므로, 상수의 개념이 없는 문제점이 있다. 하지만 let / const 변수 중복 선언이 금지된다.
호이스팅이란?
함수 안에 있는 선언들이 해당 함수의 유효 범위 최상단으로 끌어 올려지는 것을 말합니다.
var 변수 선언 전에 참조할 수 있기 때문에 호이스팅의 대한 문제가 발생했지만 let / const 변수 선언 전에 참조할 수 없기 때문에 이는 호이스팅을 방지한다.
Array function
기존 function() 과 함께 ES6 이후 화살표 함수가 생기게 되었다.
이는 현재까지 많이 사용이 되고 있으며 화살표 함수는 코드를 더 간결하게 구현 할 수 있게 되었다.
// 일반 함수
let sum = function(a, b) {
return a + b
}
// 화살표 함수
let sum = (a, b) => a + bthis
Array function 의 등장으로 일반 함수에서의 this 가 정의되는 위치가 가져오는 문제점을 해결 할 수 있게 되었다.
- 일반 함수에서는 this 가 호출 위치에 따라 정의
- 화살표 함수에서는 this 가 자신이 선언된 함수 범위에서 정의
화살표 함수
function person() {
this.age = 25
return {
age: 50,
getAge: () => {
console.log(this.age)
}
}
}
const person = person()
person.getAge() // 25일반 함수
function person() {
this.age = 25
return {
age: 50,
getAge: function() {
return console.log(this.age)
}
}
}
const person = person()
person.getAge() // 50템플릿 문자열
백틱(`)을 이용하여 새로운 문자열을 만들 수 있으며, String 안에서 변수를 넣을 수 있게 되었으며, 내부에서 개행을 자동으로 입력 받는다.
const n1 = 1
const n2 = 2
const n3 = 3
console.log(n1 + ' + ' + n2 + ' = ' + n3)
// 1 + 2 = 3
// 템플린 문자열을 사용하면,
console.log(`${n1} + ${n2}
= ${n3}`)
// 1 + 2
= 3객체 리터럴
객체를 생성할 때 더 간결하게 생성할 수 있으며, 중복을 다루기 쉽고 동적으로 관리하기 쉬워 질 수 있는 문법을 사용 할 수 있다.
const obj = {
name: 'krungy',
age: 50,
hello: () => {
console.log(this.name)
},
// printAll: funtcion() {} 과 같음
printAll() {
console.log(this.name, this.age)
}
}Modules
모듈을 사용 할 수 있게 되면서, 재사용 가능한 코드를 캡슐화 할 수 있게 되었다. export 로 선언하고 다른 모듈에서 import 하여, 파일 단위의 모듈 스코프를 외부에서 사용할 수 있다.
import module from './module.js'
구조 분해 할당
구조가 없는 객체를 다루는 방식을 사용 할 수 있다. 아래의 예시를 살펴보자.
const arr = ['A', 'B', 'C'];
const obj = {
n1: 1,
n2: 2,
n3: 3
}
// 배열
const [one, , two, three = 'D'] = arr
console.log(one) // A
console.log(two) // C
console.log(three) // D
// Object
const { n1, ...rest } = obj
console.log(n1) // 1
console.log(rest) // { n2: 2, n3: 3 }promise, async/await
비동기 프로세스를 처리하기 위해 도입되었다. promise, async/await 이 사용 가능하게 되어 일명 콜백 지옥에서 탈출할 수 있게 되었으며 가독성 향상으로 기존 콜백의 단점을 보완할 수 있다.
기존 콜백 함수
function func1(callback) {
setTimeout(function () {
console.log('func1 init');
callback()
}, 500)
}
function func2(callback) {
setTimeout(function () {
console.log('func2 init');
callback()
}, 500)
}
function func3(callback) {
setTimeout(function () {
console.log('func3 init');
callback()
}, 500)
}
func1(function () {
func2(function () {
func3(function () {
// ...
})
})
})promise
.then(): return 은 .then() 의 매개변수로 사용된다.
resolve(): 비동기 작업에서의 처리 성공의 의미로 사용된다.
reject(): 비동기 작업에서의 처리 실패의 의미로 사용된다.
function func1() {
return new Promise(function (resolve) {
setTimeout(function () {
console.log('func1 init')
resolve()
}, 500)
})
}
function func2() {
return new Promise(function (resolve) {
setTimeout(function () {
console.log('func2 init')
resolve()
}, 500)
})
}
a().then(b)콜백 지옥을 아래처럼 대체할 수 있다.
f1()
.then(() => f2())
.then(() => f3())async/await
promise 문법으로, .then() 과 다른 방법의 비동기 프로세스 처리 방법이다. function 앞에 async 를 붙여주고, .then() 의 의미와 비슷하게 await을 사용한다. await: 프로미스가 resolve될 때까지 대기한 후, 다음 로직으로 넘어간다.
async function func() {
await f1()
await f2()
await f3()
await f4()
...
}참고
