[Перевод] Чистый javascript.Переменные14.01.2017 19:03

Перевод книги Раяна Макдермота чистый код адаптированной под javascript.

Оглавление:


  • Введение
  • Переменные

image

Используйте значимые и произносимые имена переменных


Плохо: 
const yyyymmdstr = moment().format('YYYY/MM/DD');

Хорошо: 
const yearMonthDay = moment().format('YYYY/MM/DD');

Используйте один и тот же метод для того же типа переменной


Плохо: 
getUserInfo();
getClientData();
getCustomerRecord();

Хорошо: 
getUser();

Используйте именованные значения


Мы будем читать код чаще, чем мы когда-нибудь напишем. Важно писать читаемый код, который легко искать. Делайте ваши имена для поиска. Такие инструменты, как buddy.js и ESLint могут помочь идентифицировать неназванные константы.

Плохо: 

// Что значит 86400000?
setTimeout(() => {
  this.blastOff();
}, 86400000);

Хорошо: 
// Объявляйте их как глобальные переменные.
const MILLISECONDS_IN_A_DAY = 86400000;

setTimeout(() => {
  this.blastOff();
}, MILLISECONDS_IN_A_DAY);

Используйте объясняющие переменные


Плохо: 
const address = 'One Infinite Loop, Cupertino 95014';
const cityStateRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityState(address.match(cityStateRegex)[1], address.match(cityStateRegex)[2]);

Хорошо: 
const address = 'One Infinite Loop, Cupertino 95014';
const cityStateRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [, city, state] = address.match(cityStateRegex);
saveCityState(city, state);

Используйте очеловеченные названия


Явное лучше, чем неявное.

Плохо: 

const locations = ['Austin', 'New York', 'San Francisco'];
locations.forEach((l) => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Что значит `l`?
  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) {
  car.carColor = 'Red';
}

Хорошо: 
const Car = {
  make: 'Honda',
  model: 'Accord',
  color: 'Blue'
};

function paintCar(car) {
  car.color = 'Red';
}

Используйте условия по умолчанию вместо коротких замыканий или условных выражений


Плохо: 
function createMicrobrewery(name) {
  const breweryName = name || 'Hipster Brew Co.';
  // ...
}

Хорошо: 
function createMicrobrewery(breweryName = 'Hipster Brew Co.') {
  // ...
}

Комментарии (9)

  • 14 января 2017 в 12:02

    +2

    ↑

    ↓

    Это относится ко всем языкам программирования всех времен и народов.

    • 14 января 2017 в 12:07

      –1

      ↑

      ↓

      Полностью с вами согласен.

      • 14 января 2017 в 12:47

        +2

        ↑

        ↓

        Но тогда зачем писать очевидные вещи, которым место в «Программирование для самых маленьких (в картинках)»? Да и полно подобных статей уже.

        • 14 января 2017 в 13:44

          +1

          ↑

          ↓

          Читайте оригинал.

  • 14 января 2017 в 13:16

    +6

    ↑

    ↓

    Наверное, вам стоит подписаться на коммиты в репозитории, потому что примеры и формулировки там сейчас активно и коллективно обновляются. Например, этот код уже отличается от старой версии, использованной вами.

  • 14 января 2017 в 13:28

    +7

    ↑

    ↓

    Лучше объедините переводы в одну статью. Читать отдельные короткие, не очень удобно.

    • 14 января 2017 в 15:20 (комментарий был изменён)

      +5

      ↑

      ↓

      +1. Введение — вообще ни о чем. Эта часть — коротковата. Если материал уже есть — лучше чуть подлиннее. При наличии нормальной структуры будет читаться лучше.

      К React, Node, Angular это точно имеет отношение?

  • 14 января 2017 в 17:38

    0

    ↑

    ↓

    function createMicrobrewery (breweryName = 'Hipster Brew Co.') {
    //…
    }

    Узнал для себя новое, и давно уже значение по умолчанию доступно в JS?

    • 14 января 2017 в 17:44

      0

      ↑

      ↓

      Согласно MDN, начиная с ES6.

© Habrahabr.ru