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

Пожалуй, так оно и было — язык с кучей проблем совместимости браузеров, "непонятным" ООП на прототипах, всплытием переменных и странным this. Самая крутая библиотека — jQuery, а самое крутое приложение — почтовый веб клиент от Гугл.

Однако, времена меняются и сегодня JavaScript используется как для построения сложных web–интерфейсов, так и во многих других сферах, начиная с утилит автоматизации и до серверного node.js.

Предлагаю к рассмотрению 3 самые удачные, по мнению автора, синтаксические конструкции в современном JS.

№1 Стрелочные лямбда функции 

() => {}, () => ()

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

// arrow-function: самая обычная функция:
square = num -> num * num // -> function square (num) { return num * num }

// fat-arrow-function: функция с замыканием контекста:
Something = () ->
  @fired = false // то же что this.fired = false
  setTimeout () =>
    @fired = true
  , 1000

// получаем что-то вроде
function Something () {
  this.fired = false
  // замыкаем контекст с помощью IIFE
  setTimeout((function (_this) {
    _this.fired = true
  })(this), 1000)
}

Конечно, во времена первых версий CoffeeScript, контекст у таких функций не отсутствовал, а подменялся родительским, что можно заметить в результате компиляции.

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

Вот небольшой пример, как это выглядит на JavaScript:

/*
  Как писали до появления стрелочных функций
*/
this.methodName = function () {
  // сохраняем ссылку на текущий контекст в переменной self
  var self = this
  setInterval(function () {
    self.innerText = ++self._elapsedSeconds
  }, 1000)
}

/*
  Используем стрелочные функции
*/
this.methodName = function () {
  setInterval(() => {
    this.innerText = ++this._elapsedSeconds
  }, 1000)
}

Отсутствие контекста вносит свои ограничения для этих функций:

Синтаксис стрелочных функций позволяет также не использовать в ряде случаев ключевое слово return для возвращения значений.

Таким образом мы можем возвращать результат вычислений на месте: 

(a, b) => a + b — эквивалентно (a, b) => { return a + b }

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

() => { return { a: 'b' } } — тут всё понятно

 () => ({ a: 'b' }) ← обратите внимание на оборачивающие скобки

Как видите, стрелочные функции позволяют не только писать более короткий код, но и более производительный, ведь такая функция занимает гораздо меньше ресурсов за счёт отсутствия собственного контекста.

№2 Деструктуризация

const [ x ] = [ a, b, c ]

Помимо извлечения из массивов, деструктуризацию можно применять и к объектам!

Более того, извлечение из объектных литералов допускает переименование извлекаемых свойств, а также задание значений по умолчанию!

const { a: myField = 'default_value' } = { a: 'Hello world!' }

извлекаем свойство a
в константу myField
со значением по умолчанию 'default_value'

№3 Оператор многоточие (spread–operator)

const [ first, ...rest ] = [ a, b, c ]

const [ first, ...rest ] = [ 0, 1, 2, 3, 4 ]

console.log(first) // 0

console.log(rest) // [ 1, 2, 3, 4 ]

Вот так можно извлекать данные из объектов с помощью spread–оператора:

const employee = {
  name: 'Петя',
  age: 30,
  salary: 30_000
}

const { salary, ...person } = employee

// salary -> 30_000
// person -> { name: 'Петя', age: 30 }

// благодаря spread-оператору мы объединяем все аргументы в массиве args
const sum = (...args) => 
    args.reduce((prev, current) => prev + current, 0)

// примеры вызова функции
sum(1, 2, 3, 4, 5) // -> 15
sum(1, 2) // -> 3

Вообще, этот оператор нашёл широкое применение. К примеру, теперь можно легко объединять массивы или объекты, а также распаковывать типы данных вроде Set:

const array1 = [ 0, 1, 2 ]
const array2 = [ 2, 3, 4 ]

// конкатенация массивов
const arrays = [ ...array1, ...array2 ] // [ 0, 1, 2, 2, 3, 4]

// лайфхак: убираем все дубли с помощью Set
const unique = [ ...(new Set(arrays)) ]

const obj1 = { a: 'a', b: 'b' }
const obj2 = { b: 'b2', c: 'c2' }

// объединение объектов
// свойства перезаписываются каждым последующим объектом!
const merged = { ...obj1, ...obj2 } // -> { a: 'a', b: 'b2', c: 'c2' }