자바스크립트 - Clean Code(변수)

들어가기에 앞서,

클린 코드에 대해서 포스팅하는 이유는 최근에 회사 인턴을 다시 하면서 다른 사람의 코드를 보고 이해해야 하는 경우가 많아졌다.

저도 동료 개발자와 협업하기 때문에 좋은 개발자가 되기 위해서는 코드가 정상적으로 작동하는 것과 더불어, Clean Code를 작성하는 능력 또한 필요하다는 생각이 들었다.

그래서 소프트웨어 방법론에 관한 책들 중 Robert C. Martin's의 책인 Clean Code에 있는 내용을 자바스크립트에 적용시킨 글을 가지고 정리된 내용을 토대로 기록하려고 한다.

🎈 참고!

구름EDU - 모두를 위한 맞춤형 IT교육

 

변수(Variiables)

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

• 안 좋은 예시

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

 

• 좋은 예시

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

변수 이름을 어떻게 사용하는지에 따라 훨씬 알아보기가 쉬워진다.

 

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

• 안 좋은 예시

getUserInfo();
getClientData();
getCustomerRecord();

 

• 좋은 예시

getUser();

 

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

우리는 작성할 코드보다 읽을 코드가 더 많다. 그렇기 때문에 코드를 읽기 쉽고 검색 가능하게 작성해야 좋다.

그래야만 다른 사람이 코드를 이해할 때 큰 어려움 없이 이해할 수 있을 것이다.

• 안 좋은 예시

setTimeout(blastOff, 86400000);

예시에 있는 저 86400000은 대체 무엇을 의미하는 것인가..?

 

• 좋은 예시

// 대문자로 `const` 전역 변수를 선언해서 사용
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

이렇게 바꾸면 buddy.js 그리고 ESLint와 같은 도구들이 이름이 정해져 있지 않은 상수들을 발견하고 고칠 수 있게 도와준다.

 

4. 의도를 나타내는 변수들을 사용해라.

• 안 좋은 예시

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

 

• 좋은 예시

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

city와 zipCode라는 의도가 드러난 변수 이름을 사용함으로써 의미가 명확해졌다.

 

5. 자신만 알아볼 수 있는 작명은 피해라.

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

자기만 알아보는 이기적인 마인드는 버려야 한다.

• 안 좋은 예시

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

 

• 좋은 예시

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

1과 location을 보았을 때 뭐가 무엇인지 훨씬 명확하게 알 수 있다.

 

6. 문맥상 필요 없는 것들을 쓰지 마라.

• 안 좋은 예시

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

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

 

• 좋은 예시

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

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

 

이 예시를 보니 평소에 쓸데없이 구분하려고 이름을 길게 만들어서 사용했었는데 그  버릇을 고쳐야겠다.

 

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

기본 매개변수는 종종 short circuiting 트릭보다 깔끔하다.

기본 매개변수는 매개변수가 undefined 일 때만 적용한다.

즉, ' ', " ", false, null, 0, NaN 같은 falsy 한 값들은 기본 매개변수가 적용되지 않는다.

• 안 좋은 예시

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

 

• 좋은 예시

매개 변수 name이 undefined 이기 때문에 적용 가능한 것!

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