우테코 2주차 과제를 해결하면서 성장을 가속화할 새로운 친구들을 만났다.

프론트엔드 테스팅 도구인 Jest, 에어비앤비 스타일 가이드에 기반하여 코드 컨벤션 지키기, 인덴트 제한 지키기 등..

특히 에어비앤비 스타일 가이드는 이전부터 독파하고 싶었는데

마침 우테코를 하면서 기회가 생겨 천천히 읽어보는 중이다.

요즘은 맥북을 열고 공부를 시작하려하면 먼저 스타일 가이드를 읽으면서 머리를 예열시킨다. 🤯

그러다가 내가 몰랐던 규칙을 알게 되어 기록을 남겨본다.

함수의 반환값이 여러 개면 Destructuring을 어떻게?

아래는 우테코 2주차 숫자 야구 미션에서 내가 구현한 compare 함수이다.

compare() {
    const strike = this.checkStrike();
    const ball = this.checkBall();
    return [strike, ball];
  }

compare 함수는 야구 게임에서 스트라이크, 볼을 체크하여 반환하는 함수이다.

strike와 ball을 배열로 묶어서 반환하였다.

그리고 다음과 같이 Array Destructuring으로 반환값을 펼쳐준다.

const [strike, ball] = this.compare();

그런데 에어비앤비 스타일 가이드를 읽으면서 다음과 같은 내용을 발견했다.

🛫 5.3 복수의 값을 반환하는 경우는 배열의 구조화대입이 아닌 오브젝트의 구조화대입을 이용해 주십시오.
https://github.com/tipjs/javascript-style-guide#5.3

Why? You can add new properties over time or change the order of things without breaking call sites.
왜? 이렇게 함으로써 나중에 호출처에 영향을 주지않고 새로운 프로퍼티를 추가하거나 순서를 변경할수 있습니다.

// bad
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
// 호출처에서 반환된 데이터의 순서를 고려할 필요가 있습니다.
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return { left, right, top, bottom };
}

// the caller selects only the data they need
// 호출처에서는 필요한 데이터만 선택하면 됩니다.
const { left, right } = processInput(input);

나는 지금껏 함수의 반환값이 객체가 아니라면 항상 Array destructuring을 사용했었다.

객체가 아니면 굳이 Object destructuring을 사용할 필요가 없다고 느꼈기 때문이다!

그러나 스타일 가이드에 의하면 반환값이 여러 개면 Object destructuring을 권장한다.

그 이유는 함수의 반환값을 Destructuring으로 펼쳐줄 때 반환 값 순서를 신경 쓰지 않아도 되고, 원하는 값만 받을 수 있기 때문이다.

위의 예시의 반환값을 Object destructuring으로 받는 패턴을 잘 보자.

// good
function processInput(input) {
  // then a miracle occurs
  // 그리고 기적이 일어납니다.
  return { left, right, top, bottom };
}

// the caller selects only the data they need
// 호출처에서는 필요한 데이터만 선택하면 됩니다.
const { left, right } = processInput(input);

필요한 값만 받고 있다.
사용하지 않을 값인 top, bottom에 대해선 신경 쓰지 않아도 된다.

여러 개의 반환값은 Object Destructuring을 사용하자

이렇게 Object destructuring을 쓰면 코드도 유연하게 작성할 수 있고

무엇보다 반환값을 destructuring 해주는 순서를 틀려서 에러를 마주할 일은 없을 거다.

에어비앤비 스타일 가이드를 읽으면서 나의 코드 작성 스타일을 되돌아보게 된다.

이렇게 나를 깎아 나가면서 조금씩 성장하는게 아닐까..