🤔 Что сделать, чтобы settimeout выполнился позже ?

Функция setTimeout используется для выполнения кода через определенное количество времени. Иногда возникает необходимость, чтобы setTimeout выполнялся позже или задержка была увеличена. Для этого можно изменить время задержки, переданное в качестве второго аргумента функции setTimeout.

🚩Пример использования setTimeout с увеличением задержки

🟠Если вам нужно, чтобы код выполнялся через более длительное время, вы можете просто увеличить значение задержки (в миллисекундах).

// Выполнить функцию через 2 секунды (2000 миллисекунд)
setTimeout(() => {
  console.log('Прошло 2 секунды');
}, 2000);

// Выполнить ту же функцию через 5 секунд (5000 миллисекунд)
setTimeout(() => {
  console.log('Прошло 5 секунд');
}, 5000);

🟠Динамическое изменение времени задержки
Если время задержки должно изменяться динамически в зависимости от определенных условий или переменных, вы можете использовать переменные для управления задержкой.

let delay = 3000; // Задержка в миллисекундах (3 секунды)

// Выполнить функцию через динамически заданное время
setTimeout(() => {
  console.log(`Прошло ${delay / 1000} секунд`);
}, delay);

🟠Увеличение задержки с течением времени
Иногда может потребоваться увеличивать задержку с течением времени или при выполнении определенных условий.

let delay = 1000; // Начальная задержка в миллисекундах (1 секунда)
let increment = 1000; // Увеличение задержки на 1 секунду

function delayedFunction() {
  console.log(`Функция выполнена после ${delay / 1000} секунд`);
  delay += increment; // Увеличить задержку
  setTimeout(delayedFunction, delay); // Вызвать функцию с новой задержкой
}

// Начальный вызов функции
setTimeout(delayedFunction, delay);

🟠Изменение существующей задержки
Если нужно изменить задержку для уже запланированного вызова setTimeout, этого сделать нельзя напрямую. Однако, можно отменить текущий таймер и запланировать новый с новой задержкой.

let timeoutId;
let delay = 2000; // Начальная задержка 2 секунды

function startTimeout() {
  timeoutId = setTimeout(() => {
    console.log('Таймер сработал');
  }, delay);
}

function changeDelay(newDelay) {
  clearTimeout(timeoutId); // Отменить текущий таймер
  delay = newDelay; // Обновить задержку
  startTimeout(); // Запланировать новый таймер с новой задержкой
}

// Запустить начальный таймер
startTimeout();

// Изменить задержку через 1 секунду
setTimeout(() => {
  changeDelay(5000); // Изменить задержку на 5 секунд
}, 1000);

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

🤔 Как обратиться к методу в цепочке?

Нужно вызвать этот метод через объект. Если метод не найден на самом объекте, интерпретатор JavaScript будет подниматься по цепочке прототипов до тех пор, пока не найдет метод или не достигнет вершины цепочки (обычно это Object.prototype).

Рассмотрим пример с использованием функций-конструкторов и прототипов:

// Создаем конструктор Animal
function Animal(name) {
  this.name = name;
}

// Добавляем метод speak к прототипу Animal
Animal.prototype.speak = function() {
  console.log(`${this.name} издает звук.`);
};

// Создаем конструктор Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

// Наследуем прототип Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// Добавляем метод bark к прототипу Dog
Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

// Создаем экземпляр Dog
const myDog = new Dog('Рекс', 'Лабрадор');

// Обращение к методам
myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

🚩Пошаговое выполнение

1⃣Создание экземпляра `myDog`:
Когда вы создаете новый экземпляр Dog, функция-конструктор Dog вызывается, и у нового объекта myDog появляются свойства name и breed.

2⃣Наследование прототипа:
Объект myDog наследует методы speak и bark через цепочку прототипов.
myDog.__proto__ указывает на Dog.prototype.
Dog.prototype.__proto__ указывает на Animal.prototype.

3⃣Вызов метода speak:
Когда вы вызываете myDog.speak(), интерпретатор сначала ищет метод speak на объекте myDog. Не найдя его там, он поднимается по цепочке прототипов и находит метод speak в Animal.prototype.

4⃣Вызов метода bark:
Когда вы вызываете myDog.bark(), интерпретатор сначала ищет метод bark на объекте myDog. Не найдя его там, он поднимается по цепочке прототипов и находит метод bark в Dog.prototype.

