반응형
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.") {
// ...
}
참조
반응형