​Реализуйте функцию compose, которая в качестве аргументов принимает несколько функций одного аргумента и возвращает их композицию. Это тоже будет функция одного аргумента. compose(f, g, ...)(x) == f(g(...(x))).

Композиция – основа функционального подхода. Операция композиции в теории категорий определяется для разных сущностей. Но сейчас мы обратим внимание именно на композицию функций.
Нам нужно создать функцию, которая принимает массив других функций и возвращает новую функцию.

Используем правило «Не думай, просто пиши» 🙂

 const compose = (...fns) => x => // функция которую нам надо реализовать

В условии нам подсказали как это сделать — compose(f,g, ...) = f(g(...(x))).

Если сходу решение в голову не приходит, давайте попробуем посмотреть на примерах.
Композиция для одной функции — это сама функция:

 compose(f) = f

Композиция для двух функций:

 compose(f,g) = x => {
   const prevResult = g(x) // выполнили g
   return f(prevResult) // выполнили f
 }

Тогда общее решение выглядит так:

 const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x)

Для каждой предыдущей функции из массива вызовите её на результате выполнения следующей. Тут важно что функции выполняются справа налево.

👉 @frontendInterview

👉 @frontendInterview

​Каким будет значение определённого свойства объекта?

Это часто встречающаяся группа вопросов на собеседовании. Отличить её можно по таким признакам: вам предлагают два и более JS-объекта, в которых программно меняют свойства по ключам. Спрашивают, что в результате попадёт в консоль при вызове какого-то определённого ключа.

Так проверяют ваше знание того, что значения объектов передаются по ссылке и что ключи в объекте — это способ построить связь с конкретными данными.

Обычно перед вами будет пример, вроде такого:

 let cat = {
   name: 'Tom',
   isHunter: true
 }

 let mouse = {
   name: 'Jerry',
   isHunter: false
 }

 mouse = cat;
 cat.isHunter = false;
 mouse.isHunter = undefined;

console.log(mouse.isHunter);

Разберёмся, как выполняется этот код.

1. В начале переменные mouse и cat указывают на собственные объекты.
2. В строке mouse = cat мы присваиваем переменной mouse ссылку на объект cat. Можно рассматривать это как "связывание" переменных. Теперь обе переменные указывают на один и тот же объект { name: 'Tom', isHunter: true}.
3. Теперь mouse.name и cat.name будут менять значения свойства одного и того же объекта.
4. Последнее изменение в этом объекте происходит присваиванием значения undefined ключу isHunter.
5. Выводя в консоль значение ключа isHunter, получим последнее его обновление — undefined.

👉 @frontendInterview

React.js Design Patterns: Learn how to build scalable React apps with ease (2023)

В начале книги рассказывается о лучших практиках создания архитектуры приложения React. Затем она поможет вам узнать, как создавать чистые, производительные и удобные в обслуживании компоненты React с помощью JavaScript и TypeScript.

👉 @frontendInterview

Javanoscript filter

Вы разрабатываете сайт и вдруг обнаруживаете, что некоторые пользователи не могут залогиниться. У всех этих пользователей есть символ "_" в логине. Поэтому вам необходимо написать функцию, которая примет на вход массив из данных пользователей и вернет только те данные, логин в которых имеет символ "_".

Пример:
Исходные данные:
[ [ "foo", "foo@foo.com" ], [ "bar_", "bar@bar.com" ] ]

Результат:
[ [ "bar_", "bar@bar.com" ] ]

👉 @frontendInterview

​Как бы вы реализовали метод String.prototype.indexOf()?

Для начала вспомним, что принимает и возвращает эта функция:
String.prototype.indexOf(searchString [, position]): number

Где:
- searchString — строка в которой нужно искать.
- position — индекс элемента, с которого начинается поиск.

Чтобы реализовать такой поиск воспользуемся скользящим окном, а точнее его частной реализацией, алгоритмом Рабина-Карпа.
Скользящее окно — это алгоритм, который использует область фиксированной длины внутри массива. Двигая эту область, можно получать данные о группе рядом стоящих элементов массива. В нашем случае длина окна будет равна длине подстроки, по которой производится поиск.

// string - строка по которой ведем поиск
// substr - подстрока, которую ищем
// pos - стартовая позиция
function myIndexOf(string, substr, pos = 0) {
// запускаем цикл, от pos до (конца_строки - длина_окна)
for (let i = pos; i < string.length - substr.length + 1; i++) {
// если наша подстрока === содержимому окна, то заканчиваем работу и возвращаем index
if (substr === string.substr(i, substr.length)) {
return i;
}
}
// Если ничего не найдено, то возвращаем -1
return -1;
}

👉 @frontendInterview

Frontend meetup (Online)

1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения

2. Бьем монолит. Основные практики — Гузенко Александр IT ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.

3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.

4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером

🗓 12 июля, начало в 19:00 мск, Среда

🚀 Телеграмм канал с анонсами митапов

✅ Регистрация на мероприятие

​Что значит текст max call stack size exceeded в консоли?

Текст "max call stack size exceeded" в консоли означает, что было достигнуто максимальное количество вызовов функции в стеке вызовов JavaScript. Стек вызовов - это механизм, который используется для отслеживания выполнения функций. Каждый раз, когда функция вызывается, она помещается в стек вызовов. Когда функция заканчивает свое выполнение, она удаляется из стека вызовов.

Когда функция вызывает саму себя рекурсивно без остановки, то каждый новый вызов функции добавляется в стек вызовов, и если количество вызовов становится слишком большим, то возникает ошибка "max call stack size exceeded". Это происходит потому, что стек вызовов имеет ограниченный размер и не может бесконечно увеличиваться.

Чтобы решить эту проблему, нужно переписать код таким образом, чтобы рекурсивные вызовы функции прекращались на определенном условии. Например, можно добавить условие, которое проверяет, достигнуто ли максимальное количество вызовов функции, и если да, то прекратить рекурсивные вызовы. Также можно использовать циклы вместо рекурсии, чтобы избежать проблемы с переполнением стека вызовов.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Чему будет равно значение переменной variable: let variable = 1 + '15'?

Значение переменной variable будет равно '115'. В переменной будет храниться строка, а не число.
let variable = 1 + '15'
console.log(variable) // '115'

Оператор + в JavaScript используется для сложения чисел или конкатенации строк. В результате применения этого оператора к двум значениям получится строка или число. Если один из операндов будет строковым типом, то оба операнда сначала будут приведены к строке, а результатом станет их конкатенация.

👉 @frontendInterview

Essential TypeScript 4: From Beginner to Pro 2nd Edition(2021)

Узнайте об основных и дополнительных возможностях TypeScript, популярного супернабора языка JavaScript, в котором добавлена поддержка статической типизации. TypeScript сочетает в себе возможности типизации C# или Java с гибкостью JavaScript, уменьшая количество ошибок типизации и обеспечивая более легкий путь к разработке JavaScript.

👉 @frontendInterview

Count the divisible numbers

Создайте функцию, которая принимает 3 числа - x, y, k. И возвращает количество целых чисел в промежутке от x до y, которые делятся на k.

Пример:
x = 6, y = 11, k = 2
Функция должна вернуть 3, так как в промежутке от 6 до 11 три числа делятся на 2 (6, 8, 10).

👉 @frontendInterview