🚩Проверка наличия метода

Если вы хотите проверить, где именно находится метод в цепочке прототипов, можно использовать метод hasOwnProperty для проверки собственного свойства объекта и оператор in для проверки наличия свойства в объекте или его прототипах.

console.log(myDog.hasOwnProperty('speak')); // false, так как метод унаследован
console.log('speak' in myDog); // true, так как метод найден в цепочке прототипов

console.log(myDog.hasOwnProperty('bark')); // false, так как метод унаследован
console.log('bark' in myDog); // true, так как метод найден в цепочке прототипов

Чтобы обратиться к методу в цепочке прототипов, достаточно вызвать метод через объект. Если метод не найден на самом объекте, JavaScript будет подниматься по цепочке прототипов до тех пор, пока не найдет метод или не достигнет вершины цепочки (обычно это Object.prototype).

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

🤔 Как js понимает, что есть следующий прототип ?

Использует скрытое свойство [[Prototype]] (также известное как __proto__) для каждого объекта, чтобы установить связь с его прототипом. Это позволяет объекту наследовать свойства и методы от другого объекта.

🚩Как она работает

🟠Свойство `__proto__`:
Каждый объект в JavaScript имеет скрытое свойство [[Prototype]], доступное как proto (неофициальный, но широко поддерживаемый способ доступа). Оно указывает на прототип объекта, от которого этот объект наследует свойства и методы. Это свойство устанавливается автоматически при создании объекта.

🟠Поиск свойства или метода:
Когда вы пытаетесь получить доступ к свойству или методу объекта, JavaScript сначала ищет его на самом объекте. Если свойство или метод не найдено, поиск продолжается в объекте, на который указывает proto. Этот процесс продолжается вверх по цепочке прототипов до тех пор, пока не будет найдено свойство или не будет достигнут конец цепочки (обычно это Object.prototype).

Рассмотрим пример, чтобы проиллюстрировать, как работает цепочка прототипов:

// Создаем объект Animal
function Animal(name) {
  this.name = name;
}

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

// Создаем объект Dog, который наследует от Animal
function Dog(name, breed) {
  Animal.call(this, name); // Вызов конструктора Animal
  this.breed = breed;
}

Dog.prototype = Object.create(Animal.prototype); // Наследование прототипа Animal
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log(`${this.name} лает.`);
};

const myDog = new Dog('Рекс', 'Лабрадор');

myDog.speak(); // Рекс издает звук.
myDog.bark(); // Рекс лает.

🚩Как JS ищет свойства и методы

1⃣Первый уровень поиска:
Когда вы вызываете myDog.speak(), JavaScript сначала ищет метод speak на самом объекте myDog.
2⃣Поиск в прототипе:
Поскольку myDog не имеет собственного метода speak, JavaScript смотрит на объект, на который указывает myDog.__proto__. В данном случае это Dog.prototype.
3⃣Продолжение поиска:
Если метод speak не найден в Dog.prototype, JavaScript продолжает искать в Dog.prototype.__proto__, который указывает на Animal.prototype.
4⃣Нахождение метода:
Метод speak найден в Animal.prototype, и он вызывается.
5⃣Конец цепочки:
Если бы метод speak не был найден в Animal.prototype, JavaScript продолжил бы поиск в Animal.prototype.__proto__, который указывает на Object.prototype. Если метод не найден и в Object.prototype, возвращается undefined.

🚩Операторы для проверки цепочки прототипов:

Операторвень поиска:
Проверяет, является ли объект экземпляром конструктора, следуя по цепочке прототипов.

console.log(myDog instanceof Dog); // true
console.log(myDog instanceof Animal); // true
console.log(myDog instanceof Object); // true

Метод isPrototypeOf:
Проверяет, находится ли объект в цепочке прототипов другого объекта.

      console.log(Animal.prototype.isPrototypeOf(myDog)); // true
   console.log(Dog.prototype.isPrototypeOf(myDog)); // true
   

Метод Object.getPrototypeOf:
Возвращает прототип объекта.

console.log(Object.getPrototypeOf(myDog) === Dog.prototype); // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true
   

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

🤔 От чего зависит this ?

Значение this зависит от контекста, в котором функция вызывается. Понимание того, как this определяется в различных ситуациях, является ключом к правильному использованию функций и методов в JavaScript. Рассмотрим основные правила и примеры.

