2022/10/04 - TIL

자바스크립트에서 많이 사용하는 안티 패턴

안티패턴이란?

실제 많이 사용되는 패턴이지만 비효율적이거나 비생산적인 패턴

1. 자바스크립트 루프

[1,2,3].map(i => console.log(`Logged to console ${i} times`))
// log
Logged to console 1 times
Logged to console 2 times
Logged to console 3 times

map은 원래 위와 같은 용도로 사용하는 것이 아니라

const myArray = [1, 4, 9, 16];
const myMap = myArray.map(x => x * 2);
console.log(myMap);
// expected output: Array [2, 8, 18, 32]

다음과 같이 각 Array의 구성요소들에 하나씩 콜백함수를 적용하기 위해 존재한다. 만일 위와 같은 용도로 사용하려면

for (let step = 0; step < 3; step++) {
  // Runs 3 times
  console.log(`Logged to console ${step + 1} times`)
}
// log
Logged to console 1 times
Logged to console 2 times
Logged to console 3 times

다음과 같이 사용하는 것이 좋다

1. const, var, let

var는 블록 스코프에 영향을 받지 않기 떄문에 기존에 존재하는 식별자의 값을 더럽힌다. ES6 환경이라면, const나 let을 사용 하는 것이 좋다

1. 불필요한 중첩

doSomething()
  .then(function (result) {
    // Forgot to return promise from inner chain
    // unnecessary nesting
    doSomethingElse(result)
      .then((newResult) => doThirdThing(newResult));
  })
  .then(() => doFourthThing());
// Forgot to terminate chain with a catch!

다음과 같은 케이스에서는, then만 많고 에러를 잡는 catch가 없다

doSomething()
  .then(function (result) {
    return doSomethingElse(result);
  })
  .then((/* result ignored */) => doFourthThing())
  .catch((error) => console.error(error));

다음과 같이 에러를 위한 캐치문도 작성해 주는 것이 좋다.