leah

my dev_log

0%

Variables

Posted on Edited on In ,

Variables

  • 변수 이름

    1. 의미 있는

    2. 발음하기 쉬운

    1
    2
    3
    4
    5
    // bad
    const yyyymmdstr = moment().format('YYYY/MM/DD');

    // good
    const currentDate = moment().format('YYYY/MM/DD');
    1. 동일한 유형에 동일한 어휘
    1
    2
    3
    4
    5
    6
    7
    // bad
    getUserInfo();
    getClientData();
    getCustomerRecord();

    // good
    getUser();
    1. 검색 가능한 이름 지정하기
    1
    2
    3
    4
    5
    6
    // bad
    setTimeout(blastOff, 86400000);

    // good
    const MILLISECONDS_IN_A_DAY = 86400000;
    setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
    1. 의도를 나타내는
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const address = 'One Infinite Loop, Cupertino 95014';
    const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;

    // bad
    saveCityZipCode(address.match(cityZipCodeRegex)[1], address.match(cityZipCodeRegex)[2]);

    // good
    const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
    saveCityZipCode(city, zipCode);
    1. 암시적인 것 X, 명시적인 것
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const locations = ['서울', '인천', '수원'];

    // bad
    locations.forEach(l => {
      doStuff();
      doSomeOtherStuff();
      // ...
      // ...
      // ...
      // 잠깐, `l`은 또 뭘까요?
      dispatch(l);
    });

    // good
    locations.forEach(location => {
      doStuff();
      doSomeOtherStuff();
      // ...
      // ...
      // ...
      dispatch(location);
    });
    1. 필요없는 것 지우기
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 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 = '빨간색';
    }
    1. short circuiting보다 default 매개변수 활용하기
      • default 매개변수 : 매개변수가 undefined 일 때 적용됨
      • 그 외 (‘’, “”, false, null, 0, NaN 등의 falsy 값 포함) 은 적용되지 않음
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // bad
    function createMicrobrewery(name) {
      const breweryName = name || 'Hipster Brew Co.';
      // ...
    }

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