🚩Основные правила

Глобальный контекст или контекст функции:
В глобальном контексте (вне любой функции) или внутри обычной функции (не метода объекта) this ссылается на глобальный объект, который является window в браузере или global в Node.js.

      console.log(this); // window в браузере или global в Node.js

   function globalFunction() {
     console.log(this); // window в браузере или global в Node.js
   }
   
   globalFunction();

Методы объекта:
Когда функция вызывается как метод объекта, this ссылается на объект, который использовался для вызова метода.

      const obj = {
     name: 'Alice',
     greet: function() {
       console.log(this.name);
     }
   };
   
   obj.greet(); // 'Alice'

Конструкторы и классы:
this ссылается на вновь созданный объект.

      function Person(name) {
     this.name = name;
   }
   
   const person = new Person('Bob');
   console.log(person.name); // 'Bob'
   
   class Animal {
     constructor(name) {
       this.name = name;
     }
   }
   
   const animal = new Animal('Charlie');
   console.log(animal.name); // 'Charlie'

Явное задание this с помощью call, apply и bind:
Методы call и apply позволяют вызывать функцию с явно заданным значением this. Метод bind создает новую функцию, которая при вызове имеет определенное значение this.

function sayHello() {
     console.log(this.name);
   }
   
   const person = { name: 'David' };
   
   sayHello.call(person); // 'David'
   sayHello.apply(person); // 'David'
   
   const boundSayHello = sayHello.bind(person);
   boundSayHello(); // 'David'

🚩Значение this зависит от контекста вызова:

🟠В глобальном контексте и обычных функциях this ссылается на глобальный объект (window или global).
🟠В методах объекта this ссылается на сам объект.
🟠В конструкторах и классах this ссылается на вновь созданный объект.
🟠С помощью call, apply и bind можно явно задать значение this.
🟠Стрелочные функции захватывают this из окружающего лексического контекста.
🟠Вложенные функции могут иметь различное значение this, что можно решить с помощью стрелочных функций или сохранения контекста внешней функции.

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

🤔 Что известно про отладку js ?

Отладка JS кода — это процесс поиска и исправления ошибок, которые возникают в программном обеспечении. Этот процесс важен для выявления логических ошибок, неправильных значений переменных и других проблем, которые могут возникнуть во время разработки. Рассмотрим основные инструменты и методы для отладки JavaScript кода.

🚩Основные инструменты

🟠Консоль разработчика в браузере
Все современные браузеры (Chrome, Firefox, Edge, Safari) имеют встроенные инструменты для разработчиков, которые включают консоль для вывода сообщений, просмотра значений переменных и выполнения JavaScript кода в реальном времени.

Пример использования консоли в Chrome:
1⃣Откройте инструменты разработчика (F12 или Ctrl+Shift+I).
2⃣Перейдите на вкладку "Console".
3⃣Используйте console.log(), console.error(), console.warn() для вывода сообщений в консоль.

console.log('Это сообщение для отладки');
console.error('Это сообщение об ошибке');
console.warn('Это предупреждающее сообщение');   

🟠Точки останова (breakpoints)
Точки останова позволяют приостановить выполнение кода на определенной строке, чтобы можно было исследовать текущее состояние программы (значения переменных, выполнение функций и т.д.).

Пример использования точек останова в Chrome:
1⃣Откройте инструменты разработчика и перейдите на вкладку "Sources".
2⃣Найдите и откройте файл JavaScript.
3⃣Щелкните на номер строки, где хотите установить точку останова.
4⃣Обновите страницу и выполнение остановится на установленной точке останова.

🟠Интерактивное выполнение кода
Инструменты разработчика позволяют выполнять JavaScript код в реальном времени через консоль.

Пример:
1⃣Откройте инструменты разработчика и перейдите на вкладку "Console".
2⃣Введите и выполните произвольный JavaScript код, например:

let x = 10;
let y = 20;
console.log(x + y); // 30

🟠Просмотр вызовов функций (Call Stack)
Инструменты разработчика позволяют отслеживать вызовы функций и видеть, как они были вызваны друг другом.

Пример:
Когда выполнение приостановлено на точке останова, откройте вкладку "Call Stack" в инструментах разработчика, чтобы увидеть последовательность вызовов функций.

🚩Методы

Использование console.log()
Это простой и распространенный метод для вывода значений переменных и сообщений на разных этапах выполнения кода.

