Telegram Group Search
7777 😎

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

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

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

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

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

#frontend #javascript #функции
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Задачи с собеседований по 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
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 сообщества:

👩‍💻 React Frontend

👩‍💻 Ruby Backend

👩‍💻 iOS Mobile

👩‍💻 Android Mobile

🖥 PHP Backend

👩‍💻 Node.js Backend

👩‍💻 Rust Backend

👩‍💻 Java Backend

👣 Golang Backend

👩‍💻 Python Backend

👩‍💻 QA & Testing

🖥 Общее IT

👨‍💻 Вакансии IT

📅 Митапы IT

YeaHub помогает расти и достигать целей.
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉 YeaHub растёт и развивается!

✔️Мы расширили базу направлений, навыков и вопросов.
✔️Теперь доступна публичная страница с вопросами.
✔️Активно работаем над новыми сервисами и навыками.

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
Please open Telegram to view this post
VIEW IN TELEGRAM
8000 👍

Завтра новое видео - SOLID в React

Надеюсь к весне будет 10.000 на канале 📊
Please open Telegram to view this post
VIEW IN TELEGRAM
👩‍💻 Принципы SOLID в React

Принципы 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. Эти принципы и паттерны используются на проектах многих компаний, и их знание поможет вам стать более эффективным разработчиком.

📹 Принципы SOLID в React
https://youtu.be/8WsrMKw8w6I?si=Bj1Hkhaeod-PpnPA

📹 5 продвинутых паттернов в React
https://youtu.be/JVtWJ6BxKas?si=DxUTxxqf_fxOamSS

Потратьте выходные с пользой, улучшая свои навыки и применяя лучшие практики в React
Please open Telegram to view this post
VIEW IN TELEGRAM
Всего 129 вакансий для фронтенд-разработчиков без опыта.

Ужас. Как новичку вообще найти работу в таких условиях? 😡

Единственный вариант — где-то набраться опыта и дотянуться хотя бы до фильтра «от 1 до 3 лет». Но что указывать за опыт? Обучение? Пет-проекты? А это уже похоже на накрутку. Если «накручивать» год, то почему не три? С тремя годами опыта зарплаты больше, а сложность и задачи такие же.

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

В этом видео мы разберем 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
🎙 Собеседование в OZON Tech на позицию Middle Frontend Разработчик

Два этапа тех собесов с задачами и вопросами. Вопросы были разнообразные: 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 шаг за шагом. Мы визуализируем процесс на схеме, чтобы показать, что происходит с кодом в момент его выполнения. Разберемся, как работает стек вызовов, что такое микротаски, макротаски и как они взаимодействуют в процессе обработки событий. Это видео поможет вам глубже понять внутреннюю работу Event Loop в JavaScript, что критически важно для собеседований и практических задач.

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

🔗 СХЕМА

#frontend #javascript #eventloop
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Задачи по Event Loop с собеседований

Задача №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
2025/02/06 06:14:18
Back to Top
HTML Embed Code: