async / await

async / await
노드 7.6 버전부터 지원되는 기능입니다.
자바스크립트 스펙은 ES2017 입니다.
최신 기능이면서 정말 혁신적인 기능입니다.
특히 노드처럼 비동기 프로그래밍을 해야 할 때 도움이 많이 됩니다.
프로미스가 콜백 지옥을 해결했다지만, 여전히 코드가 장황합니다.
async / await 문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄여줍니다.

2.1.6 절의 프로미스 코드를 다시 한 번 보겠습니다.
                    
                        function findAndSaveUser(Users) {
                            Users.findOne({})
                                .then((user) => {
                                    user.name = 'zero';
                                    return user.save();
                                })
                                .then((user) => {
                                    return Users.findOne({ gender: 'm' })
                                })
                                .then((user) => {
                                    // 생략
                                })
                                .catch(err => {
                                    console.error(err);
                                })
                        }
                    
                
콜백과 다르게 코드의 깊이가 깊진 않지만, 코드 길이는 여전히 깁니다.
async / await 문법을 사용하면 다음과 같이 바꿀 수 있습니다.
async function 이라는 것이 추가되었습니다.
                    
                        async function findAndSaveUser(Users) {
                            let user = await Users.findOne({});
                            user.name = 'zero';
                            user = await user.save();
                            user = await Users.findOne({ gender: 'm' });
                            // 생략
                        }
                    
                
놀라울 정도로 코드가 짧아졌습니다.
함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await을 붙여주었습니다.
이제 함수는 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어갑니다.
예를 들면 await Users.findOne({})이 resolve될 때까지 기다린 뒤, user 변수를 초기화하는 것입니다.

위 코드는 에러를 처리하는 부분이 없으므로 다음과 같은 추가 작업이 필요합니다.
                    
                        async function findAndSaveUser(Users) {
                            try {
                                let user = await Users.findOne({});
                                user.name = 'zero';
                                user = await user.save();
                                user = await Users.findOne({ gender: 'm' });
                                // 생략
                            } catch (error) {
                                console.error(error);
                            }
                        }
                    
                
try/catch 문으로 로직을 감쌌습니다.
프로미스의 catch 메서드처럼 try/catch문의 catch가 에러를 처리합니다.

화살표 함수도 async와 같이 사용할 수 있습니다.
                    
                        const findAndSaveUser = async (Users) => {
                            try {
                                let user = await Users.findOne({});
                                user.name = 'zero';
                                user = await user.save();
                                user = await Users.findOne({ gender: 'm' });
                                // 생략
                            } catch (error) {
                                console.error(error);
                            }
                        };
                    
                
for문과 async/await을 같이 써서 Promise.all을 대체할 수도 있습니다.
이것은 노드 10 버전부터 지원하는 ES2018 문법입니다.
                    
                        const promise1 = Promise.resolve('성공1');
                        const promise2 = Promise.resolve('성공2');
                        (async () => {
                            for await (promise of [promise1, promise2]) {
                                console.log(promise);
                            }
                        })();
                    
                
Promise.all 대신 for await of 문을 사용하여 프로미스를 반복하는 모습입니다.

앞으로 중첩되는 콜백 함수가 있다면 프로미스를 거쳐 async / await 문법으로 바꾸는 연습을 해보기 바랍니다.
코드가 훨씬 간결해질 것입니다.
이 책의 예제는 async / await 문법을 적극적으로 사용하므로 익숙해지는 것이 중요합니다.

이외에도 많은 문법이 추가되었습니다.
하지만 이 책에서는 위에서 설명한 내용 정도만 자주 사용합니다.
다른 변경 사항이 궁금한 분들을 위해 이 장 끝부분에 새로운 문법을 배울 수 있는 사이트의 링크를 적어놓았습니다.

이제 프론트엔드에서 사용되는 자바스크립트 코드를 알아보겠습니다.