Frontend Interview - собеседования по Javascript / Html / Css

2023-07-05 12:02:03 ​Что значит текст max call stack size exceeded в консоли?

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

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

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

@frontendInterview Открыть/Комментировать

2023-07-04 12:00:08 Frontend meetup (Online)

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

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

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

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

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

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

Регистрация на мероприятие Открыть/Комментировать

2023-07-03 15:03:01 ​Как бы вы реализовали метод 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 Открыть/Комментировать

2023-07-02 19:03:03 Javascript filter

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

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

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

@frontendInterview Открыть/Комментировать

2023-07-02 13:08:04 React.js Design Patterns: Learn how to build scalable React apps with ease (2023)

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

@frontendInterview Открыть/Комментировать

2023-07-01 19:02:01 ​Каким будет значение определённого свойства объекта?

Это часто встречающаяся группа вопросов на собеседовании. Отличить её можно по таким признакам: вам предлагают два и более 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 Открыть/Комментировать

2023-07-01 12:08:04 @frontendInterview Открыть/Комментировать

2023-06-28 12:05:02 ​Реализуйте функцию 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 Открыть/Комментировать

2023-06-27 19:02:04 Открыть/Комментировать

2023-06-26 15:03:05 Почему JavaScript функции являются объектами первого класса (First-class Objects)?

Объект первого класса (first class object или first class citizen) это объект, который может быть передан как аргумент функции, возвращён из функции или присвоен переменной. Функции в JavaScript полностью соответствуют этому определению.

Функцию можно присвоить переменной:
const multipleTwo = (n) => n * 2;

Функция может быть передаваемым аргументом другой функции:
async function loadData(func) {
loading = true;
// другой код относящийся к инициализации статусов загрузки

await func();

loading = false;
// другой код относящийся к обработке статуса загрузки
}

function getData() {
// код получения данных с сервера
}

loadData(getData);

Функции могут быть возвращаемым значением другой функции:
function makeAdder(x) {
return function(y) {
return x + y;
};
};

@frontendInterview Открыть/Комментировать