🖥 5 сложных концепций Функций в JavaScript для собеседований

Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код

Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях

- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
- this в функциях
- Асинхронные функции (async/await)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции

🖥 Задачи с собеседований по JavaScript

1. Реализуйте функцию throttle. throttle позволяет "ограничить" количество вызовов функции до одного раза в заданный период времени, даже если функция была вызвана множество раз.

2. Реализуйте функцию debounce. Дебаунсинг позволяет "задержать" выполнение функции до тех пор, пока не пройдет определенный период времени без ее вызова.

3. Реализуйте функцию sleep. Функция sleep позволяет задержать выполнение кода на определенное количество времени.

4. Реализуйте функцию memoize, которая принимает функцию fn в качестве аргумента и возвращает новую функцию. Новая функция должна кэшировать результаты вызовов fn для уникальных наборов аргументов.

Начальный код:

function memoize(fn) {
 
}

// Пример использования
function slowFunction(num) {
  // Симуляция тяжелых вычислений
  for (let i = 0; i < 1e9; i++) {}
  return num * 2;
}

const memoizedSlowFunction = memoize(slowFunction);

console.log(memoizedSlowFunction(5)); // Вычисляет и кэширует результат
console.log(memoizedSlowFunction(5)); // Возвращает закэшированный результат

#javascript #livecoding

🖥 Что будет в консоли?

1. Каким будет вывод этого фрагмента кода?

var foo = 1; 
function bar() { 
    if (!foo) { 
        var foo = 10; 
    } 
    console.log(foo); 
} 
bar();

2. Каким будет вывод этого фрагмента кода?

function foo() { 
    var x = 1; 
    if (x) { 
        (function () { 
            var x = 2; 
        }()); 
    } 
console.log(x)
}

3. Каким будет вывод этого фрагмента кода?

function f() {
  console.log( this );
}

let user = {
  g: f.bind(null)
};

user.g();

4. Каким будет вывод этого фрагмента кода?

function greetWaitAndAgain() {
  console.log(`Hello, ${this.name}!`)
  setTimeout(() => {
    console.log(`Hello again, ${this.name}!`)
  })
}

const user = { name: 'Alex' }

user.greetWaitAndAgain = greetWaitAndAgain;
user.greetWaitAndAgain()

5. Каким будет вывод этого фрагмента кода?

function f() {
    this.x = 5;
    console.log(this);
}
var o = new f();
console.log(o.x); 

#this #javascript #замыкание #собеседование

🖥 5 типичных задач по JavaScript на собеседовании

В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #javascript #функции

🖥 Частые задачи на собеседованиях

Как и обещал в видео, предоставляю задачи с собеседований

1. Реализуйте полифил myFilter точно копирующий filter метод

Array.prototype.myFilter = function(callback) {

};

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.myFilter(x => x > 2);
console.log(filteredArr); // [3, 4, 5]

2. Найти все индексы начала вхождения анаграмм подстроки в строке

function searchAllAnagramsInString(str, substr) {

}

// Пример использования:
console.log(searchAllAnagramsInString("cbaebabacd", "abc")); // [0, 6]

3. Найти самый загруженный день в отеле

function findMaxDayWithClients(bookings) {
  // Реализуйте логику поиска самого загруженного дня
}

findMaxDayWithClients([[1, 5], [2, 4], [3, 6]]); // 3
// В день 3 отель был максимально загружен (3 клиента)

4. Представим, что у нас нет встроенных промис-комбинаторов, как можно реплицировать функциональность Promise.all?

function customPromiseAll(promises) {
  
}

// Пример использования
const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(42);
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'foo'));

customPromiseAll([promise1, promise2, promise3])
  .then(results => console.log(results)) // [3, 42, 'foo']
  .catch(error => console.error(error));

5. Необходимо сгруппировать транзакции по userID.

const transactions = [
  { userID: "user1", amount: 200, date: "2023-01-01" },
  { userID: "user2", amount: 500, date: "2023-01-02" },
  { userID: "user1", amount: 300, date: "2023-01-03" },
  { userID: "user3", amount: 400, date: "2023-01-01" },
  { userID: "user2", amount: 150, date: "2023-01-04" },
  { userID: "user3", amount: 250, date: "2023-01-02" },
  { userID: "user4", amount: 100, date: "2023-01-01" }
];

function topThreeUsersByTotalAmount(transactions) {
 //тут
}

#javascript #лайвкодинг

🖥 Разбор задач по Event Loop с собеседований

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

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

🔗 СХЕМА

#frontend #javascript #eventloop

🖥 ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа

Это видео представляет собой структурированный разбор ключевых тем JavaScript, необходимых для успешного прохождения технического собеседования. Формат сочетает теоретические вопросы с практическим решением задач.

Тут собраны все темы по JavaScript:
- Основы языка: переменные, типы данных, операторы
- Функции: объявление, hoisting, замыкания
- Работа с объектами и массивами
- Контекст выполнения и this
- Асинхронность: колбэки, промисы, async/await
- ООП в JavaScript
- Современные возможности ES6+
- Классы и прототипы
- Работа с DOM и событиями

