[ES6] ES6 (ES2015) 문법 여러가지

1. const, let

보통 자바스크립트를 배울 때 var로 변수를 선언하는 방법부터 배우지만 var는 이제 const와 let이 대체한다.

 

블록 스코프

ⓐ var를 사용한 경우

 

ⓑ const를 사용한 경우

 

var는 함수 스코프를 가지므로 if문의 블록과 관계없이 접근 가능하다. 하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없다. 블록의 범위는 if, while, for, function 등의 중괄호이다.

→ 함수 스코프 대신 블록 스코프를 사용함으로써 호이스팅 같은 문제도 해결되고 코드 관리도 수월해짐

 

const와 let의 차이

const는 한 번 대입하면 다른 값을 대입할 수 없다. const에 다른 값을 대입하려 하면 에러가 발생하며, 초기화 시 값을 대입하지 않으면 에러가 발생한다.

 

 

2. 템플릿 문자열

ES2015 문법에 큰 따옴표나 작은 따옴표로 감싸는 기존 문자열과는 다르게 백틱(`)으로 감싸는 새로운 문자열이 등장하였다. 이를 템플릿 문자열이라고 하고 특이한 점은 문자열 안에 변수를 넣을 수 있다는 것이다.

 

 

 

3. 객체 리터럴

객체 리터럴에 편리한 기능들이 추가되었다.

 

 

 

• sayJS 같은 객체의 메서드에 함수를 연결할 때 더는 콜론(:)과 function을 붙이지 않아도 된다.
• sayNode: sayNode처럼 속성명과 변수명이 겹치는 경우에는 한 번만 쓸 수 있다.
• 예전 문법에서는 'ES6'이라는 속성명을 만드려면 리터럴 바깥에서 [es + 6]을 했어야 했는데 ES6에서는 리터럴 내에서 선언 가능하다.

 

4. 화살표 함수

화살표 함수(arrow function)라는 새로운 함수가 추가되었으며, 기존의 function( ) { }도 그대로 사용 가능하다.

 

 

기존 function과 다른 점은 this 바인드 방식이다.

 

 

• relationship1.logFriends() 안의 forEach 문에서는 function 선언문을 사용하였다. 각자 다른 함수 스코프의 this를 가지므로 that이라는 변수를 사용해서 relationship1에 간접적으로 접근하고 있다.
• relationship2.logFriends() 안의 forEach 문에서는 화살표 함수를 사용하였다. 따라서 바깥 스코프인 logFriends()의 this를 그대로 사용할 수 있다. → 상위 스코프의 this를 그대로 물려받는 것

 

5. 비구조화 할당

객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있다.

 

 

 

•  candyMachine 객체 안의 속성을 찾아서 변수와 매칭해준다. count처럼 여러 단계 안의 속성도 찾을 수 있다.

 

배열도 비구조화할 수 있다.

 

6. 프로미스

자바스크립트와 노드에서는 주로 비동기 프로그래밍을 한다. 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용한다. ES6부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise) 기반으로 재구성된다.

 

프로미스 사용법

1. 프로미스 객체 생성

• new Promise로 프로미스를 생성할 수 있으며, 안에 resolve와 reject를 매개변수로 갖는 콜백 함수를 넣어준다.
• 프로미스 내부에서 resolve가 호출되면 then이 실행되고, reject가 호출되면 catch가 실행된다.
• resolve와 reject에 넣어준 인자는 각각 then과 catch의 매개변수에서 받을 수 있습니다. 즉, resolve('성공')가 호출되면 then의 message가 '성공'이 된다. 만약 reject('실패')가 호출되면 catch의 error가 '실패'가 되는 것이다. 

2. then이나 catch에서 다시 다른 then이나 catch를 붙일 수 있다.

 

 

• 처음 then에서 message를 resolve하면 다음 then에서 받을 수 있다. 여기서 다시 message2를 resolve 했으므로 다음 then에서 message3를 받는다.

 

3. 2번 내용을 활용하여 콜백을 프로미스로 바꿔보기

 

 

• 콜백 함수가 세 번 중첩되어 있다.
• 콜백 함수가 나올 때마다 코드의 깊이가 깊어진다.
• 각 콜백 함수마다 에러도 따로 처리해줘야 한다.

 

 

• 코드의 깊이가 더 이상 깊어지지 않는다.
• then 메서드들은 순차적으로 실행된다. 
• 콜백에서 매번 따로 처리해야 했던 에러도 마지막 catch에서 한 번에 처리할 수 있다. 

 

하지만 모든 콜백함수를 위와 같이 바꿀 수 있는 것은 아니다. 메서드가 프로미스 방식을 지원해야 한다.

(위와 같은 경우는 findOne과 save 메서드가 내부적으로 프로미스 객체를 가지고 있어서 가능한 것이다.

 

Promise.all()

기존의 콜백 패턴이었다면 콜백을 여러 번 중첩해서 사용해야 했지만, Promise.all을 이용하여 간단하게 구현할 수 있다.

 

 

• Promise.resolve는 즉시 resolve하는 프로미스를 만드는 방법이다. 비슷한 것으로 즉시 reject하는 Promise.reject도 있다.
• 프로미스가 여러 개 있을 때 Promise.all에 넣으면 모두 resolve될 때까지 기다렸다가 then으로 넘어간다.
• result 매개변수에 각각의 프로미스 결괏값이 배열로 들어있다.
• Promise 중 하나라도 reject가 되면 catch로 넘어간다.

 

7. async/await

노드 7.6 버전부터 지원되는 기능이다. 자바스크립트 스펙은 ES2017이다. (굉장히 혁신적이고 최신 기능) 특히 노드처럼 비동기 프로그래밍을 해야할 때 도움이 많이 된다. 위의 코드를 async/await을 사용하여 더 깔끔하게 만들 수 있다.

 

 

 

• 함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙여주었다. 
• 함수는 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어간다. 예를 들면, await Users.findOne({})이 resolve될 때까지 기다린 뒤, user 변수를 초기화하는 것이다.

 

 

• try/catch 문으로 로직을 감싸서 catch로 에러를 처리한다.

 

 

• 화살표 함수도 async과 함께 사용 가능하다.

 

for문과 async/await을 같이 써서 Promise.all을 대체할 수도 있다.

 

 

(출처 : Node.js 교과서)