ES2015

ES2015 внес огромное количество изменений. Большая часть изменений — различный синтаксический сахар, который позволяет писать код короче и проще.

const и let

Помимо объявления переменных через var, появился новый способ объявления переменных через const и let Отличия от var:

• Область видимости таких переменных — блок, а не функция.
• Переменные не всплывают наверх, попытка обращения к переменной до её объявления выдаст ошибку (в случае с var обращение работает, но значение будет undefined).

Отличие const от let cостоит в том, что значение переменной заданной через const нельзя переназначить. Но его можно мутировать. То есть, константным является не значение, а ссылка:

const a = [1, 2, 3];
a.push(4); // все ОК, мутировать значения допускается.
a = [4, 5, 6]; // ошибка, переназначить нельзя

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

Массивы

• Появилась возможность присвоить содержимое массива нескольким отдельным переменным, разбив его на часть.

  var array = [1, 2, 3]
  // ES5 и ранее
  var first = array[0];
  var second = array[1];
  // ES2015 и позднее:
  var [first, second] = array;
  

• Если часть значений не нужна, то их можно игнорировать, оставив пустое значение вместо имени переменной

  var array = [1, 2, 3]
  // ES5 и ранее
  var first = array[0];
  var third = array[2];
  // ES2015 и позднее:
  var [first, , third] = array;
  

• Если нам нужно получить все последующие значения массива, то можно использовать оператор spread

  var array = [1, 2, 3];
  // ES5 и ранее
  var first = array[0];
  var rest = array.slice(1);
  // ES2015 и позднее:
  var [first, ...rest] = array;
  

• В деструктуризации можно задать значение по умолчанию

  var array = [1, 2]
  // ES5 и ранее
  var third = array[2] === undefined ? 5 : array[2];
  // ES2015 и позднее:
  var [,,a = 5] = arr;
  

• Деструктуризация может быть вложена друг в друга.

  var array = [[1, 2], 3];
  // ES5 и ранее
  var one = array[0][0];
  var two = array[0][1];
  var three = array[1];
  // ES2015 и позднее:
  var [[one, two], three] = array;
  

  Обратите внимание, что если нулевой элемент внешнего массива — не массив, то будет ошибка (в обоих вариантах). Поэтому необходимо это учитывать (например, через значение по умолчанию для нулевого элемента)

Объекты

• Появилась возможность присвоить содержимое объекта нескольким отдельным переменным, разбив его на часть. Обратите внимание, что имя переменной совпадает с именем ключа объекта.

  var object = {
    a: 1,
    b: 2,
  }
  // ES5 и ранее
  var a = object.a;
  var b = object.b;
  // ES2015 и позднее:
  var {a, b} = object;
  

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

  var object = {
    a: 1,
    b: 2,
  }
  // ES5 и ранее
  var aProperty = object.a;
  var bProperty = object.b;
  // ES2015 и позднее:
  var {a: aProperty, b: bProperty} = object;
  

• Можно указывать значение по умолчанию для переменной:

  var object = {
    a: 1,
  }
  // ES5 и ранее
  var a = object.a === undefined ? 5 : object.a;
  // ES2015 и позднее:
  var {a = 5} = object;
  

• Другое имя переменной и значение по умолчанию можно совмещать:

  var object = {
    a: 1,
  }
  // ES5 и ранее
  var aProperty = object.a === undefined ? 5 : object.a;
  // ES2015 и позднее:
  var {a: aProperty = 5} = object;
  

• Деструктуризация объекта также может быть вложенной и необходимо учитывать возможные ошибки.

  var object = {
    a: {
      b: 1,
      c: 2,
    },
    d: 3
  }
  // ES5 и ранее
  var b = object.a.b;
  var c = object.a.c;
  var d = object.d;
  // ES2015 и позднее:
  var {a: {b, c}, d} = object;
  

• Spread оператор для объектов не входит в стандарт ES2015, но есть отдельное предложение для этого

Функции

• Появилась возможность задавать параметрам функции значения по умолчанию, которые могут быть выражениями. Учитывайте, что значение по умолчанию берется только когда аргумент равен undefined (передан явно или аргумент не передан вообще). Если передано любое другое значение (включая null), то значение по умолчанию не будет взято.

  function example(index = 0, array = getDefaultArray()) {
    // ...
  }
  

• Можно использовать оператор spread вместо обращения к arguments. Обратите внимание, что spread должен быть последним в списке аргументов. Он не может быть в его середине.

  function example(a, b, ...rest) {
    // ...
  }
  

• В параметрах функции можно использовать деструктуризацию

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

В ES2015 также появился новый короткий синтаксис для объявления функции.

const a = (item) => item + 1;
const b = (item) => {
  return item + 1;
};
const c = function(item) {
  return item + 1;
};

У стрелочных функций есть 2 вида записи:

1. Тело функции может состоит только из одного выражения. Тогда фигурные скобки вокруг тела не нужны и это же выражение возвращается из функции — указывать return явно не нужно.

2. С фигурными скобками. Тогда тело функции такое же, как и у обычной функции, нужен явный return.

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

const a = (a, b) => { // ошибка, интерпретатор считает, что это тело функции
  property: a,
  property2: b,
};
const a = (a, b) => ({ // всё ОК
  property: a,
  property2: b,
});

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

У строк появился новый вид записи, помимо двойных и одиночных кавычек теперь строки можно записыть через обратные кавычки (`). У таких строк есть несколько особенностей:

• Эти строки могут быть многострочными, но в строку будет включены пробелы (индентация) и сам символ переноса строки.

  const string = `строка
  игнорирует
  переносы каретки`;
  

• В эти строки можно вставлять выражения через ${}. Результат вычисления будет записан в эту строку.

  const a = 5;
  const b = 10;
  const result = `${a} + ${b} = ${a + b}` // '2 + 3 = 5'
  

Подробное описание ES2015