자동차 경주 게임 미션 공통 피드백(2)

■ 도메인 로직에 포함할 것과 포함하지 않을 것

export class Car {
  constructor(name) {
    this.name = name;
    this.forwardCount = 0;
  }
  ...
  getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
}

 

해당 도메인과 직접적인 관련이 있는 로직이 아니라면 꼭 그 도메인의 메서드로 넣을 필요가 없다.

위 예시의 경우, 랜덤 숫자를 산출하는 메서드가 자동차 클래스 내에서 사용될 순 있겠지만

직접적인 관련이 있다고 보기에는 어렵기 때문에, 굳이 자동차 클래스 내부에 위치해 있을 필요는 없음.

 

추가로, 메서드에 꼭 this가 사용되어야 하는 건 아니지만

특정 클래스 안에 있어야 하는데 this가 사용되지 않고 있는 메서드라면

static method로 선언하면 더 효율적으로 사용할 수 있다.

 

■ 이벤트 리스너 함수에 이벤트 행위를 굳이 적을 필요는 없다

// X
this.$restartButton.addEventListener("click", () => {
  this.handleRestartButtonClick();
});

// O
this.$restartButton.addEventListener("click", () => {
  this.handleRestartButton();
});

이벤트가 이미 'click'이벤트임이 명시되어있기 때문에,

함수 명에까지 굳이 해당 이벤트를 언급해줄 필요는 없다.

 

■ 인라인인 경우에만 중괄호를 생략해라

// X
if (carNames.length < MIN_NUMBER)
  throw Error(MESSAGE.CAR_NAME.MIN_NUMBER);
  
// O
if (carNames.length < MIN_NUMBER) {
  throw Error(MESSAGE.CAR_NAME.MIN_NUMBER);
}

// O
// throw Error~는 너무 길어서 인라인으로 적기 애매해서..ㅎ
if (carNames.length < MIN_NUMBER) return;

 

 

■ Property shorthand

const a = 'foo';
const b = 42;
const c = {};

//아래와 같이 작성할 수도 있지만
const object = {
  a: a,
  b: b,
  c: c,
};

// ES6의 property shorthand를 이용하여 간결하게 표기할 수 있다.
const object = {
  a,
  b,
  c
}

ES6에서는 property shorthand(단축 속성명)을 제공함.
Property shorthand는 객체를 정의 할 때 객체의 key값과 value의 값이 같으면
key 와 value 값을 각각 표기하지 않고 한 번만 표기할 수 있게 하는 것을 의미.