{ Снежные строки }

❄️ Хорошей недели всем!

#Задачи

❄️ При обсуждении микротасок в event loop, мы затронули с вами промисы.
Сегодня хотелось бы поподробнее обсудить и полностью разобраться в промисах в js!

✨ Что такое промисы?
Промисы позволяют удобно работать с асинхронным кодом.
Сам из себя представляет обычный объект - который содержит свое состояние.

🖇 Состояния промисов

1️⃣ pending - в ожидании
2️⃣ fulfilled - выполнен успешно
3️⃣ rejected - выполнен с ошибкой

❕ Колбэки:
➖ resolve(value) — если работа завершилась успешно
➖ reject(error) — если произошла ошибка

const promise = new Promise((resolve, reject) => {
  ...  
});

⚙️ Использование промисов
Промисы отлично подходят для обработки асинхронных операций.

У них есть три ключевых метода:
1️⃣ then — обрабатывает успешное выполнение (fulfilled).
2️⃣ catch — обрабатывает ошибки (rejected).
3️⃣ finally — выполняется всегда, вне зависимости от результата.

myPromise
  .then((result) => console.log(result)) // Вывод: Операция выполнена успешно!
  .catch((error) => console.error('Ошибка:', error))
  .finally(() => console.log('Операция завершена.')); // Вывод: Операция завершена.

💬 А как вы предпочитаете работать с асинхронным кодом?

#JavaScript #Собеседование

❄️ До нового года осталось совсем немного времени. Решила все же подвести итоги уходящего года и набросать планы на следующий!

Год оказался насыщенным, но больше по личным делам, чем в плане канала — привычка писать статьи пока не сформировалась😢 Это будет одним из главных пунктов моих целей на следующий год!

Давайте по порядку:

1️⃣ Рост в фронтенде. За этот год чувствуется больше уверенности в себе и в своих навыках. Я освоила новые технологии, программировала разные проекты и получила повышение зарплаты — что точно о чем-то говорит🔥

2️⃣ Путешествия. Покаталась по разным городам России, что было очень круто! В следующем году хочется больше таких поездок и, возможно, участия в профессиональных или тематических мероприятиях! 👩‍💻

3️⃣ Первый опыт в геймдеве. Это оказалось непросто, но очень интересно. Как будто учусь программировать заново, этого очень не хватало 🕹

4️⃣ Создание канала. Давно мечтала, но всегда боялась и откладывала

Я очень горжусь тем, что удалось сделать за этот промежуток времени!
Спасибо всем, кто поддерживал меня и был рядом ❤️
Всех с наступающим! Кайфуйте, жизнь одна 🎉

#Задачи

❄️ Поговорим сегодня про Event loop.
Event loop - Менеджер асинхронных вызовов. По сути, это бесконечный цикл, который следит за очередями задач и обеспечивает их выполнение

Event loop - состоит несколько основных частей:
➖Heap - Участок памяти, где хранятся объекты и данные, которые создаются в процессе работы программы

➖Callstack - Стек вызовов. Когда вы вызываете функцию, она попадает в стек. После выполнения она удаляется из стека

➖WebApi - Функции и интерфейсы, предоставляемый браузером

➖Macrotask - очередь куда попадают функции по правилу FIFO. Крупные задачи, такие как setTimeout, setInterval, обработчики событий, сетевые запросы

console.log("Start");

setTimeout(() => {
  console.log("Macrotask: Timeout");
}, 0);

console.log("End");
// Вывод:
// Start
// End
// Macrotask: Timeout

➖Microtask - имеют более высокий приоритет, чем макротаски, и выполняются после текущей операции, но перед макротасками. Это такие операции, как Promise или queueMicrotask

console.log("Start");

Promise.resolve().then(() => {
  console.log("Microtask: Promise");
});

setTimeout(() => {
  console.log("Macrotask: Timeout");
}, 0);

console.log("End");
// Вывод:
// Start
// End
// Microtask: Promise
// Macrotask: Timeout

❔Как работает Event Loop?
1️⃣ Стек вызовов (Call Stack) обрабатывает синхронный код.
2️⃣ Когда встречается асинхронная операция, она передаётся в Web API, который управляет её выполнением.
3️⃣ После завершения Web API передаёт задачу в очередь Macrotasks или Microtasks.
4️⃣ Event Loop следит за Call Stack и очередями задач. Когда стек вызовов пуст, Event Loop начинает обработку микротасков.
5️⃣ После выполнения всех микротасков Event Loop переходит к макротаскам

❄️ Основные темы и часто задаваемые вопросы, которые помогут вам пройти собеседование уверенно.
❕Если у вас возникнут вопросы или дополнения, оставляйте их в комментариях! И также делитесь своим опытом!

