- Встраиваемый расширяемый не имеющий средств ввода-вывода ЯП - 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]) ```