В чем разница между старым и новым JavaScript?

Разница между старым и новым JavaScript

Историческая справка

ES5 (ECMAScript 5) был стандартизирован в 2009 году и был основным стандартом на долгие годы. ES6 (ECMAScript 2015) принес революционные изменения, а потом ежегодно появляются новые фичи. Сегодня говорят о "Modern JavaScript" (ES6+).

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

1. Переменные: var vs let/const

ES5 (старый):

var name = 'Ivan';
var age = 25;

if (true) {
  var x = 10;
}
console.log(x); // 10 (доступна вне блока!)

for (var i = 0; i < 3; i++) {}
console.log(i); // 3 (переменная цикла доступна снаружи!)

// Hoisting
console.log(hoisted); // undefined (не ошибка!)
var hoisted = 5;

ES6+ (новый):

let name = 'Ivan';
const age = 25;

if (true) {
  let x = 10;
}
console.log(x); // ReferenceError (правильно!)

for (let i = 0; i < 3; i++) {}
console.log(i); // ReferenceError (переменная привязана к блоку)

// Hoisting
console.log(hoisted); // ReferenceError (Temporal Dead Zone)
let hoisted = 5;

Различия:

• var имеет function scope, let/const имеют block scope
• const не позволяет переназначение (но объект можно менять)
• Нет hoisting проблем с let/const

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

ES5:

function add(a, b) {
  return a + b;
}

var multiply = function(a, b) {
  return a * b;
};

// Проблема с this
const person = {
  name: 'Ivan',
  greet: function() {
    setTimeout(function() {
      console.log(this.name); // undefined (this потерялся!)
    }, 100);
  }
};

ES6+:

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

const multiply = (a, b) => a * b;

// Arrow functions сохраняют this из родительского scope
const person = {
  name: 'Ivan',
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // 'Ivan' (this сохранён!)
    }, 100);
  }
};

// Или полностью на стрелках
const person = {
  name: 'Ivan',
  greet: () => {
    console.log(this.name); // undefined (this = window/global)
  }
};

3. Объекты и деструктуризация

ES5:

const person = {
  name: 'Ivan',
  age: 25,
  city: 'Moscow'
};

// Доступ к свойствам
const name = person.name;
const age = person.age;
const city = person.city;

// Создание объекта
const newPerson = {
  name: name,
  age: age,
  city: city
};

ES6+:

const person = {
  name: 'Ivan',
  age: 25,
  city: 'Moscow'
};

// Деструктуризация
const { name, age, city } = person;

// Shorthand properties
const newPerson = { name, age, city };

// Деструктуризация с переименованием
const { name: personName, age: personAge } = person;

// Spread operator
const extended = { ...person, country: 'Russia' };

4. Строки: конкатенация vs шаблоны

ES5:

const name = 'Ivan';
const age = 25;
const message = 'Привет, ' + name + '! Тебе ' + age + ' лет.';

const multiline = 'Line 1\n' +
                  'Line 2\n' +
                  'Line 3';

ES6+:

const name = 'Ivan';
const age = 25;
const message = `Привет, ${name}! Тебе ${age} лет.`;

const multiline = `
  Line 1
  Line 2
  Line 3
`;

const expression = `2 + 2 = ${2 + 2}`; // 2 + 2 = 4

5. Классы

ES5:

function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' издает звук');
};

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + ' лает');
};

ES6+:

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

  speak() {
    console.log(this.name + ' издает звук');
  }
}

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

  bark() {
    console.log(this.name + ' лает');
  }
}

6. Promises и async/await

ES5 (Callbacks - адский ад):

function getData(callback) {
  setTimeout(() => {
    callback(null, { data: 'Some data' });
  }, 1000);
}

getData((error, result) => {
  if (error) {
    console.error(error);
  } else {
    processData(result, (error, processed) => {
      if (error) {
        console.error(error);
      } else {
        console.log(processed);
      }
    });
  }
});

ES6+ (Promises):

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ data: 'Some data' });
    }, 1000);
  });
}

getData()
  .then(result => processData(result))
  .then(processed => console.log(processed))
  .catch(error => console.error(error));

ES2017+ (async/await):

async function main() {
  try {
    const result = await getData();
    const processed = await processData(result);
    console.log(processed);
  } catch (error) {
    console.error(error);
  }
}

main();

7. Array методы

ES5:

const numbers = [1, 2, 3, 4, 5];

// map
const doubled = numbers.map(function(n) {
  return n * 2;
});

// filter
const evens = numbers.filter(function(n) {
  return n % 2 === 0;
});

// reduce
const sum = numbers.reduce(function(acc, n) {
  return acc + n;
}, 0);

ES6+ (стрелки делают код чище):

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
const sum = numbers.reduce((acc, n) => acc + n, 0);

// Новые методы
const has3 = numbers.includes(3); // true
const firstEven = numbers.find(n => n % 2 === 0); // 2
const allEven = numbers.every(n => n % 2 === 0); // false
const someEven = numbers.some(n => n % 2 === 0); // true

8. Модули

ES5 (CommonJS в Node, нет стандарта в браузере):

const utils = require('./utils');
module.exports = function() { /* ... */ };

ES6+:

import { getName, getAge } from './utils';
import default as Utils from './utils';
export default function() { /* ... */ };
export const helper = () => {};

Сравнительная таблица

Что используется сегодня

В 2024 году ES5 практически не используется в новых проектах. Стандарт:

• ES6 (2015) — обязательно
• ES2016-2020 — широко используется
• ES2021+ — зависит от проекта и браузеров

Большинство проектов используют Babel для трансиляции нового JavaScript в старый для поддержки старых браузеров.

Выводы

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