Удобные компактные JavaScript-конструкции, которыми вы, возможно, не пользуетесь

С выходом новых версий JavaScript в языке появляется всё больше и больше «синтаксического сахара». Материал, перевод которого мы сегодня публикуем, посвящён обзору удобных конструкций JavaScript, которые компактны и приятны глазу. В частности, речь пойдёт о тернарном операторе сравнения, о сокращённой форме объявления нескольких переменных, о стрелочных функциях, о значениях параметров функций, задаваемых по умолчанию, и о многом другом.

Тернарный оператор

Тернарный условный оператор позволяет записывать условия, задаваемые обычно конструкцией if…else, в более сжатом виде.

При использовании if…else некий фрагмент кода может выглядеть так:

const x = 20;
let grade;
if (x >= 50) {
  grade = "pass";
} else {
  grade = "fail";
}

Его можно переписать:

const x = 20;
let grade = (x >= 50) ? "pass" : "fail";

И там и там проверяется число, записанное в константу x. Если оно больше или равно 50 — в переменную grade попадает значение pass. Если нет — значение fail.

Тернарный оператор позволяет сократить и запись вложенных конструкций if…else:

const x = 20;
let grade = (x >= 50) ? "pass" : (x >= 25) ? "good fail" : 'bad fail';

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

const x = 20;
let grade;
if (x >= 50) {
  grade = "pass";
} else {
  if (x >= 25) {
    grade = "good fail";
  } else {
    grade = "bad fail";
  }
}

Установка значений, используемых по умолчанию

Если значение некоей переменной признаётся системой как ложное, то можно, в операции присваивания значения этой переменной другой переменной, задать значение, используемое по умолчанию:

let x;
let y = x || 10;

Это даст те же результаты, что и следующий фрагмент кода:

let x;
let y;
if (x === undefined || x === null || x === 0 || x === '' || isNaN(x)) {
  y = 10;
} else {
  y = x;
}

Дело тут в том, что при обработке выражения x || 10, если x — это ложное значение (undefined, null, 0, пустая строка, NaN), тогда в y будет записано 10.

Сокращённая форма объявления нескольких переменных, содержащих одно и то же значение

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

let x = y = z = 5;

Это будет то же самое, что и такое их объявление:

let x = 5;
let y = 5;
let z = 5;

Всё это работает благодаря тому, что сначала 5 присваивается переменной z, потом значение z присваивается y, а потом значение y присваивается x.

Краткая проверка значения на истинность

Краткая проверка некоего значения на истинность, то есть на то, что оно не равняется undefined, null, 0, пустой строке или NaN, может быть оформлена так:

if (x){
 console.log('x is truthy')
}

Здесь выясняется, является ли значение x истинным, после чего, если это так, вызывается команда для вывода соответствующего сообщения в консоль.

Удобства цикла for...of

С момента принятия стандарта ES6 в распоряжении программистов оказался цикл for…of, который позволяет перебирать элементы массивов или массивоподобных объектов. Речь идёт об объектах Map и Set, об объекте arguments. Этот цикл умеет работать с генераторами, с итераторами, с любыми объектами, имеющими метод [Symbol.iterator]. Вот как выглядит использование цикла for…of для перебора элементов массива:

let fruits = ['apple', 'orange', 'grape'];
for (let fruit of fruits) {
  console.log(fruit);
}

При таком подходе код получается чище, чем при использовании обычного цикла for и индексов элементов. Кроме того, цикл for…of работает не только с массивами. Вот, например, как выглядит его работа с генераторами:

let fruits = function*() {
  yield 'apple';
  yield 'orange';
  yield 'fruits';
}
for (let fruit of fruits()) {
  console.log(fruit);
}

Метод Array.prototype.forEach()

Этот метод массивов позволяет перебирать их элементы. Надо отметить, что он медленнее циклов. Вот пример его использования:

let fruits = ['apple', 'orange', 'grape'];
fruits.forEach((fruit, index) => console.log(fruit));

Экспоненциальная запись чисел

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

1e0

1

1e1

10

1e2

100

1e3

1000

Этот список можно продолжать.

Разделители разрядов чисел

В свежих версиях браузеров можно использовать символ подчёркивания для разделения разрядов чисел. Это облегчает восприятие длинных чисел. Например — 100 миллионов при таком подходе можно записать так:

100_000_000

При этом символы подчёркивания могут быть расположены внутри числа где угодно.

Сокращённая форма объявления и инициализации свойств объектов

Вот как объектам обычно назначают свойства, имена которых аналогичны именам неких переменных:

const foo = 1,
  bar = 2;
const obj = {
  foo: foo,
  bar: bar
};

То же самое можно переписать так:

const foo = 1,
  bar = 2;
const obj = {
  foo,
  bar
};

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

Стрелочные функции

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

() => 1

Вот более длинное объявление аналогичной функции:

() => {
  return 1
}

Одной из особенностей стрелочных функций является тот факт, что у них нет собственного значения this. А значит — такие функции можно использовать там, где не нужно работать со значением this, которое есть у обычных функций.

Значения параметров функций, задаваемые по умолчанию

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

const add = (a = 1, b = 2) => {
  return a + b
}

Это равносильно такой конструкции:

const add = (a, b) => {
  if (typeof a === 'undefined') {
    a = 1;
  }
  if (typeof b === 'undefined') {
    b = 2;
  }
  return a + b
}

Итоги

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

Особо хотелось бы отметить цикл for…of, который весьма полезен тем, что позволяет перебирать не только массивы, но и другие объекты. Его возможности превосходят возможности других циклов.

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

Уважаемые читатели! Известны ли вам ещё какие-нибудь новые возможности JavaScript, которые позволяют более компактно записывать то, что раньше требовало больших объёмов кода?