Синтаксический сахар и современный JavaScript

ES6 или ECMAScript 2015 был 6-м и основным изданием стандарта спецификации языка ECMAScript. Он определил стандарт для реализации JavaScript и стал намного популярнее, чем предыдущее издание ES5.

ES6 внесла значительные изменения в язык JavaScript. Например, в нем появились новые функции, такие как ключевые слова let и const, операторы rest и spread, шаблонные литералы, классы, модули и многие другие усовершенствования, которые делают современное программирование на JavaScript более простым и увлекательным.

В этом посте мы рассмотрим синтаксический сахар, который вы можете использовать в современном JavaScript (ES6 и более поздних версиях). Что такое синтаксический сахар на самом деле? Это синтаксис языка программирования, предназначенный для облегчения чтения или выражения. Синтаксический сахар обычно является сокращением для общей операции, которая также может быть выражена в альтернативной, более подробной форме.

Анонимные и стрелочные функции

Иногда у вас есть функция, и вам не нужно присваивать ей имя, она нужна вам только для выполнения одного обратного вызова. Мы можем сделать это с помощью встроенных функций, как в примере ниже.

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

const doubled = arr.map(function(num) { 
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

Долгое время мы поступали именно так, но на самом деле появилась более новая версия этой функции, которая называется функцией стрелок. Вместо использования ключевого слова function мы избавляемся от ключевого слова function и после параметров добавляем стрелку => со знаком равенства, за которой следует знак больше, чем, затем удаляем оператор return, а также фигурные скобки и точку с запятой, и у нас остается:

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

const doubled = arr.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

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

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

Разрушающие объекты

Синтаксис JS для сохранения (или распаковки) значений из массива или свойств объекта в переменных. Мы рассмотрим, как мы можем реструктурировать массив и объект, а также использование оператора rest (...).

Но сначала рассмотрим, как мы привыкли извлекать значения из массива/объекта:

const arr = [1, 2, 3, 4, 5];
const first = arr[0];
const second = arr[1];
console.log(first, second) // 1 2

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};
const name = user.name;
console.log(name); // Igor

Есть более приятный и короткий способ сделать это:

const arr = [1, 2, 3, 4, 5];
const [first, second]  = arr;
console.log(first, second) // 1 2

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};
const { name } = user;
console.log(name) // Igor

Если вы хотите получить остальные значения в отдельном массиве или объекте, вы можете использовать трехточечный оператор rest (...):

const arr = [1, 2, 3, 4, 5];
const [first, second, ...remaining]  = arr;
console.log(first, second, remaining) // 1 2 [3, 4, 5]

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};
const { name, ...rest } = user;
console.log(name); // Igor
console.log(rest); // {id: 10001, email: "igor@mail.ru"}

Мы можем переименовать свойство объекта во время деструктурирования:

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};
const { name: firstName } = user;
console.log(firstName) // Igor

Еще одна интересная особенность деструктурирования заключается в том, что мы можем реструктурировать объекты, передавая объект в качестве параметра. Традиционный подход к использованию свойств объекта в функциях заключается в передаче всего объекта целиком, как в этом примере:

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};

function printName(user) {
  console.log(user.name);
}

printName(user); // Igor

Что, если нам не нужны остальные свойства объекта user, нам нужно только name. Что мы можем сделать вместо этого, так это изменить структуру параметра user:

const user = {
  id: 10001,
  name: 'Igor',
  email: 'igor@mail.ru'
};

function printName({name}) {
  console.log(name);
}

printName(user); // Igor

Оператор spread (...)

Оператор spread работает очень похоже на оператор rest. На самом деле синтаксис spread выглядит точно так же, как синтаксис rest. Но синтаксис spread "раскладывает" массив на его элементы, в то время как синтаксис rest собирает множество элементов и "уплотняет" их в один элемент. Давайте рассмотрим пример:

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

function add(x, y) {
  console.log(x + y);
}

add(arr[0], arr[1]) // 3

Что мы можем сделать вместо этого с помощью этой функции добавления, так это расширить массив, то есть передать все пять значений функции:

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

function add(x, y) {
  console.log(x + y);
}

add(...arr) // 3

Поскольку функция add() принимает только два параметра, остальные три элемента массива будут проигнорированы. Мы будем использовать только первые два значения: x и y.

Мы также можем использовать оператор spread для объединения массивов:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

Что действительно полезно, так это то, что мы можем добавлять больше значений в распространяемые нами массивы:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [0, ...arr1, 3.5, ...arr2];
console.log(combined); // [0, 1, 2, 3, 3.5, 4, 5, 6]

Шаблонные литералы

Шаблонные литералы - это строки, созданные с использованием обратных символов (` и "), которые позволяют использовать встроенные выражения вместо объединения. Встроенные выражения используют синтаксис ${something}, например, `Hello ${userName}` будет иметь тот же вывод, что и 'Hello' + userName.

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

const userName = 'Игорь';
const product = 'Премиум';

console.log('Поздравляем, ' + userName + '!' + ' Вы приобрели ' + product + ' подписку.');
// Поздравляем, Игорь! Вы приобрели Премиум подписку.

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

const userName = 'Игорь';
const product = 'Премиум';

console.log(`Поздравляем ${userName}! Вы приобрели ${product} подписку.`);
// Поздравляем, Игорь! Вы приобрели Премиум подписку.

Нулевой оператор объединения (??)

Оператор объединения с нулевым значением - это функция ECMAScript 2020, и это логический оператор, который возвращает свой правый операнд, когда его левый операнд равен null или не определен, и в противном случае возвращает свой левый операнд.

Давайте рассмотрим пример, в котором это может оказаться полезным. Что, если мы захотим присвоить переменной userName значение по умолчанию? Возможно, это значение было вычислено какой-то другой функцией и могло иметь значение null или не определено. Обычно мы используем переменную defaultName со следующим синтаксисом:

const defaultName = userName != null ? userName : 'user'

Теперь, используя нулевой оператор объединения (leftExpr ?? rightExpr), мы можем сделать то же самое, что и выше, но более сжатым способом. Мы говорим, что если userName не равно null, то будет использоваться значение слева от двух вопросительных знаков, значение userName, а если значение userName равно null или не определено, то будет использоваться значение справа от двух вопросительных знаков, 'user'.

const userName = null;
const product = 'Премиум';
const defaultName = userName ?? 'user'

console.log(`Поздравляем ${defaultName}! Вы приобрели ${product} подписку.`);
// Поздравляем, user! Вы приобрели Премиум подписку

Опциональная цепочка

Еще одна интересная новая функция ECMAScript 2020 - это опциональная цепочка, которая обеспечивает быстрый доступ к значениям null и undefined. Если вы пытаетесь получить доступ к свойству объекта, которое оказалось null или undefined, Javascript выдает ошибку. Чтобы этого не произошло, когда вы не можете быть уверены, определен ли объект (часто при работе со сторонними API), мы можем использовать ?. для чтения свойств объекта без выдачи ошибки, если объект равен null. Например, user?.company?.website будет действовать так же, как user.company.website, однако, если какие-либо значения в цепочке равны null или не определены, он вернет undefined, а не выдаст ошибку.

Мы рассмотрели несколько способов упростить или "подсластить" наш JavaScript-код с помощью функций стрелок, деструктурирования, операторов rest и spread, шаблонных литералов, объединения нулей и опциональной цепочки. Вы можете быть склонны использовать их все, а можете и не использовать, но, безусловно, полезно знать и понимать их при чтении кода других людей, поскольку многие из этих функций получили широкое распространение.