[CleanCode_JS]_변수

변수

1. 의미있고 발음하기 쉬운 변수 이름을 사용한다.

// bad
const yyyymmdstr = moment().format('YYYY/MM/DD');

// good
const currentDate = moment().format('YYYY/MM/DD');

2. 동일한 유형의 변수에 동일한 어휘를 사용한다.

// bad
getUserInfo();
getClientData();
getCustomerRecord();

// good
getUser();

3. 검색가능한 이름을 사용한다.

// bad
setTimeout(blastOff, 86400000);
// 86400000의 의미를 알 수 없다

// good
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

4. 의도를 나타내는 변수들을 사용한다.

// bad
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);

// good
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);

5. 자신만 알아볼 수 있는 작명을 피한다.

: 명시적인 것이 암시적인 것보다 좋다.

// bad
const locations = ['서울', '인천', '수원'];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // 잠깐, `l`은 또 뭘까요?
  dispatch(l);
});

// good
const locations = ['서울', '인천', '수원'];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

6. 문맥상 필요없는 것들을 쓰지 않는다

// bad
const Car = {
  carMake: 'BMW',
  carModel: 'M3',
  carColor: '파란색'
};

function paintCar(car) {
  car.carColor = '빨간색';
}

// good
const Car = {
  make: 'BMW',
  model: 'M3',
  color: '파란색'
};

function paintCar(car) {
  car.color = '빨간색';
}

7. 기본 매개변수가 short circuiting 트릭이나 조건문 보다 깔끔하다.

: 기본 매개변수는 종종 short circuiting 트릭보다 깔끔하다. 기본 매개변수는 매개변수가 undefined일때만 적용된다. '', "", false, null, 0, NaN 같은 falsy한 값들은 기본 매개변수가 적용되지 않는다.

// bad
function createMicrobrewery(name) {
  const breweryName = name || 'Hipster Brew Co.';
  // ...
}

// good
function createMicrobrewery(name = 'Hipster Brew Co.') {
  // ...
}

참고 링크 Github