Frontend | Вопросы собесов on Telegram: “🤔 Какие отличия между новым и старым js? JavaSc…”

🤔 Какие отличия между новым и старым js?

JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии):

🚩Основные отличия между ES5 и ES6+ (ES2015+)

🟠Объявление переменных: `var` vs `let` и `const`
ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

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

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции
ES5: Определение функций с использованием ключевого слова function.

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

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

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

🟠Шаблонные строки
ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;

🟠Деструктуризация
ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};

🟠Промисы
ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

Ставь 👍 и забирай 📚 Базу знаний