Лучшие практики JavaScript - функции и мутации

Как и любые другие приложения, приложения на JavaScript также должны быть хорошо написаны. В противном случае позже мы столкнемся со всевозможными проблемами.

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

Не используйте геттеры и сеттеры

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

Например, мы не должны писать:

const person = {
  name: 'james',
  get age() {
    return this._age;
  },
  set age(n) {
    if (n < 0) {
      this._age = 0;
    } else if (n > 200) {
      this._age = 200;
    } else {
      this._age = n;
    }
  }
};

Также мы должны вызвать __defineGetter__ или __defineSetter__:

person.__defineGetter__('name', () => {
  return this.name || 'james';
});

or:

person.__defineSetter__('name', (name) => {
  this.name = name.trim();
});

Вместо этого мы создаем чистые функции:

const restrictAge = (n, min, max) => {
  if (n <= min) {
    return min;
  }
  if (n >= max) {
    return max;
  }
  return n;
}
const setAge = (age, person) => {
  return Object.assign({}, person, { age: restrictAge(age, 0, 120 )});
}

Таким образом, у нас есть все чистые функции, и он более универсален, чем наша реализация установщика, поскольку мы можем изменять min и max.

Уменьшите использование петель

Большинство циклов в коде JavaScript можно переписать с помощью методов массива.

Это связано с тем, что уже существует множество методов, таких как map, filter и reduce, которые могут позволить нам работать с массивами более коротким способом.

Поэтому вместо того, чтобы писать:

for (const a of arr) {
  result.push(a * 10);
}

Мы можем написать:

const result = arr.map(a => a  * 10);

Гораздо проще использовать map, чем цикл for-of.

Не используйте Object.assign с переменной в качестве первого аргумента

Object.assign изменяет первый аргумент.

Следовательно, чтобы использовать его таким образом, чтобы не изменять существующие данные, мы должны передать пустой объект в качестве первого аргумента.

Вместо того, чтобы писать:

const a = { foo: 1, bar: 2 };
const b = { baz: 3 };
Object.assign(a, b);

мы пишем:

const c = Object.assign({}, a, b);

Уменьшите использование методов мутирующих массивов

Поскольку у нас есть оператор распространения и альтернативные методы массива, мы можем избежать использования методов изменяющегося массива в нашем коде.

Например, вместо того, чтобы писать:

arr.pop();

Мы можем написать:

const arr = arr.slice(0, arr.length - 1);

Единственный, который сложнее заменить, - это sort. В этом случае мы можем сделать его копию с помощью оператора распространения, а затем вызвать sort для этого массива.

Итак, мы можем написать:

const copy = [...arr];
copy.sort();

Вместо splice мы можем рассмотреть возможность использования filter или slice.

Если мы хотим удалить один элемент с данным индексом, мы можем написать:

const removed = arr.filter((a, i) => i !== index);

Затем мы удаляем элемент с индексом index и присваиваем его новой переменной.

Сократите использование операторов-мутаций

Случайно изменить данные легко.

Поэтому мы можем захотеть избежать использования операторов мутации.

Например, мы можем захотеть избежать использования операторов +=, /=, -=, %= или *=.

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

Мы можем написать:

const b = a + 10;

вместо того:

a += 10;

Если нам нужно обновить переменную новыми значениями путем повторного добавления, мы можем использовать reduce:

const total = arr.reduce((total, a) => total + a, 0);

Перед осторожностью с null или undefined

Мы всегда должны быть осторожны со значениями null или undefined, поскольку они являются источником множества ошибок.

Поэтому мы должны убедиться, что переменная или свойство не null или undefined, прежде чем работать с ними.

Чтобы проверить и то, и другое, мы можем написать:

if (val === null || val === undefined){
  //...
}

or:

if (val === null || typeof val === 'undefined'){
  //...
}

Заключение

Мы должны избегать мутации данных, чтобы случайно не изменить их.

Также проще протестировать функцию, которая не изменяет данные.

Кроме того, мы должны быть осторожны с null или undefined.