프론트엔드/JavaScript

[JavaScript] 클린 코드 - 8. 동시성 (Concurrency)

반응형

1. Callback 대신 Promise를 사용한다.

  • Callback은 깔끔하지 않고 많은 괄호 중첩을 만든다.
// BAD - 중괄호 중첩
require('request').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin', (requestErr, response) => {
  if (requestErr) {
    console.error(requestErr);
  } else {
    require('fs').writeFile('article.html', response.body, (writeErr) => {
      if (writeErr) {
        console.error(writeErr);
      } else {
        console.log('File written');
      }
    });
  }
});

// GOOD - 직관적이고 깔끔하다.
require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
  .then((response) => {
    return require('fs-promise').writeFile('article.html', response);
  })
  .then(() => {
    console.log('File written');
  })
  .catch((err) => {
    console.error(err);
  });

 

2. Async/Await은 Promise보다 깔끔하다.

  • Promise도 깔끔하지만 ES2017/ES8의 async, await가 더 깔끔하다.
  • 함수 앞에 async를 붙이기만 하면 된다.
  • .then을 통한 함수의 논리적 연결이 필요 없게 된다.
// BAD
require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin')
  .then(response => {
    return require('fs-promise').writeFile('article.html', response);
  })
  .then(() => {
    console.log('File written');
  })
  .catch(err => {
    console.error(err);
  })

// GOOD
async function getCleanCodeArticle() {
  try {
    const response = await require('request-promise').get('https://en.wikipedia.org/wiki/Robert_Cecil_Martin');
    await require('fs-promise').writeFile('article.html', response);
    console.log('File written');
  } catch(err) {
    console.error(err);
  }
}

 

JS의 빠른 변화 속도를 보여주는 챕터라고 생각한다.

promise의 간편함을 느낀게 얼마 전이었는데

그보다 편한 async, await 문법이 있었고, 이를 알아갈 생각에 설렌다.

반응형