Лучшие практики JavaScript: переменные

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

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

Избегайте глобальных переменных

Глобальных переменных стоит избегать по нескольким причинам.

Во-первых, их легко переписать в различных местах кода, потому что они везде доступны. Во-вторых, они могут переписывать объект window, так как являются свойствами объекта window.

Две эти проблемы затрудняют восприятие кода. Следовательно, стоит определять локальные переменные настолько часто, насколько это возможно, используя ключевые слова var, let илиconst.

Переменные, определенные с var, доступны на том уровне, на котором они определены, и ниже, до того, как они будут определены. Например, если мы напишем:

const log = () => {
  console.log(x);
}
log();
var x = 1;
log();

Получим undefined в первом console.log и единицу во втором.

Это то же самое, что и:

var x;
const log = () => {
  console.log(x);
}
log();
x = 1;
log();

Переменные, определенные с let, доступны только после того, как определены, то есть, если мы напишем:

const log = () => {
  console.log(x);
}
log();
let x = 1;
log();

Мы получим ошибку:

Uncaught ReferenceError: Cannot access ‘x’ before initialization

С ключевым словом const мы определяем постоянные, значения которым присваиваются раз и навсегда. Они также доступны только после определения. Напишем:

const log = () => {
  console.log(x);
}

const x = 1;
log();

Вызов log до const x = 1 выдаст:

Uncaught ReferenceError: Cannot access ‘x’ before initialization

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

Мы можем экспортировать и импортировать переменные с помощью export и import в другие модули. Существует также команда export default для экспорта модуля полностью. Этим способом мы экспортируем только то, что должно быть доступно снаружи модуля, сохраняя остальные данные закрытыми.

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

const multiply = () => {
  const x = 3;
  return () => x * 2;
}

x остается внутри функции multiply, следовательно, он не доступен снаружи и возвращает функцию, которая что-то делает с ним. Для вызова напишем:

console.log(multiply()());

Всегда объявляйте локальные переменные

Как следствие, мы должны всегда объявлять локальные переменные и постоянные также с помощью var, let или const. В противном случае переменная будет объявлена как глобальная и как свойство объекта window, чего мы определенно не хотим. Например, никогда не стоит писать:

x = 1;

Следует писать так:

let x = 1;

К счастью, JavaScript strict mode (строгий режим) не позволяет необъявленные переменные, поэтому случайно создать глобальные переменные нельзя.

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

Переменные и константы должны быть наверху

Объявление переменных и вверху файла делает код чище. Также это помешает случайно ссылаться на переменные, объявленные с let или const до того, как они будут определены.

Если strict mode выключен, мы также избегаем создания глобальных переменных и случайного повторного объявления. Большинство текстовых редакторов отлавливает повторные объявления, но вероятность пропустить их остается.

Можно объявить несколько переменных в одной строке, разделив имена запятыми. Например, мы можем написать:

let x, y;
x = 1;
y = 1;
console.log(x, y);

И тогда мы получим:

1 1

из console.log.

То же самое можно сделать с помощью цикла:

let i;

for (i = 0; i < 10; i++) {
  console.log(i);
}

Инициализируйте переменные при их объявлении

Инициализировать переменные и константы с объявленными значениями весьма хорошая идея. Это предотвращает ошибки неопределенных значений. Также удобно объявлять переменные или константы и задавать их начальные значения одной строкой.

В противном случае у нас будут отдельные строки для объявления и для значения.

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

let x = 1,
  y = 1;

Чтобы объявить и x, и y. Это существенно короче, чем:

let x;
let y;
x = 1;
y = 1;

Мы можем объявлять и инициализировать несколько переменных, разделив каждое объявление и назначение запятыми.

Заключение

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

Перевод статьи John Au-Yeung: JavaScript Best Practices — Variables

Поделиться статьей:

Вернуться к статьям