Одна из самых важных тем в JavaScript - это функции. Без них трудно создать даже простое приложение. Мы используем их для обработки событий, логики и асинхронных операций. С помощью функций мы пишем переиспользуемый и чистый код
Все концепции которые мы рассмотрим в этом видео спрашивают на собеседованиях
- Колбеки (Callbacks)
- Замыкания (Closures)
- Чистые функции (Pure Functions)
-
this
в функциях- Асинхронные функции (async/await)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
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
Please open Telegram to view this post
VIEW IN TELEGRAM
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 #замыкание #собеседование
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from YeaHub
Для тех, кто хочет освоить полный стек технологий, подготовиться к реальным собеседованиям и получить работу мечты? Мы собрали всё необходимое для твоего роста и развития в одном месте!
Выбирай направление и становись частью IT сообщества:
👨💻 Вакансии IT
📅 Митапы IT
YeaHub помогает расти и достигать целей.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉 YeaHub растёт и развивается!
✔️ Мы расширили базу направлений, навыков и вопросов.
✔️ Теперь доступна публичная страница с вопросами.
✔️ Активно работаем над новыми сервисами и навыками.
https://yeahub.ru/questions
💻 Сейчас мы исправляем баги и совершенствуем интерфейс, чтобы сделать платформу ещё удобнее.
Если заметите ошибку или у вас есть предложения, пишите нам — мы всегда рады обратной связи! 🚀
@yeahub_community
https://yeahub.ru/questions
💻 Сейчас мы исправляем баги и совершенствуем интерфейс, чтобы сделать платформу ещё удобнее.
Если заметите ошибку или у вас есть предложения, пишите нам — мы всегда рады обратной связи! 🚀
@yeahub_community
Please open Telegram to view this post
VIEW IN TELEGRAM
React Новости. Создаем интерфейс приложения. React приложение новостей. [1]
Для тех, кто не видел React Новости. Топовый плейлист охватывающий:
Технологии:
- React
- Redux Toolkit
- React Router
- RTK Query
- TypeScript
- FSD
Основные фичи:
- Запросы на сервер
- Кастомные хуки
- Пагинация и фильтрация
- Поиск
- Слайдер (Slider)
- Хук useDebounce
- Рефакторинг кода
- Скелетоны (Skeleton)
- Контекст и многое другое
https://youtu.be/bD0UXb7kD_k?si=ZM5emp9x-jIetFqs
Для тех, кто не видел React Новости. Топовый плейлист охватывающий:
Технологии:
- React
- Redux Toolkit
- React Router
- RTK Query
- TypeScript
- FSD
Основные фичи:
- Запросы на сервер
- Кастомные хуки
- Пагинация и фильтрация
- Поиск
- Слайдер (Slider)
- Хук useDebounce
- Рефакторинг кода
- Скелетоны (Skeleton)
- Контекст и многое другое
https://youtu.be/bD0UXb7kD_k?si=ZM5emp9x-jIetFqs
😱 Ехабу год
Год назад я начал формировать команду для создания проекта. Тогда я провел 50+ собеседований и отобрал 10 человек. Все участники ехаба это ребята с канала. Вот так вот
Кто помнит?
https://www.group-telegram.com/reactify_IT.com/649
Год назад я начал формировать команду для создания проекта. Тогда я провел 50+ собеседований и отобрал 10 человек. Все участники ехаба это ребята с канала. Вот так вот
Кто помнит?
https://www.group-telegram.com/reactify_IT.com/649
Telegram
Reactify | Frontend Разработка
Reactify Teams [Сбор заявок]
Начинаю сбор заявок до 18 января. Все желающие принять участие должны заполнить форму. Это будет боевая разработка. Участник должен уметь самостоятельно разрабатывать простые приложения с использованием фреймворка.
Пока, что…
Начинаю сбор заявок до 18 января. Все желающие принять участие должны заполнить форму. Это будет боевая разработка. Участник должен уметь самостоятельно разрабатывать простые приложения с использованием фреймворка.
Пока, что…
Please open Telegram to view this post
VIEW IN TELEGRAM
Принципы SOLID помогают строить приложения, которые проще развивать и поддерживать в долгосрочной перспективе. Они помогают выстроить архитектуру с учетом будущих расширений и изменений. Изучив эти принципы, вы научитесь думать на шаг вперед, проектируя гибкие и масштабируемые системы.
- Single Responsibility Principle (Принцип единственной ответственности)
- Open/Closed Principle (Принцип открытости/закрытости)
- Liskov Substitution Principle (Принцип Барбары Лисков)
- Interface Segregation Principle (Принцип разделения интерфейса)
- Dependency Inversion Principle (Принцип инверсии зависимостей)
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#react #solid #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
На моем канале есть видео, которые помогут вам лучше понять и применять SOLID принципы и продвинутые паттерны в React. Эти принципы и паттерны используются на проектах многих компаний, и их знание поможет вам стать более эффективным разработчиком.
https://youtu.be/8WsrMKw8w6I?si=Bj1Hkhaeod-PpnPA
https://youtu.be/JVtWJ6BxKas?si=DxUTxxqf_fxOamSS
Потратьте выходные с пользой, улучшая свои навыки и применяя лучшие практики в React
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Менторство Reactify
Всего 129 вакансий для фронтенд-разработчиков без опыта.
Ужас. Как новичку вообще найти работу в таких условиях? 😡
Единственный вариант — где-то набраться опыта и дотянуться хотя бы до фильтра «от 1 до 3 лет». Но что указывать за опыт? Обучение? Пет-проекты? А это уже похоже на накрутку. Если «накручивать» год, то почему не три? С тремя годами опыта зарплаты больше, а сложность и задачи такие же.
Дилемма.
Ужас. Как новичку вообще найти работу в таких условиях? 😡
Единственный вариант — где-то набраться опыта и дотянуться хотя бы до фильтра «от 1 до 3 лет». Но что указывать за опыт? Обучение? Пет-проекты? А это уже похоже на накрутку. Если «накручивать» год, то почему не три? С тремя годами опыта зарплаты больше, а сложность и задачи такие же.
Дилемма.
В этом видео мы разберем 5 типичных задач по JavaScript, которые могут встретиться на собеседовании на фронтенд-разработчика!
- Задача на строки, методы и циклы
- Задача на строки, циклы и условия
- Задача на колбек, массивы, прототип и циклы
- Задача на объекты, массивы, графы и цепочки
- Задача на промисы, замыкания и асинхронность
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
Как и обещал в видео, предоставляю задачи с собеседований
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 #лайвкодинг
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from YeaHub
YeaHub – 1 год! 🎉
30 января 2024 года я собрал команду из сообщества Reactify, и вместе мы придумали название нашего проекта, заложив тем самым его первое упоминание.
За этот год мы сделали меньше, чем хотелось бы, но уже имеем работающую платформу и экосистему каналов по различным IT-направлениям. Планы у нас грандиозные — впереди множество полезных сервисов для IT-специалистов.
Проект прошел через четыре стадии распада, но выстоял, и мы все-таки запустили платформу в открытый доступ.
На данный момент:
🔹 2000 пользователей посещают платформу еженедельно
🔹 500 зарегистрированных пользователей
И это только начало! Активное продвижение YeaHub стартовало лишь в январе.
Пусть 2025 год станет прорывным для всех нас! 🚀
https://www.group-telegram.com/reactify_IT.com/693
30 января 2024 года я собрал команду из сообщества Reactify, и вместе мы придумали название нашего проекта, заложив тем самым его первое упоминание.
За этот год мы сделали меньше, чем хотелось бы, но уже имеем работающую платформу и экосистему каналов по различным IT-направлениям. Планы у нас грандиозные — впереди множество полезных сервисов для IT-специалистов.
Проект прошел через четыре стадии распада, но выстоял, и мы все-таки запустили платформу в открытый доступ.
На данный момент:
🔹 2000 пользователей посещают платформу еженедельно
🔹 500 зарегистрированных пользователей
И это только начало! Активное продвижение YeaHub стартовало лишь в январе.
Пусть 2025 год станет прорывным для всех нас! 🚀
https://www.group-telegram.com/reactify_IT.com/693
Telegram
Reactify | Frontend Разработка
YeaHub
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.…
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.…
Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: http, cors, browser и тд.
1. Переписать функцию с помощью async/await
getJson('json/1')
.then(json => {
if(json.key) {
return getJson('json/2')
}
throw new Error('No key')
})
.then(json => {
return json.key2
})
.catch(e => {
console.log(e)
})
2. Написать обертку вокруг нативного fetch, которая будет в случае ошибки пробовать еще retriesCount раз, и только потом упадет с ошибкой
function fetchWithRetries(retriesCount, ...fetchArgs) {
/* */
}
3. Типизировать функцию reduce чтобы она принимала дженерики:
function reduce(array, callback, initial) {
let acc = initial
for(let i = 0; i < array.length; i++) {
acc = callback(acc, array[i], i)
}
return acc
}
4. Написать функцию которая сворачивает диапазоны:
compress([1, 4, 3, 2]) // '1-4'
compress([1, 4]) //'1, 4'
5. Реализовать паттерн наблюдатель:
class Store {
/* */
}
const store = new Store()
const firstSubscriber = (data) => console.log('first', data)
const secondSubscriber = (data) => console.log('second', data)
store.subscribe(firstSubscriber)
store.subscribe(secondSubscriber)
store.data = {newKey: 'newString'}
/** CONSOLE
* first {newKey: 'newString'}
* second {newKey: 'newString'}
*/
store.unsubsribe(firstSubscriber)
/** CONSOLE
* second {newKey: 'newString'}
*/
}
#interview #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
В этом видео мы подробно разберем выполнение кода в задачах по Event Loop шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.
Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.
#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
Задача №1
setTimeout(() => {
console.log('setTimeout')
})
const promise = new Promise((resolve, reject) => {
console.log(1);
setTimeout(() => {
console.log("timerStart");
resolve("success");
console.log("timerEnd");
}, 0);
Promise.resolve().then(() => {
console.log('resolve')
})
console.log(2);
});
promise.then((res) => {
console.log(res);
});
console.log(4);
Задача №2
setTimeout(function timeout() {
console.log('Таймаут 1');
}, 0);
let p = new Promise(function(resolve, reject) {
console.log('Создание промиса');
setTimeout(function timeout() {
console.log('Таймаут 2');
}, 0);
resolve();
});
p.then(function(){
console.log('Обработка промиса');
});
console.log('Конец скрипта');
Задача №3
const myPromise = (delay) => new Promise((res, rej) => { setTimeout(res, delay) })
setTimeout(() => console.log('in setTimeout1'), 1000);
myPromise(1000).then(res => console.log('in Promise 1'));
setTimeout(() => console.log('in setTimeout2'), 100);
myPromise(2000).then(res => console.log('in Promise 2'));
setTimeout(() => console.log('in setTimeout3'), 2000);
myPromise(1000).then(res => console.log('in Promise 3'));
setTimeout(() => console.log('in setTimeout4'), 1000);
myPromise(5000).then(res => console.log('in Promise '));
Задача №4
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => Promise.resolve().then(() => console.log(6)));
console.log(7);
Задача №5
console.log('start');
const promise1 = Promise.resolve().then(() => {
console.log('promise1');
const timer1 = setTimeout(() => {
console.log('timer1')
const promise2 = Promise.resolve().then(() => {
console.log('promise2');
const timer2 = setTimeout(() => {
console.log('timer2')
}, 0)
})
}, 0);
});
const timer3 = setTimeout(() => {
console.log('timer3');
const promise3 = new Promise(resolve => {
setTimeout(() => {
console.log('promise3');
resolve();
}, 0);
}).then(() => {
console.log('promise3 then');
})
}, 0);
async function asyncFunction() {
console.log('async start');
await new Promise(resolve => setTimeout(resolve, 0));
console.log('async middle');
await Promise.resolve().then(() => console.log('async promise'));
console.log('async end');
}
asyncFunction();
console.log('end');
Please open Telegram to view this post
VIEW IN TELEGRAM
😅 Псс... Прокачаться не надо?
Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибиться, что-то не так сказать или неправильно употребить слово.
Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты.
Лучшая поддержка - это просмотр видео. Спасибо!
https://www.youtube.com/@reactify-it
Спасибо всем, кто поддерживает! Записывая новое видео, всегда переживаю, что мог где-то ошибиться, что-то не так сказать или неправильно употребить слово.
Съемка видео, написание сценария и монтаж — это непростая задача. На 20-минутное видео уходит три дня работы. А ведь у меня еще YeaHub, блог, менторство и социальные проекты.
Лучшая поддержка - это просмотр видео. Спасибо!
https://www.youtube.com/@reactify-it