5 фич в ES6, которые можно использовать уже сегодня

es6 нововведения

# Супер Строки (Шаблонные Строки)

ES6 знакомит нас с новым типом строк — Шаблонные Строки (Template Literals.). Я предпочитаю называть их Супер Строками. Супер Строку  нужно  использовать как обычную строку, но вместо одинарных или двойных кавычек используется обратная кавычка.

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

 

МНОГОСТРОЧНЫЕ СТРОКИ

Наконец, появились реальные многострочные строки. Вы подумаете может несколько строк нужно оборачивать в кавычки? Вам не нужно избегать новых строк или как-то их соединять. Просто положите всё прямо в новые строки и все заработает.

 

 ИНТЕРПОЛЯЦИЯ ВЫРАЖЕНИЙ (EXPRESSION  ESCAPING)

Еще одна новая фича — это expression escaping. В супер строку можно положить ${} с любым валидным JavaScript выражением  внутри квадратных скобок. Это намного красивее, чем двойные кавычки, а последняя среда разработки (IDEs) будет красиво подсвечивать синтаксис этих выражений.

Комбинирование expression escaping с поддержкой многострочных строк дает нам классные HTML шаблоны .

 

# Стрелочные функции (Arrow Functions)

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

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

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

Это выглядит хорошо, но было бы неплохо сделать код короче Часть x*2 — это единственная вещь, которая реально работает. Все остальное синтаксическую нагрузку. Со стрелочной функцией мы можем записать это так:

Вау! Это намного короче. Сейчас объясню что произошло. Стрелочная функция  позволяет переписать функцию без фактического слова function. Вместо этого вы ставите знак =>  после скобок, содержащих параметры функции.

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

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

Стрелочные функции могут сделать ваш код очень компактным и мощным. Но есть еще один трюк. Он исправляет контекст (this).

 

ПРОКЛЯТИЕ THIS

В JavaScript волшебная переменная this всегда ссылается на объект, из которого вызывается функция. Поэтому следующий код не делает то, чего вы ожидаете.

Когда вы используете другие объекты контекст this может быть иным в отличие от того, что вы ожидаете. Когда вы передаете функцию где-то еще, чтоб она вызвалась обратно (callback), она может вызвать функцию с другим контекстом (‘this’). Если вы добавляете обработчик событий для кнопки, то кнопка  будет  этим самым ‘this’. Иногда это то, что вы хотите, но в коде выше это не так. Мы хотим чтобы this ссылался на объект App, а не кнопку.

Это давняя проблема в JavaScript. Она настолько распространена, что разработчики создали нечто известное как паттерн self, где вы сохраняете правильную ссылку this, используя временную переменную self. Это не круто, но это работает.

Другой способ решения проблемы — метод bind, он заставляет this  стать конкретным объектом, независимо от того, как функция будет названа позднее.

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

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

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

 

Продолжение следует …

Источник: scotch.io