В чем разница между ES5 и ES6?

В чем разница между ES5 и ES6

Краткий ответ

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

Основные различия

1. Переменные: var → let и const

// ES5
var x = 10;
if (true) {
  var x = 20;
}
console.log(x); // 20 (function scope)

// ES6
let x = 10;
if (true) {
  let x = 20;
}
console.log(x); // 10 (block scope)

const y = 30; // Не переприсваивается
y = 40; // Error: Assignment to constant variable

Преимущества let/const:

• Block scope (вместо function scope)
• Temporal Dead Zone (защита от hoisting ошибок)
• const предотвращает случайное изменение

2. Функции: function → arrow functions

// ES5
var add = function(a, b) {
  return a + b;
};

var obj = {
  value: 10,
  getValue: function() {
    return this.value;
  }
};

// ES6
const add = (a, b) => a + b;

// Arrow функции наследуют this
const obj = {
  value: 10,
  getValue: () => {
    return this.value; // this из внешнего контекста
  },
  getValueProperly() {
    return this.value; // Правильный this
  }
};

3. Классы

// ES5 (прототипное наследование)
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + ' makes sound');
};

// ES6 (синтаксический сахар над прототипами)
class Animal {
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(`${this.name} makes sound`);
  }
  
  static info() {
    return 'This is an animal';
  }
}

class Dog extends Animal {
  speak() {
    super.speak();
    console.log(this.name + ' barks');
  }
}

4. Модули

// ES5 (CommonJS в Node.js)
module.exports = function greet(name) {
  return 'Hello ' + name;
};
const greet = require('./greet');

// ES6 (ESM)
export function greet(name) {
  return `Hello ${name}`;
}
export const PI = 3.14;
export default class User {}

import greet, { PI } from './module.js';

5. Промисы и асинхронность

// ES5 (только callbacks)
function fetchData(callback) {
  setTimeout(() => {
    callback(null, 'Data');
  }, 1000);
}

fetchData((err, data) => {
  console.log(data);
});

// ES6 (Promises)
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data'), 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err));

// Async/await (ES2017)
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

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

// ES5
var person = { name: 'John', age: 30 };
var name = person.name;
var age = person.age;

// ES6
const { name, age } = person;
const [first, second] = [1, 2, 3];

// В функциях
const greet = ({ name, age }) => `Hello ${name}, you are ${age}`;

7. Строки и шаблоны

// ES5
var msg = 'Hello ' + name + ', you are ' + age + ' years old';

// ES6 (template literals)
const msg = `Hello ${name}, you are ${age} years old`;
const multiline = `Line 1
Line 2
Line 3`;

8. Дополнительные улучшения

• Default parameters: function greet(name = 'Guest') {}
• Rest параметры: (...args) => {}
• Spread оператор: [...arr1, ...arr2]
• for...of loop: for (const item of array) {}
• Map/Set: новые структуры данных
• Object.assign(): слияние объектов

Практическое применение в Node.js

// Современный Node.js код (ES6+)
const express = require('express');
const app = express();

app.get('/users/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const user = await User.findById(id);
    res.json(user);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Вывод

ES6 превратил JavaScript из функционального языка в полноценный объектно-ориентированный язык. Все современные проекты используют ES6+. ES5 сегодня — только историческая справка.