Возможности JS ES6

В этой статье вы узнаете, какие важнейшие фичи появились в JavaScript после выхода ES6 в 2015 году.

JavaScript ES6 (еще называют ES2015 или ECMAScript 2015) — версия языка JavaScript, которая вышла в 2015 и внесла в язык очень много серьезных и полезных изменений.

Документ, который описывает стандарт ES6, состоит из 600 страниц. Для сравнения: описание предыдущей версии ES5 составляет 250 страниц.

В этой статье — коротко о главных изменениях ES6.

Ключевое слово let

Ключевое слово let используется для объявления переменных. До версии ES6 это делалось с помощью ключевого слова var.

let создает переменные блочной области видимости. 

// переменная, созданная с помощью let
let name = 'Маша';
{
    // эта переменная "видна" только внутри этого блока
    let name = 'Андрей';

    console.log(name); // Вывод: Андрей
}
console.log(name); // Вывод: Маша

Ключевое слово const

Ключевое слово const позволяет объявлять константы — переменные, значения которых менять нельзя. 

// изменить значение этой константы нельзя
const name = 'Маша';

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

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

Например, вот эту функцию:

//  функциональное выражение
let x = function(x, y) {
   return x * y;
}

можно записать с помощью стрелочной функции так:

// функциональное выражение, записанное через стрелочную функцию
let x = (x, y) => x * y;

Классы

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

class Person {
  constructor(name) {
    this.name = name;
  }
}

Для создания класса используется ключевое слово class. Свойства задаются в конструкторе.

Вот, как создать объект с помощью класса: 

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person1 = new Person('Андрей');

console.log(person1.name); // Вывод: Андрей

Необязательная параметры функции

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

function sum(x, y = 5) {
    // если не передать аргумента y, 
    // по умолчанию y будет равно 5
    console.log(x + y);
}

sum(5); // Вывод: 10
sum(5, 15); // Вывод: 20

Если опустить второй аргумент y, он по умолчанию будет равен 5.

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

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

Раньше приходилось использовать конкатенацию строк, чтобы добавить в какую-нибудь строку переменные:

const first_name = "Андрей";
const last_name = "Карпов";

console.log('Привет, ' + first_name + ' ' + last_name);

После ES6 можно использовать шаблонные строки:

const first_name = "Андрей";
const last_name = "Карпов";

console.log(`Привет, ${first_name} ${last_name}`);

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

Специальный синтаксис деструктуризации (ее еще называют деструктуризирующим присваиванием) позволяет присвоить массив или объект сразу нескольким переменным, разбив его на части.

Раньше приходилось делать так:

const person = {
    name: 'Маша',
    age: 25,
    gender: 'Ж'    
}

let name = person.name;
let age = person.age;
let gender = person.gender;

console.log(name); // Вывод: Маша
console.log(age); // Вывод: 25
console.log(gender); // Вывод: Ж

После ES6 такой код стало возможно записать следующим образом:

const person = {
    name: 'Маша',
    age: 25,
    gender: 'Ж'    
}

let { name, age, gender } = person;

console.log(name); // Вывод: Маша
console.log(age); // Вывод: 25
console.log(gender); // Вывод: Ж

Импорт и экспорт

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

Представьте, что у вас два JS-файла: contact.js и home.js. Вам нужно использовать функцию contact() из файла contact.js в файле home.js.

Для этого сначала нужно экспортировать функцию из файла contact.js:

// экспортируем функцию
export default function contact(name, age) {
    console.log(`Имя: ${name}. Возраст: ${age}.`);
}

Затем нужно импортировать эту функцию в файл home.js:

import contact from './contact.js';

contact('Маша', 25);

Вывод

Имя: Маша. Возраст: 25

Промисы

Promise (обычно их называют «промисы») предоставляют удобный способ организации асинхронного кода.

// возвращаем промис
let countValue = new Promise(function (resolve, reject) {
   reject('Промис отклонен'); 
});

// выполняется, когда промис успешно выполнен
countValue.then(
    function successValue(result) {
        console.log(result); // Вывод: Promise resolved
    },
 )

Остаточные параметры

function show(a, b, ...args) {
  console.log(a); // Вывод: один
  console.log(b); // Вывод: два
  console.log(args); // Вывод: ["три", "четыре", "пять", "шесть"]
}

show('один', 'два', 'три', 'четыре', 'пять', 'шесть')

В этом примере мы передали оставшиеся параметры с помощью синтаксиса остаточных параметров ....

С помощью того же синтаксиса ... можно скопировать элементы в один общий массив. Это уже называется spread syntax.

let arr1 = ['один', 'два'];
let arr2 = [...arr1, 'три', 'четыре', 'пять'];
console.log(arr2); // Вывод: ["один", "два", "три", "четыре", "пять"]