Это будет серия постов, так как в один уместиться было сложно

Начнем с секции JavaScript
Вопросы по JavaScript делятся на несколько основных тем:

1️⃣ База
Здесь проверяется общее понимание языка и его особенностей.

➖Типы данных: какие существуют типы в JavaScript?
➖Как работает приведение типов?
➖В чем разница между == и ===?
➖Что такое hoisting? Как он работает с переменными и функциями?
➖Области видимости: что такое глобальная и блочная область видимости?
➖Разница между var, let и const.
➖Чем undefined отличается от null?

2️⃣Асинхронность
Навыки работы с асинхронным кодом

➖Что такое Event Loop, и как он работает?
➖Способы работы с асинхронным кодом
➖Что такое Promise? Какие методы у него есть (then, catch, finally, all, race)?
➖Как работают async/await?
➖Разница между микрозадачами и макрозадачами.

3️⃣ Замыкания и контекст
Эта тема встречается почти на каждом собеседовании.

➖Что такое замыкание? Как оно работает?
➖Что такое this ?
➖Как работает this в различных контекстах?
➖Как использовать call, apply, bind? И в чем их отличие?

4️⃣ Функции

➖Какие типы функций существуют в JavaScript
➖Чем Function Declarations отличаются от Function Expressions?
➖Что такое стрелочные функции, и чем они отличаются от обычных? Как у стрелочных функций работает this?
➖Что такое функции высшего порядка?
➖Что такое чистая функция?
➖Что такое анонимная функция?
➖Что такое каррирование

5️⃣ Прототипы

➖Что такое prototype?
➖Как работает прототипное наследование?
➖Что такое __proto__

6️⃣ Объекты

➖Как работают Object.create() и Object.assign()?
➖Глубокое и неглубокое копирование
➖Как определить свойство в объекте?
➖Рассказать про массивоподобные объекты

7️⃣ Оптимизация и производительность

➖Что такое мемоизация?
➖Как работает debounce и throttle? В чем разница?
➖Каковы основные принципы оптимизации DOM?

#Собеседование #JavaScript

❄️ Составляю список основных тем и вопросов с собеседований для вас!
А пока ловите вот такую шутку, для продуктивной рабочей субботы

❄️ Закрепим тему прототипов

❄️ Всем хорошей пятницы!

❄️ Поговорим сегодня про Prototype и Прототипное наследование

❕[[Prototype]] — это внутреннее свойство объектов, которое ссылается на другой объект. Через это свойство объекты могут наследовать свойства и методы от других объектов.

Для лучшего понимания сперва, рассмотрим встроенные операции с объектами:
➖ [[Get]] — получение значения свойств.
➖ [[Put]] — изменение значений свойств.

Когда операция [[Get]] не может найти запрашиваемое свойство в самом объекте, она обращается к его [[Prototype]].
Этот процесс продолжается по цепочке прототипов, пока свойство не будет найдено или пока цепочка не дойдет до вершины — объекта Object.prototype

❕ Object.prototype - является общим предком для всех объектов в JavaScript.

💡 Важно помнить:

Цепочка прототипов работает как механизм наследования. Если у объекта нет нужного свойства или метода, он "наследует" их через [[Prototype]].
Но если свойство или метод отсутствуют на всех уровнях цепочки, результат будет undefined.

❕ Доступ к прототипу можно получить с помощью свойства proto или через функции, такие как Object.getPrototypeOf().

❄️ Так и работает — прототипное наследование!

❄️ Закрепим тему this

❄️ Всем хорошего и продуктивного дня!

#Задачи

❄️ Что же такое this?

this - это специальный идентификатор, который автоматически определяется внутри области видимости каждой функции.

❕ Что точно стоит запомнить
this - зависит от того, в каких условиях была вызвана функция

Сегодня я хочу рассказать, какие условия вообще существуют 📚

➖ Привязка по умолчанию
Если попытаться обратиться к this в глобальной области видимости, оно по умолчанию будет привязано к глобальному контексту

➖ Неявная привязка
Если у точки вызова есть объект контекста, следовательно именно этот объект служит this для функции!

function log() {
  console.log(this.a)
}
var obj = {
  a: 2,
  log: log
}
obj.log() // 2

➖Неявно потерянный
Когда неявно привязанная функция теряет привязку и возвращается к привязке по умолчанию

➖Явная привязка
Организуется с помощью функций call, apply

foo.call(obj);
foo.apply(obj);

➖ Жесткая привязка
bind - возвращает функцию, которая вызывает оригинальную функции именно с тем контекстом, который вы передаете

#JavaScript