function add(a, b) {
    console.log('Аргументы:', a, b);
    return a + b;
}

let result = add(5, 3);
console.log('Результат:', result);

Отладочные утверждения (Assertions)
Метод console.assert() позволяет выполнять утверждения и выводить сообщение, если условие ложно.

let x = 5;
console.assert(x === 5, 'x должно быть равно 5');
console.assert(x === 10, 'x должно быть равно 10'); // Выведет сообщение   

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

🤔 Почему http-2, а не http-1 ?

HTTP/2 предпочтительнее HTTP/1.1 потому, что он позволяет мультиплексирование запросов по одному соединению, сжимает заголовки для эффективности передачи данных и улучшает общую производительность веб-сайтов за счет бинарного формата и приоритезации потоков.

🚩Минусы

➖Ограниченное количество одновременных соединений:
HTTP/1.1 позволяет использовать несколько одновременных соединений для загрузки ресурсов с одного домена, но это число ограничено (обычно 6-8 соединений). Это приводит к значительным задержкам, особенно при загрузке большого количества ресурсов (изображений, скриптов, стилей) на современных веб-страницах.

➖Небольшие размеры заголовков:
В HTTP/1.x заголовки передаются в каждом запросе и ответе, что увеличивает накладные расходы, особенно при использовании длинных куки-файлов и других данных заголовков.

➖Отсутствие мультиплексирования:
HTTP/1.x не поддерживает отправку нескольких запросов и ответов одновременно по одному соединению, что приводит к блокировке при медленных запросах или больших ресурсах.

➖Частые разрывы соединений:
В HTTP/1.x соединения часто закрываются после завершения передачи данных, что требует повторного установления соединений для последующих запросов, увеличивая задержки.

🚩Плюсы

➕Бинарный протокол:
HTTP/2 использует бинарное кодирование вместо текстового в HTTP/1.x, что упрощает анализ и обработку данных, а также снижает вероятность ошибок.

➕Мультиплексирование:
HTTP/2 позволяет отправлять несколько запросов и получать несколько ответов одновременно по одному TCP-соединению, устраняя блокировку и повышая эффективность передачи данных.

➕Сжатие заголовков (HPACK):
HTTP/2 использует эффективное сжатие заголовков, что значительно уменьшает накладные расходы при передаче заголовков.

➕Приоритеты потоков:
HTTP/2 поддерживает установку приоритетов для отдельных потоков данных, что позволяет более эффективно управлять передачей важных ресурсов.

➕Постоянные соединения:
HTTP/2 поддерживает длительные соединения, что уменьшает количество повторных установлений соединений и улучшает производительность.

➕Серверная инициатива (Server Push):
HTTP/2 позволяет серверу отправлять ресурсы клиенту до того, как они будут запрошены, что ускоряет загрузку страниц.

🚩Примеры преимуществ HTTP/2

🟠Мультиплексирование:
В HTTP/1.1 каждый запрос требует отдельного соединения или использования техники keep-alive для удержания соединения открытым, что приводит к блокировке. В HTTP/2, благодаря мультиплексированию, все ресурсы могут быть загружены одновременно по одному соединению.

🟠Сжатие заголовков:
Заголовки в HTTP/2 сжимаются, что особенно полезно для повторяющихся заголовков, таких как куки.

🟠Server Push:
Сервер может отправлять необходимые ресурсы, такие как стили и скрипты, до того, как клиент их запросит, что снижает количество запросов и улучшает время загрузки страницы.

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

🤔 Где заканчивается js, а где начинается дом ?

JS заканчивается там, где он перестает быть просто набором инструкций и начинает манипулировать DOM, т.е. когда скрипт обращается к элементам страницы (например, через document.getElementById), он начинает взаимодействовать с DOM для изменения структуры, стилей или содержимого веб-страницы.

🚩JavaScript

Используется для создания динамических и интерактивных веб-страниц. Он работает в браузере и на сервере (с помощью Node.js). JavaScript сам по себе не имеет знаний о веб-странице или ее структуре. Он предоставляет синтаксис и базовые возможности для выполнения вычислений, обработки данных, работы с объектами и функциями.

🚩Основные возможности:

🟠Управление переменными и типами данных:
Объявление переменных (var, let, const). Работа с различными типами данных (строки, числа, объекты, массивы).

🟠Управление потоком:
Условные операторы (if, else, switch). Циклы (for, while, do-while).

