Это первая часть серии, которую я буду публиковать и которая даст представление о том, как следовать передовым методам работы с JS.

Ссылки в JS

  1. Используйте const для всех ссылок; избегайте использования var.
    Есть идеи, почему?
    Это гарантирует, что ссылки не будут переназначены, что может привести к дальнейшим ошибкам.
  2. Если требуется переназначение, вместо var следует использовать let, так как let имеет область действия блока.

Объекты

  1. Используйте вычисляемые имена свойств при создании объектов с динамическими именами свойств, поскольку они позволяют определять все свойства объекта в одном месте.
function getKey(key1) {
  return `a key named ${key1}`;
}

// bad
const obj = {
  id: 1,
  name: 'India',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'India',
  [getKey('enabled')]: true,
};

2. Используйте сокращение метода объекта.

// bad
const foo= {
  value: 1,

  add: function (value) {
    return foo.value + value;
  },
};

// good
const foo= {
  value: 10,

  add(value) {
    return foo.value + value;
  },
};

3. Используйте краткое обозначение значения свойства как более короткое и описательное. Также сгруппируйте свои сокращенные свойства в начале объявления вашего объекта. Почему? Легче сказать, какие свойства используют сокращение.

const name = 'Medium';
//bad
const obj = {
      name: name
};
//good
const obj = {
name
};
//Grouping
const name= 'Sam';
const age= 35;

// bad
const obj = {
  bloodGrp: 'B+',
  lovesBaseBall: true,
  name,
  lovesCricket: true,
  age
};

// good
const obj = {
  name,
  age,
  bloodGrp: 'B+',
  lovesBaseBall: true,
  lovesCricket: true
};

4. Указывайте только те свойства, которые являются недопустимыми идентификаторами. В целом мы считаем его субъективно более легким для чтения. Он улучшает подсветку синтаксиса, а также легче оптимизируется многими движками JS.

// bad
const badIdentifier= {
  'foo': 3,
  'bar': 4,
  'data-bad': 5,
};

// good
const goodIdentifier = {
  foo: 3,
  bar: 4,
  'data-good': 5,
};

5. Поскольку методы объекта, такие как hasOwnProperty, propertyEnumerable и т. д., могут быть затенены свойствами рассматриваемого объекта — рассмотрим { hasOwnProperty: false } — или объект может быть нулевым объектом (Object.create(null)).

// bad
console.log(object.hasOwnProperty(key));

// good
console.log(Object.prototype.hasOwnProperty.call(object, key));

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));
/* or */
import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

6. Предпочитайте оператор распространения объекта вместо Object.assign для поверхностного копирования объектов. Используйте оператор остатка объекта, чтобы получить новый объект с опущенными некоторыми свойствами.

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 }); // this mutates `original` object which may lead to bug 
delete copy.a; // so does this

// bad
const original = { a: 1, b: 2 };
const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 };
const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

Массивы

  • Предпочитайте литеральный синтаксис для создания массива.
    Как упоминалось в es-lint : использование конструктора Array для создания нового массива обычно не рекомендуется в пользу литеральной записи массива из-за ловушки с одним аргументом и из-за того, что глобальный Array может быть переопределен. Исключением является случай, когда конструктор Array используется для преднамеренного создания разреженных массивов заданного размера путем предоставления конструктору одного числового аргумента.
// bad
const items = new Array();

// good
const items = [];
  • Используйте Array#push вместо прямого назначения для добавления элементов в массив.
const arr= [];

// bad
arr[arr.length] = 'item1';

// good
arr.push('item1');
  • 4.3 Используйте развороты массивов ... для копирования массивов.
// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];
  • 4.4 Чтобы преобразовать итерируемый объект в массив, используйте спреды ... вместо Array.from.
const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];
  • 4.5 Используйте Array.from для преобразования объекта, подобного массиву, в массив.
const arrCopy= { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrCopy);

// good
const arr = Array.from(arrCopy);
  • 4.6 Используйте Array.from вместо распространения ... для отображения на итерации, поскольку это позволяет избежать создания промежуточного массива.
// bad
const baz = [...foo].map(bar);

// good
const baz = Array.from(foo, bar);
  • 4.7 Используйте операторы возврата в обратных вызовах методов массива. Возврат можно опустить, если тело функции состоит из одного оператора, возвращающего выражение без побочных эффектов, см. eslint: array-callback-return
// good
[1, 2, 3].map((x) => {
  const y = x + 1;
  return x * y;
});

// good
[1, 2, 3].map((x) => x + 1);

// bad - no returned value means `acc` becomes undefined after the first iteration
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
});

// good
[[0, 1], [2, 3], [4, 5]].reduce((acc, item, index) => {
  const flatten = acc.concat(item);
  return flatten;
});

// bad
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  } else {
    return false;
  }
});

// good
inbox.filter((msg) => {
  const { subject, author } = msg;
  if (subject === 'Mockingbird') {
    return author === 'Harper Lee';
  }

  return false;
});
  • 4.8 Использовать разрывы строк после открытия и перед закрытием скобок массива, если массив состоит из нескольких строк
// bad
const arr = [
  [0, 1], [2, 3], [4, 5],
];

const objectInArray = [{
  id: 1,
}, {
  id: 2,
}];

const numberInArray = [
  1, 2,
];

// good
const arr = [[0, 1], [2, 3], [4, 5]];

const objectInArray = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];

const numberInArray = [
  1,
  2,
];