02 Main
변수(Variiables)
1. 의미있고 발음하기 쉬운 변수 이름을 사용하세요
- 안 좋은 예
JavaScript
1
const yyyymmdstr = moment().format('YYYY/MM/DD');- 좋은 예
JavaScript
1
const currentDate = moment().format('YYYY/MM/DD');2. 동일한 유형의 변수에 동일한 어휘를 사용하세요
- 안 좋은 예
JavaScript
1
2
3
getUserInfo();
getClientData();
getCustomerRecord();- 좋은 예
JavaScript
1
getUser();3. 검색가능한 이름을 사용하세요
우리는 작성할 코드보다 읽을 코드가 더 많습니다. 그렇기 때문에 코드를 읽기 쉽고 검색 가능하게 작성해야 합니다. 그렇지 않으면 여러분의 코드를 이해하려고 하는 사람들에게 큰 어려움을 줍니다. 검색가능한 이름으로 만드세요. buddy.js 그리고 ESLint 와 같은 도구들이 이름이 정해져있지 않은 상수들을 발견하고 고칠 수 있게 도와줍니다.
- 안 좋은 예
JavaScript
1
2
// 대체 86400000 무엇을 의미하는 걸까요?
setTimeout(blastOff, 86400000);- 좋은 예
JavaScript
1
2
3
// 대문자로 `const` 전역 변수를 선언하세요
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);4. 의도를 나타내는 변수들을 사용하세요
- 안 좋은 예
JavaScript
1
2
3
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);- 좋은 예
JavaScript
1
2
3
4
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);5. 자신만 알아볼 수 있는 작명을 피하세요
명시적인 것이 암시적인 것보다 좋습니다.
- 안 좋은 예
JavaScript
1
2
3
4
5
6
7
8
9
10
const locations = ['서울', '인천', '수원'];
locations.forEach(l => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
// 잠깐, `l`은 또 뭘까요?
dispatch(l);
});- 좋은 예
JavaScript
1
2
3
4
5
6
7
8
9
const locations = ['서울', '인천', '수원'];
locations.forEach(location => {
doStuff();
doSomeOtherStuff();
// ...
// ...
// ...
dispatch(location);
});6. 문맥상 필요없는 것들을 쓰지 마세요
- 안 좋은 예
JavaScript
1
2
3
4
5
6
7
8
9
const Car = {
carMake: 'BMW',
carModel: 'M3',
carColor: '파란색'
};
function paintCar(car) {
car.carColor = '빨간색';
}- 좋은 예
JavaScript
1
2
3
4
5
6
7
8
9
const Car = {
make: 'BMW',
model: 'M3',
color: '파란색'
};
function paintCar(car) {
car.color = '빨간색';
}7. 기본 매개변수가 short circuiting 트릭이나 조건문 보다 깔끔합니다
기본 매개변수는 종종 short circuiting 트릭보다 깔끔합니다. 기본 매개변수는 매개변수가 undefined 일때만 적용합니다. '', "", false, null, 0, NaN 같은 falsy한 값들은 기본 매개변수가 적용되지 않습니다.
- 안 좋은 예
JavaScript
1
2
3
4
function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.';
// ...
}- 좋은 예
JavaScript
1
2
3
function createMicrobrewery(name = 'Hipster Brew Co.') {
// ...
}