변수

의미 전달이 명확하고 발음 가능한 변수명 사용

나쁨:

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

좋음:

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

동일 개념 변수에 일관된 어휘 사용

나쁨:

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

좋음:

getUser();

검색 가능한 이름 사용

개발자는 평생 작성할 코드보다 더 많은 코드를 읽게 됩니다. 따라서 작성하는 코드의 가독성과 검색 용이성은 매우 중요합니다. 의미 없는 변수명을 사용하면 프로그램 이해에 방해가 됩니다.

검색 가능한 이름을 사용해야 하며, buddy.js나 ESLint의 no-magic-numbers 규칙과 같은 도구로 명명되지 않은 상수를 식별할 수 있습니다.

나쁨:

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);

좋음:

// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_PER_DAY);

설명적 변수 활용

나쁨:

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);

암시적 의미 매핑 피하기

암시적 표현보다 명시적 표현이 우선입니다.

나쁨:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});

좋음:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});

불필요한 문맥 중복 추가 금지

클래스/객체 이름에서 이미 정보를 제공하는 경우 변수명에 동일 내용을 반복하지 마세요.

나쁨:

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

좋음:

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}

단락 평가 또는 조건문 대신 기본 매개변수 사용

기본 매개변수(default parameters)는 단락 평가(short circuiting)보다 코드를 깔끔하게 합니다. 단, undefined 인수에만 기본값이 적용되며 '', "", false, null, 0, NaN 등의 "falsy(거짓으로 판정되는)" 값은 기본값으로 대체되지 않습니다.

나쁨:

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

좋음:

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