🟠Работа с функциями:
Объявление и вызов функций. Работа с анонимными и стрелочными функциями.

🟠Объектно-ориентированное программирование:
Создание объектов и классов. Наследование и полиморфизм.

🚩DOM (Document Object Model)

Это программный интерфейс для веб-документов. Он представляет структуру HTML-документа как дерево объектов, которые могут быть изменены скриптами (например, JavaScript). DOM позволяет JavaScript взаимодействовать с HTML-страницей: изменять элементы, стили, атрибуты и содержимое страницы.

🚩Основные возможности:

🟠Доступ к элементам:
Получение элементов по идентификатору(document.getElementById), классу(document.getElementsByClassName), тегу(document.getElementsByTagName), селектору(document.querySelector, document.querySelectorAll).

🟠Изменение структуры документа:
Создание новых элементов (document.createElement). Добавление и удаление элементов (appendChild, removeChild).

🟠Изменение содержимого и атрибутов:
Изменение текста и HTML-содержимого (element.textContent, element.innerHTML). Управление атрибутами (element.setAttribute, element.getAttribute).

🟠События:
Добавление обработчиков событий (element.addEventListener). Создание и отправка пользовательских событий.

🚩Примеры

Изменение содержимого элемента:

<!DOCTYPE html>
<html>
<head>
    <title>Пример DOM</title>
</head>
<body>
    <div id="myDiv">Исходный текст</div>
    <button onclick="changeText()">Изменить текст</button>

    <script>
        function changeText() {
            // Получение элемента DOM
            const myDiv = document.getElementById('myDiv');
            // Изменение содержимого элемента
            myDiv.textContent = 'Измененный текст';
        }
    </script>
</body>
</html>

Создание и добавление нового элемента:

<!DOCTYPE html>
<html>
<head>
    <title>Пример добавления элемента</title>
</head>
<body>
    <button onclick="addElement()">Добавить элемент</button>

    <script>
        function addElement() {
            // Создание нового элемента
            const newElement = document.createElement('p');
            newElement.textContent = 'Новый параграф';

            // Добавление нового элемента в DOM
            document.body.appendChild(newElement);
        }
    </script>
</body>
</html>

🚩Граница

JavaScript — это язык программирования, который предоставляет базовые возможности для работы с данными и логикой.
DOM — это интерфейс, который предоставляет структуру HTML-документа и позволяет JavaScript взаимодействовать с этой структурой. Граница между ними можно представить так:

🟠JavaScript:
Работа с данными, логика выполнения, функции, объекты и т.д.

🟠DOM:
Представление HTML-документа как дерева объектов и возможность манипуляции этими объектами через JavaScript.

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

🤔 Зачем отправляется http запрос ?

HTTP-запросы (HTTP requests) отправляются для обмена данными между клиентом и сервером в сети Интернет. Они являются основным механизмом взаимодействия в веб-приложениях, обеспечивая передачу информации между веб-браузерами, веб-серверами и другими компонентами сети.

🚩Причины отправки

🟠Запрос веб-страниц
Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, браузер отправляет HTTP-запрос к серверу для получения содержимого веб-страницы.

GET / HTTP/1.1
Host: www.example.com 

🟠Загрузка ресурсов
Веб-страницы обычно содержат ссылки на дополнительные ресурсы, такие как изображения, стили (CSS), скрипты (JavaScript), шрифты и другие файлы. Для каждого из этих ресурсов браузер отправляет отдельный HTTP-запрос.

GET /styles/main.css HTTP/1.1
Host: www.example.com  

🟠Отправка данных на сервер
Веб-приложения часто требуют отправки данных от клиента к серверу. Это может быть регистрация пользователя, отправка формы, выполнение поиска и т.д. Такие запросы обычно используют метод POST.

POST /register HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 45

username=johndoe&password=securepassword 

🟠Получение данных с сервера
Веб-приложения также часто запрашивают данные с сервера для обновления содержимого страницы без её перезагрузки. Это особенно актуально для одностраничных приложений (SPA), использующих AJAX-запросы.

GET /api/user/123 HTTP/1.1
Host: www.example.com

🟠Выполнение CRUD-операций
CRUD (Create, Read, Update, Delete) операции являются основными операциями управления данными в веб-приложениях. HTTP-запросы различных методов (POST, GET, PUT, DELETE) используются для выполнения этих операций.

