❄️ Навигация

Всем добрый вечер! Решила вам тут накидать навигацию по каналу📚
По некоторым рубрикам еще не было постов, но все будет в будущем! 🫡

🖇
#JavaScript - Интересные статьи по js
#Собеседование - Тут про мой опыт собеседований
#отИдеиДоРелиза - Здесь буду рассказывать про свои идеи, будем вместе их доводить до релиза или хотя бы пытаться
#Задачи - Тут будут интересные задачи, которые мне попадались на тех. интервью либо просто в интернете для закрепление какой либо темы

❕Что было бы больше интересно вам? Можете предлагать идеи!

❄️ Собеседование в Т-банк
Хотела рассказать про мой опыт собеседования в Т-банк! Свое резюме я отправила через их сайт Работа в Тинькофф, после уже получила сообщение от hr и мы договорились на созвон

Какие вообще этапы собеседований?
1️⃣ Созвон с эйчаром
2️⃣ Техническое собеседования по языку
3️⃣ Техническое собеседование по алгоритмам
4️⃣ Техническое собеседование по архитектуре

❕ Встреча с эйчаром
На созвоне я рассказала в общем про свой опыт, на каком стеке работала и про интересные проекты
Дальше прошла технический тест из основных вопросов

Примерные вопросы:
➖ Отличие let и var
➖ Типы данных в js
➖ Что такое чистая функция
➖ Вопросы про промисы
➖ Что такое замыкание
и так дальше. Вопросы общие, подготовиться к ним реально!
📚 Если будет нужно, то я могу подготовить список всех основных вопросов, которые встречаются

❄️ После меня пригласили на первое техническое собеседование, про этот этап я уже расскажу попозже
#Собеседование

Вот такая шутка с утра, для хорошего настроения

❄️ Про техническое собеседование в Т-Банк

Техническое интервью состоит полностью из практики
Сегодня хочу с вами поделиться задачами, которые я успела решить

❕ Будет интересно узнать, как бы вы их решили
А уже потом покажу вам свое решение (не идеальное 🙈)

1 задача:
EventEmitter. Необходимо реализовать класс EventEmitter, с возможностью подписки на разные события, отписки и оповещения о событии для всех подписчиков

2 задача:
Реализовать Promise.any. Необходимо написать свою функцию promiseAny, которая является аналогом Promise.any

3 задача:
React приложение. Необходимо создать приложение, с помощью которого можно искать по списку героев.
API

Требования:
➖ Одно поле для ввода поискового запроса запрашивать данные
➖ После получения ответа вывести список сущностей
➖ Индикация состояния загрузки
➖ Обработать кейс когда апи отвечает ошибкой

❄️ Что же такое 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начнем с секции 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

❄️ Поговорим сегодня про 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 переходит к макротаскам

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

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

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

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

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

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

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

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