Какие нововведения были в ES6?

Какие нововведения были в ES6 (ECMAScript 2015)

Введение

ES6 (ECMAScript 2015) — это самое значительное обновление стандарта JavaScript с момента его создания. Оно принесло множество синтаксических улучшений и новых функций, которые кардинально изменили способ разработки на JavaScript.

1. Переменные let и const

До ES6 существовала только var с функциональной областью видимости:

// До ES6
var x = 10;
if (true) {
  var x = 20;
}
console.log(x); // 20 (перезаписало внешнее)

// С ES6
let x = 10;
if (true) {
  let x = 20;
}
console.log(x); // 10 (блочная область видимости)

const PI = 3.14; // Константа, не может быть переаспределена

• let: блочная область видимости, может быть переаспределена
• const: блочная область видимости, не может быть переаспределена

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

Новый синтаксис для функций, который также привязывает this:

// До ES6
const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) { return n * 2; });

// С ES6
const doubled = numbers.map(n => n * 2);

// Со скобками для тела функции
const greet = (name) => {
  console.log(`Hello, ${name}`);
  return `Hi ${name}`;
};

// Важно: this привязывается к контексту, где определена стрелочная функция
const user = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // "Alice" - this из контекста user
    }, 100);
  }
};

3. Template Literals (Шаблонные строки)

Удобная работа со строками и интерполяцией:

const name = "Alice";
const age = 25;

// До ES6
const message = "Меня зовут " + name + ", и мне " + age + " лет";

// С ES6
const message = `Меня зовут ${name}, и мне ${age} лет`;

// Многострочные строки
const multiline = `
  Первая строка
  Вторая строка
  Третья строка
`;

4. Деструктуризация (Destructuring)

Удобное извлечение значений из объектов и массивов:

// Деструктуризация объектов
const person = { name: "Alice", age: 25, city: "Moscow" };
const { name, age } = person;
console.log(name, age); // Alice 25

// С переименованием
const { name: personName } = person;

// Деструктуризация массивов
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second, rest); // 1 2 [3, 4, 5]

// В параметрах функций
function printPerson({ name, age }) {
  console.log(`${name} is ${age} years old`);
}
printPerson(person);

5. Классы (Classes)

Синтаксический сахар для создания конструкторов и методов:

// До ES6
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name);
};

// С ES6
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name);
  }

  static info() {
    return "Это класс Animal";
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  speak() {
    console.log(this.name + " лает!");
  }
}

6. Модули (Modules)

Оффициальная система модулей для JavaScript:

// export.js
export const getName = () => "Alice";
export class User {
  constructor(name) {
    this.name = name;
  }
}
export default function() {
  return "default export";
}

// import.js
import greet, { getName, User } from './export.js';

const user = new User(getName());

7. Обещания (Promises)

Структурированное управление асинхронными операциями:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

promise
  .then(result => console.log(result))
  .catch(error => console.error(error));

8. Spread оператор

Распространение элементов массива или свойств объекта:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

function sum(a, b, c) {
  return a + b + c;
}
sum(...[1, 2, 3]); // 6

9. Default параметры (Default Parameters)

Значения по умолчанию для параметров функций:

const greet = (name = "Guest") => {
  console.log(`Hello, ${name}!`);
};

greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!

10. Rest параметры

Сборка оставшихся параметров в массив:

function sum(first, ...numbers) {
  return first + numbers.reduce((a, b) => a + b, 0);
}

sum(1, 2, 3, 4, 5); // 15

11. Улучшенные литералы объектов

const name = "Alice";
const age = 25;

// До ES6
const person = {
  name: name,
  age: age,
  greet: function() {
    console.log("Hello");
  }
};

// С ES6
const person = {
  name,
  age,
  greet() {
    console.log("Hello");
  }
};

Заключение

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