변수(Variables)

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

//Bad👎
const yyymmdstr = moment().format('YYYY/MM/DD');


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

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

//Bad👎
getUserInfo();
getClinetData();
getCustomerRecord();


//Good👍
getUser();

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

//Bad👎
// 대체 86400000 무엇을 의미하는 걸까요?
setTimeout(blastOff, 86400000);


//Good👍
//`const` 전역 변수로 "MILLISECONDS_IN_A_DAY" 선언.
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]);
//address.match(cityZipCodeRegex)[1] = "Cupertino",
//address.match(cityZipCodeRegex)[2] = "95014"

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

의도를 나타낼 변수로 "city"와 "zipCode" 사용.

5. 자신만 알아볼 수 있는 작명을 피함.

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


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

Bad : 'l' -> Good : 'location'

6. 문맥상 필요없는 것들을 쓰지 않음.

//Bad👎
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 = '빨간색';
}

🙏Short-Circuit Evaluation

1. 논리 연산자를 왼쪽 -> 오른쪽 순으로 실행, 결과를 얻게 되는 순간 단축 평가(즉, 평가의 중단)
2. 평가를 중단하게 된 계기값을 리턴함.

ex1)

var me = "sun";
var you = me || "chan"; // "sun"

ex2)

var me = "";
var you = me || "chan"; // "chan"

ex3)

var me = "";
var you = me || {}; // 빈 객체 생성

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

기본 매개변수는 매개변수가 undefined 일때만 적용되며 ' ', "", false, null, 0, NaN 같은 falsy 한 값들은 매개변수가 적용되지 않음.

  // 예시
  function test(num = 1) {
    console.log(typeof num)
  }
  test()            // 'number' (num 은 1로 설정됨)
  test(undefined)   // 'number' (num 이 역시 1로 설정됨)
  // 다른 falsy values로 매개변수 적용할 경우
  test('')          // 'string' (num 은 ''로 설정됨)
  test(null)        // 'object' (num 은 null로 설정됨)

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

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