obsidian/Веб/Фронтенд/ECMAScript.md

- Встраиваемый расширяемый не имеющий средств ввода-вывода ЯП
- 5 примитивных типов данных - Number, String, Boolean, Null, Undefined
- Объектный тип данных - Object
- 15 различных видов инструкций
> [!warning] Дальнейшие примеры будут до стандарта ES6, то есть не совсем актуальные, использование `var` - моветон в наше время. Также после 2020 года уже 7 примитивов - еще Symbol и BigInt
## Особенности языка
- Блок не ограничивает область видимости переменной:
```JavaScript
function foo() {
	var sum = 0;
	for (var i = 0; i < 42; i += 2) {
		var tmp = i+2;
		sum += i*tmp;
	}
	for (var i = 1; i < 42; i += 2) {
		sum += i*i;
	}
	alert(tmp); // вне зоны
	return sum;
}
foo();
```
- Если переменная объявлена вне функции, то она в глобальной области видимости
```JavaScript
var a = 42;
function foo() {
	alert(a);
}
foo();
```
> [!hint] `alert()` вызывает всплывающее окно, синхронный и блокирующий метод - блокирует Event Loop
- Функция - это тоже объект
```JavaScript
function sum(a, b) {
	return a+b;
}
var sum2 = function(a, b) {
	return a+b;
}
var sum3 = new Function("a", "b", "return a+b;"); // без комментариев
```
## ES6
- Новая версия, выпущенная в 2015 году
- Добавляет синтаксис
> [!warning] Дальше примеры для ES6 и новее 
## let и const
Два новых ключевых слова
`let` - переменная с областью видимости в блоке
`const` - константа
## Форматирование вывода
```JavaScript
const first = 'Adrian';
const last = 'Mejia';
console.log(`Your name is ${first} ${last}.`);
```
> [!hint] Нужны косые кавычки ``
## Деструктуризация
- Особый синтаксис присваивания, при котором можно присвоить массив или объект сразу нескольким переменным, разбив его на части
```JavaScript
const array = [1, 2, 3, 4];
const [first, ,third] = array;
console.log(first, third); // 1 3
```
- Обмен значениями
```JavaScript
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
```
- Сопоставление параметров
```JavaScript
const user = {firstName: 'Adrian', lastName: 'Mejia'};
function getFullName({ firstName, lastName }) {
	return `${firstName} ${lastName}`;
}
console.log(getFullName(user)); // Adrian Mejia
```
> [!hint] { } - создание объекта, аналог хэш-мапы 
- Деструктуризация объекта
```JavaScript
function settings() {
	return { display: { color: 'red' }, keyboard: { layout: 'querty' } };
}

const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();

console.log(displayColor, keyboardLayout); // red querty
```
> [!hint] {} до знака равно - распаковка объектов, а не их создание
## Классы и объекты
```JavaScript
class Animal {
	constructor(name) {
		this.name = name;
	}
	speak() {
		console.log(this.name + ' makes a noise.');
	}
}
const animal = new Animal('animal');
animal.speak(); // animal makes a noise.
```
## Наследование
```JavaScript
class Lion extends Animal {
	speak() {
		super.speak();
		console.log(this.name + ' roars.');
	}
}
const lion = new Lion('Simba');
lion.speak();
// Simba makes a noise.
// Simba roars.
```
## Promise
Это специальный объект, который представляет собой результат асинхронной операции
JavaScript - однопоточный, используется Event Loop в одном потоке
До промисов был ад колбэков
```JavaScript
// Старый ад (Pyramid of Doom):
getUser(userId, function(user) {
    getOrders(user.id, function(orders) {
        getOrderDetails(orders[0].id, function(details) {
            // И так до бесконечности вправо...
        });
    });
});
```
#### Состояния промиса
1. `pending` (ожидание) - операция запущена, но еще не завершилась
2. `fulfilled` (выполнено усешно) - вернул результат
3. `rejected` (отклонено с ошибкой) - произошла ошибка
#### Работа с промисом
`.then()`, `.catch()`, `.finally()`
```JavaScript
fetch("https://api.com/user/1") // отправка запроса
	.then(response => response.json())
	.then(user => {
		console.log(user.name);
	})
	.catch(error => { // ошибка на любом этапе
		console.error(error);
	})
	.finally(() => { // выполнится всегда
		console.log('Done');
	})
```
Свой промис
```JavaScript
function printAfterTimeout(string, timeout) {
	return new Promise((resolve, reject) => {
		setTimeout(function(){
			resolve(string);
		}, timeout);
	});
}

printAfterTimeout('Hello', 2e3)
	.then((result) => {
		console.log(result);
		return printAfterTimeout(result + 'Reader', 2e3);
	}).then((result) => {
		console.log(result);
	});
```
> [!hint] В новый промис передается две функции `resolve` - при успехе и `reject` - при ошибке
## Стрелочные функции
```JavaScript
$('.btn').click((event) => this.sendData());
```
## Цикл с итератором
```JavaScript
var array = ['a', 'b'];
for (var i = 0; i < array.length; i++) {
	var el = array[i];
	console.log(el);
}
array.forEach(function (el) {
	console.log(el)
});
array.forEach((el) => console.log(el));
for (const el of array) {
	console.log(el);
}
```
## Параметры по умолчанию
```JavaScript
function point(x=0, y=-1, isFlag=true) {
	...
}
```
## Rest-параметры
Типо `vararg` в джаве
```JavaScript
function printf(format, ...params) {
	...
}
```
### Операция spread
```JavaScript
Math.max(...[2,100,1,6,43]);

const array1 = [1,2,3];
const array2 = ['a', 'b'];
const array3 = [false, true];
console.log([...array1, ...array2, ...array3])
```