[JavaScript] 클린 코드 - 1. 변수명 짓는 방법

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

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

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

 

2. 같은 의미의 변수를 여러 개 만들지 않는다.

// BAD - 같은 의미의 변수들이다.
getUserInfo();
getClientData();
getCustomerRecord();

// GOOD - 변수들을 하나로 묶는다.
getUser();

 

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

의미를 가지고 있는 값이라면 상수로 만들어 관리하자! 손쉽게 검색할 수 있게 된다.

동료와 협업할 때, 예전의 내 코드를 찾아볼 때 등의 상황에서 코드 이해에 큰 도움을 줄 것이다.

참고) ESLint 등의 도구에서 이름이 없는 상수값을 찾을 수 있게 도와준다.

// 86400000가 무슨 의미?
setTimeout(blastOff, 86400000);

// 상수를 통해 값에 의미를 부여하자. (상수는 대문자로!)
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 - l이 뭔 뜻인데..?
const locations = ["서울", "인천", "수원"];
locations.forEach((l) => {
  // ...
  dispatch(l);
});

// GOOD!
const locations = ["서울", "인천", "수원"];
locations.forEach((location) => {
  // ...
  dispatch(location);
});

 

6. 문맥상 불필요한 이름은 쓰지 않는다.

// BAD - Car와 관련됨을 충분히 유추 가능
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 문법을 사용한다.

이런 상황에서 기본값 매개변수를 세팅해주면 코드가 깔끔해진다.

• 기본값 매개변수 - 함수 인자로 undefined가 전달됐을 때 초기화되는 값
• Short-Circuiting - ||, && 연산자

// BAD 1 - Short circuiting (||) 사용
function createMicrobrewery(name) {
  const breweryName = name || "Hipster Co.";
  // ...
}

// BAD 2 - 조건문 사용
function createMicrobrewery(name) {
  if (!name) {
    const breweryName = "Hipster Co.";
  }
  // ...
}

// GOOD! - 기본값 매개변수 사용
function createMicrobrewery(name = "Hipster Co.") {
  // ...
}

 

참조

• https://github.com/ryanmcdermott/clean-code-javascript#variables
• https://edu.goorm.io/learn/lecture/20119/%EB%B2%88%EC%97%AD%ED%8C%90-clean-code-javascript