Практическая часть включает разбор 70 задач разного уровня сложности, включая:
- Алгоритмические задачи
- Задачи на понимание работы JS
- Реальные кейсы из собеседований

Включай это видео в поездке на работу, учебу, во время утренней пробежки, или занятия спортом.

ПС: Очень грамотные ответы на вопросы и поставленная речь. Глубокие и полные ответы Дениса, отличные рассуждения. Советую посмотреть видео и учиться отвечать так же

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#javascript #собеседование

🖥 JavaScript DOM с 0 до Профи. Полный курс + Практика

DOM — это представление HTML-документа в виде дерева объектов, с которым можно работать через JavaScript. В этом видео мы рассмотрим, что такое Document object model и как браузер создает DOM при загрузке страницы. Без DOM in javascript веб-страницы были бы статичны, а с его помощью мы можем динамически изменять контент.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#javascript

👨‍💻 План развития Frontend Разработчика (Часть 2)

JavaScript — это база, это фундамент фронтенда. Именно он вызывает больше всего сложностей у новичков, и именно по нему 80% вопросов на собеседованиях.

Изучать JavaScript нужно с разных сторон. Окружайте себя им: смотрите видео на YouTube, решайте задачи на CodeWars и LeetCode, учите вопросы собеседований и просто разбирайтесь в теории.

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

Когда я учил JavaScript, я потратил на это около трёх месяцев и за это время:
→ просмотрел 5 видеокурсов (каждый от 5 до 11 часов);
→ прошёл 3 курса на платформах с тренажёрами;
→ читал книги;
→ параллельно решал задачи на CodeWars.
→ практиковался с DOM API

Если не понимаете — смотрите 1, 2, 3 курса, пробуйте разные форматы, изучайте объяснения разных авторов. Ваша задача — подготовить мозг, создать нейронные связи, адаптировать себя к восприятию информации.

Банально: посмотрели один курс — поняли 5%. Не страшно. Смотрите следующий — уже 10%. Каждое новое видео, курс или книга раскроют вам одну и ту же тему по-новому. Всё просто: главное — не лениться и регулярно делать шаги к цели. Просто садимся за компьютер и включаем курс.

Технически, в курсе на 7 часов можно услышать 80% всего JavaScript. Но на практике всё сложнее — мозгу нужно время, чтобы привыкнуть, чтобы информация уложилась. Регулярность — ключ к успеху! Если остановитесь — будет откат назад.

Это как картинка с шахтёром, который развернулся в метре от клада. Главное — не разворачиваться!

🖥 JavaScript (2-4 месяца)

→ JavaScript - Полный Курс JavaScript Для Начинающих
https://www.youtube.com/watch?v=CxgOKJh4zWE

→ Неплохой курс на Степике
https://stepik.org/course/180784/promo

→ Doka, почитывайте переодически
https://doka.guide/js/

→ Основы JavaScript
https://ru.hexlet.io/courses/js-basics

→ JavaScript DOM с 0 до Профи. Полный курс + Практика
https://youtu.be/6wJoaiK3NxI?si=DKrRFVo_VjXMnjfj

→ Делаем календарь на JavaScript
https://youtu.be/HmZ7j0WtjdU?si=DfuFFlW7yHp26Crg

→ Пишем простые часы на JavaScript
https://youtu.be/FMgbaVz-TZ4?si=JaRSfWMv3Nj_Yfw8

→ Плейлист из 10 проектов
https://www.youtube.com/playlist?list=PLqp5ZRS9tv4QDOXnn6zGtl1R5LfPDMvz4

→ ВЕСЬ JavaScript в одном собеседовании. 200 вопросов + 70 задач за 2 часа
https://youtu.be/A2P3Gn2_gSY?si=1QlhgaAFxMrPOA6D

→ 5 главных правил THIS
https://youtu.be/VOtZ4ghy3ik?si=1E0XfSUhd8iovyIE

→ Разбор задач по Event Loop
https://youtu.be/QQg5wOloZDI?si=NVYpx07mWH5f0QA4

→ Плейлист 72 задачи по JS
https://www.youtube.com/playlist?list=PLEhUqRdnYdykSMw9irD8yJ7q5GSVvQLL0

А также вводите себе в привычку решать задачи на Codewars или, лучше, на Leetcode. Ничего страшного, если не получается решить самостоятельно — просто продолжайте пытаться и разбирать правильные решения.

После изучения DOM API нужно самостоятельно сделать 1-2 проекта: найти макет, API и реализовать всё самому. Перед тем как изучать React, важно хорошо освоить базу, иначе будете "плыть".

С самого начала параллельно с изучением технологий готовься к собеседованиям. Каждый раз после освоения новой темы закрепляй теорию — проходи вопросы в тренажере 🚀 YeaHub.

#javascript #курсы #гайд