PUT /api/user/123 HTTP/1.1
Host: www.example.com
Content-Type: application/json
 Content-Length: 60

{"username":"johndoe","email":"johndoe@example.com"}

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

🤔 Для чего нужен cors?

CORS (Cross-Origin Resource Sharing) нужен для того, чтобы браузеры могли безопасно выполнять запросы к ресурсам на других доменах. Это важный механизм безопасности, который помогает предотвратить несанкционированный доступ к данным.

🚩Почему это нужно?

Интернет состоит из множества доменов, и иногда приложения на одном домене хотят получать данные с другого домена. Однако браузеры по умолчанию блокируют такие запросы из соображений безопасности, чтобы предотвратить атаки типа CSRF (Cross-Site Request Forgery) и XSS (Cross-Site Scripting).

🚩Как это работает?

Когда браузер пытается сделать запрос к ресурсу на другом домене, он сначала отправляет предварительный запрос (preflight request), чтобы узнать, разрешает ли сервер такой запрос. Этот предварительный запрос использует метод OPTIONS. Если сервер разрешает доступ, он отвечает с заголовками, которые сообщают браузеру, что запрос может быть выполнен. Основные заголовки, используемые в CORS, включают:
🟠Access-Control-Allow-Origin: указывает, каким доменам разрешен доступ к ресурсу.
🟠Access-Control-Allow-Methods: указывает, какие методы HTTP разрешены при доступе к ресурсу.
🟠Access-Control-Allow-Headers: указывает, какие заголовки могут быть использованы при выполнении запроса.

🚩Пример

🟠Если ваше фронтенд-приложение находится на домене frontend.com, а API, к которому оно хочет получить доступ, находится на api.backend.com. Когда фронтенд отправляет запрос к API, браузер отправляет предварительный запрос:

OPTIONS /data HTTP/1.1
Host: api.backend.com
Origin: http://frontend.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: Content-Type

🟠Если сервер api.backend.com разрешает доступ, он отвечает следующим образом: После этого браузер отправляет основной запрос, и API отвечает с данными.

HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://frontend.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type

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

🤔 Что такое virtual dom?

Virtual DOM — это легковесное представление реального DOM, которое используется для оптимизации обновлений пользовательского интерфейса. При изменении состояния приложения, виртуальный DOM обновляется сначала, после чего вычисляются минимальные изменения для реального DOM. Это позволяет сократить количество операций с реальным DOM, которые могут быть затратными. Virtual DOM широко используется в библиотеках, таких как React.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Зачем придумали async/await?

Ключевой целью введения async/await в JavaScript было упростить написание и чтение асинхронного кода, сделать его более линейным и похожим на синхронный.

🟠Улучшение читаемости кода
Асинхронный код, написанный с использованием коллбеков или промисов, может быть трудным для чтения и понимания, особенно когда имеется несколько вложенных асинхронных операций. async/await делает асинхронный код более линейным, что упрощает его понимание.

Пример с промисами:

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

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

Пример с async/await:

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("some data");
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

main();

🟠Избегание "ада коллбеков"
Когда асинхронные операции вложены друг в друга, код становится трудным для чтения и сопровождения. Это называется "адом коллбеков" (callback hell). async/await позволяет писать асинхронный код последовательно, без вложенности.

Пример с промисами:

getData((data) => {
  processData(data, (processedData) => {
    saveData(processedData, (result) => {
      console.log(result);
    });
  });
});

Пример с async/await:

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

main();

🟠Снижение вероятности ошибок
Когда используется async/await, ошибки могут быть обработаны с использованием привычного try/catch блока, что снижает вероятность пропуска ошибок.

Пример с промисами:

fetchData().then((data) => {
  return processData(data);
}).then((processedData) => {
  return saveData(processedData);
}).catch((error) => {
  console.error(error);
});

Пример с async/await:

async function main() {
  try {
    const data = await fetchData();
    const processedData = await processData(data);
    const result = await saveData(processedData);
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

main();

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

🤔 Чем let отличается от var?

Переменные, объявленные через let, имеют блочную область видимости, тогда как var — функциональную область видимости. Это значит, что let не доступен за пределами блока, в котором объявлен, а var доступен в пределах функции. Также, переменные, объявленные через let, не подвержены всплытию (hoisting) так же, как var. Let считается более безопасным для использования в современных проектах.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний