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

Конст и пусть

Переменная, объявленная с использованием «var», может быть переназначена, что делает код неясным и подверженным ошибкам.

var veggie = 'Broccoli';
veggie = 10;
console.log(veggie); // 10

Для борьбы с этим в ES6 введена «const».

const veggie = 'Broccoli';
veggie = 10; // TypeError: invalid assignment to const `veggie'

ES6 также представил «let». При использовании «var» область видимости «i» не привязана к фигурным скобкам (блоку). Это часто было причиной путаницы и ошибок.

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

Путаница, связанная с областью видимости и переменными, была устранена с помощью «let» и «const» с использованием области видимости блока. «Let» отличается от «const», поскольку мы можем переназначить его с новым значением, что делает его идеальным, например, для циклов for (или циклов for-of). В приведенном выше примере, переписанном с использованием let, возникает следующая ошибка, поскольку область видимости ограничена блоком.

for (let i = 0; i < 10; i++) {
// console.log(i)
}
console.log(i) // ReferenceError: i is not defined

Строки шаблона

Старый способ смешивания строк и переменных в JavaScript быстро стал беспорядочным.

var someVariable = 'World';
var someText = 'Hello ' + someVariable;
console.log(someText); // Hello World

Тот же пример с использованием строк шаблона ES6.

const someVariable = 'World';
const someText = `Hello ${someVariable}`;
console.log(someText); // Hello World

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

Стрелочные функции являются сокращением для function() с той разницей, что «this» не привязано к самой функции, а скорее к охватывающей области.

const object = {
  name: 'Rick Deckard', 
  arrowGetName: () => this.name,
  regularGetName: function() {return this.name}
}
console.log(object.arrowGetName()); // 
console.log(object.regularGetName()); // Rick Deckard

У стрелочной функции более короткий синтаксис. Итак, вместо того, чтобы писать:

function add(params) {
  return params + 1;
}
add(1); 
// 2

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

const add = (params) => params + 1
add(1);
// 2

Разрушение объектов

Старый способ создания переменных свойств внутри объекта быстро стал уродливым и повторяющимся.

var person = {first: 'Brad', last: 'Pitt', profession: 'actor'};
var first = person.first;
var last = person.last; 
var profession = person.profession;
console.log(first); // Brad

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

const person = {first: 'Brad', last: 'Pitt', profession: 'actor'}; 
const {first, last, profession} = person;
console.log(first); // Brad

Асинхронный / ожидание

Эволюция обработки ответов на запросы GET - это путь от «ада обратных вызовов» к обещаниям и новейшей функции ES7 async / await. Целью каждой итерации было улучшение читабельности кода. Поскольку запрос GET является асинхронным (то есть JavaScript не ждет ответа перед выполнением другого кода), цель async / await - сделать код более синхронным, поскольку его легче читать.

«Ад обратного звонка». Псевдокод, показывающий, как обратные вызовы были вложены для обработки нескольких ответов на запросы.

function fetchUsers() {
  const url = 'https://jsonplaceholder.typicode.com/users';
  request(url, function(response) {
    return response.json();
  }, function(json) {
    console.log(json);
  });
}

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

function fetchUsers() {
  const url = 'https://jsonplaceholder.typicode.com/users';
  fetch(url)
    .then((response) => response.json())
    .then((json) => console.log(json));
}

Функция async / await в ES7 заставляет код выглядеть синхронным (выполняется построчно). Ключевое слово async необходимо использовать перед объявлением функции. Затем мы можем использовать «await», чтобы заставить код ждать ответа, прежде чем перейти к следующей строке. Это так просто.

async fetchUsers() {
  const url = 'https://jsonplaceholder.typicode.com/users';
  const response = await fetch(url);
  const json = await response.json();
  console.log(json);
}

Модули

ES6 имеет встроенную поддержку модулей. Модули в JavaScript ранее были возможны только с использованием сторонних библиотек, таких как CommonJS и AMD (определение асинхронного модуля). Существует множество вариантов импорта / экспорта модуля, я рассмотрю самые распространенные.

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

const movies = ['Blade Runner', 'Matrix', 'Star Trek'];
// Export it like this
export default movies; // ['Blade Runner', 'Matrix', 'Star Trek']
// And import it like this (You can use any variable)
import movieCollection from './movies';

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

export function handleScroll() {
  // Do stuff
}
export function formatTime() {
  // Do stuff
}
export function getUsers() {
  // Do stuff
}

У нас есть несколько различных вариантов импорта именованных экспортов.

// Import everything as methods of an object
import * as helpers from './helpers';
// And use it like this
helpers.handleScroll();
helpers.formatTime();
helpers.getUsers();
// Cherry pick only the things we need
import {formatTime} from './helpers';
formatTime();

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