50+ подсказок, которые должен знать разработчик JS(ES6+) (5 часть)

Всем привет! Как у вас дела?
С вами снова StormyTalent, чтобы рассказать о 50+ важных подсказках по JS.
Сегодня мы поговорим о модулях, свойствах, переменных.

Всегда используйте модули (импорт/экспорт) вместо нестандартной системы модулей. Вы всегда можете сделать транспиляцию в предпочитаемую вами систему модулей.

Модули

const numbers = [1, 2, 3, 4, 5];

// bad
let sum = 0;
for (let num of numbers) {
  sum += num;
}
sum === 15;

// good
let sum = 0;
numbers.forEach((num) => {
  sum += num;
});
sum === 15;

// best (use the functional force)
const sum = numbers.reduce((total, num) => total + num, 0);
sum === 15;

// bad
const increasedByOne = [];
for (let i = 0; i < numbers.length; i++) {
  increasedByOne.push(numbers[i] + 1);
}

// good
const increasedByOne = [];
numbers.forEach((num) => {
  increasedByOne.push(num + 1);
});

// best (keeping it functional)
const increasedByOne = numbers.map((num) => num + 1);
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы вынуждены использовать генераторы или пренебрегаете нашими советами, убедитесь, что их функциональные подписи расставлены правильно.

// bad
function * foo() {
  // ...
}

// bad
const bar = function * () {
  // ...
};

// bad
const baz = function *() {
  // ...
};

// bad
const quux = function*() {
  // ...
};

// bad
function*foo() {
  // ...
}

// bad
function *foo() {
  // ...
}

// very bad
function
*
foo() {
  // ...
}

// very bad
const wat = function
*
() {
  // ...
};

// good
function* foo() {
  // ...
}

// good
const foo = function* () {
  // ...
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Свойства

Используйте точечную нотацию при обращении к свойствам

const luke = {
  jedi: true,
  age: 28,
};

// bad
const isJedi = luke['jedi'];

// good
const isJedi = luke.jedi;
Войти в полноэкранный режим Выход из полноэкранного режима

Используйте скобочную нотацию [] при доступе к свойствам с помощью переменной.

const luke = {
  jedi: true,
  age: 28,
};

function getProp(prop) {
  return luke[prop];
}

const isJedi = getProp('jedi');
Войти в полноэкранный режим Выйти из полноэкранного режима

Использовать оператор экспоненты ** при вычислении экспоненты.

// bad
const binary = Math.pow(2, 10);

// good
const binary = 2 ** 10;
Войти в полноэкранный режим Выход из полноэкранного режима

Переменные

Всегда используйте const или let для объявления переменных. В противном случае получатся глобальные переменные. Мы хотим избежать загрязнения глобального пространства имен. Капитан Планета предупреждал нас об этом.

// bad
superPower = new SuperPower();

// good
const superPower = new SuperPower();
Вход в полноэкранный режим Выход из полноэкранного режима

Используйте одно объявление const или let для каждой переменной или присваивания.

// bad
const items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';

// bad
// (compare to above, and try to spot the mistake)
const items = getItems(),
    goSportsTeam = true;
    dragonball = 'z';

// good
const items = getItems();
const goSportsTeam = true;
const dragonball = 'z';
Войти в полноэкранный режим Выход из полноэкранного режима

Сгруппируйте все const, а затем сгруппируйте все let.

// bad
let i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
let i;
const items = getItems();
let dragonball;
const goSportsTeam = true;
let len;

// good
const goSportsTeam = true;
const items = getItems();
let dragonball;
let i;
let length;
Войти в полноэкранный режим Выход из полноэкранного режима

Назначайте переменные там, где они нужны, но размещайте их в разумных местах.

// bad - unnecessary function call
function checkName(hasName) {
  const name = getName();

  if (hasName === 'test') {
    return false;
  }

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}

// good
function checkName(hasName) {
  if (hasName === 'test') {
    return false;
  }

  const name = getName();

  if (name === 'test') {
    this.setName('');
    return false;
  }

  return name;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Не связывайте назначения переменных в цепочку.

// bad
(function example() {
  // JavaScript interprets this as
  // let a = ( b = ( c = 1 ) );
  // The let keyword only applies to variable a; variables b and c become
  // global variables.
  let a = b = c = 1;
}());

console.log(a); // throws ReferenceError
console.log(b); // 1
console.log(c); // 1

// good
(function example() {
  let a = 1;
  let b = a;
  let c = a;
}());

console.log(a); // throws ReferenceError
console.log(b); // throws ReferenceError
console.log(c); // throws ReferenceError

// the same applies for `const`
Вход в полноэкранный режим Выход из полноэкранного режима

Избегайте использования унарных инкрементов и декрементов (++, —)

// bad

const array = [1, 2, 3];
let num = 1;
num++;
--num;

let sum = 0;
let truthyCount = 0;
for (let i = 0; i < array.length; i++) {
  let value = array[i];
  sum += value;
  if (value) {
    truthyCount++;
  }
}

// good

const array = [1, 2, 3];
let num = 1;
num += 1;
num -= 1;

const sum = array.reduce((a, b) => a + b, 0);
const truthyCount = array.filter(Boolean).length;
Войдите в полноэкранный режим Выйти из полноэкранного режима

Избегайте разрывов строк до или после = в присваивании. Если ваше присваивание нарушает max-len, окружите значение круглыми скобками.

// bad
const foo =
  superLongLongLongLongLongLongLongLongFunctionName();

// bad
const foo
  = 'superLongLongLongLongLongLongLongLongString';

// good
const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

// good
const foo = 'superLongLongLongLongLongLongLongLongString';
Войти в полноэкранный режим Выход из полноэкранного режима

Запретите неиспользуемые переменные.

// bad

var some_unused_var = 42;

// Write-only variables are not considered as used.
var y = 10;
y = 5;

// A read for a modification of itself is not considered as used.
var z = 0;
z = z + 1;

// Unused function arguments.
function getX(x, y) {
    return x;
}

// good

function getXPlusY(x, y) {
  return x + y;
}

var x = 1;
var y = a + 2;

alert(getXPlusY(x, y));

// 'type' is ignored even if unused because it has a rest property sibling.
// This is a form of extracting an object that omits the specified keys.
var { type, ...coords } = data;
// 'coords' is now the 'data' object without its 'type' property.
Войти в полноэкранный режим Выход из полноэкранного режима

Спасибо за ваше время.

Оцените статью
Procodings.ru
Добавить комментарий