Вопросы на собеседовании на middle frontend-разработчика в 2022 году

Проходя собеседования в этом году на позицию middle frontend-разработчик, я решил собрать вопросы, которые сейчас задают наши с вами коллеги.

0️⃣ Что выведет консоль?

1️⃣ Что выведет консоль?

2️⃣ Классы, наследование, доступ к родительскому классу через super();
3️⃣ Что такое new?
4️⃣ Что такое замыкание?
5️⃣ Рассказать про контекст this;
6️⃣ Что выведет консоль?

7️⃣ Что вернет функция?

8️⃣ Ограничения для использования React хуков. Имеется ввиду где в коде компонента можно их использовать, а где нет и почему;
9️⃣ Как можно прокинуть value, чтобы получилось 2

1️⃣0️⃣ Тайпскрипт. Как описать в интерфейсе компонента:
— value, которое может быть строкой или числом;
— функцию getValue, которая возвращает value;
— функцию setValue, которая принимает параметры и сетает value;
1️⃣1️⃣ Вопрос для рассуждения. Есть стор (Redux или MobX — не важно) и два подхода к хранению данных в нем:
1) Все стейты вынесены в этот стор, компоненты не имеют локальных стейтов;
2) В стор вынесены всего два стейта, а остальное хранится в компонентах.
Нужно рассказать о минусах таких подходов;
1️⃣2️⃣ Что появится в DOMе если вызвать компоненты следующим образом:

Кастомные тег, компонент или ошибка?
1️⃣3️⃣ CSS-свойства, которые  нежелательно использовать для анимации элементов, т.к. они будут вызывать перерисовку;
1️⃣4️⃣ Какие свойства нельзя назначать для блока если мы используем БЭМ-методологию;
1️⃣5️⃣ Вес селекторов. С каким цветом будет отображаться текст?

1️⃣6️⃣ Есть элемент, стилизованная под ссылку и элемент, стилизованная под кнопку. Первый элемент открывает попап, второй — редиректит юзера на страницу с корзиной. Какие теги нужно использовать в этих случаях?

1️⃣7️⃣ Браузерные способы хранения информации (cookies, session storage, local storage) и их основные различия;


А следом идут вопросы, на которые отвечал мой друг-коллега:

1️⃣ Что выведет консоль? Аргументируйте свой ответ.

2️⃣ Что выведет консоль? Аргументируйте свой ответ.

3️⃣ Создайте метод у объекта String, который многократно повторяет строку (не используя метод .repeat()).

4️⃣ Есть список элементов button, на которые навешен обработчик события ‘click’. Что попадет в консоль, если пользователь нажмет первую и последнюю кнопку в списке? Аргументируйте свой ответ.

5️⃣ Что выведет в консоль следующий код? Аргументируйте свой ответ.

6️⃣ Напишите функцию isPalindrome(str), которая проверяет, является ли строка палиндромом

7️⃣ Напишите функцию, складывающую 2 числа, которую можно вызывать следующим образом:

8️⃣ Поменяйте местами значения целочисленных переменных, не используя временные переменные. Первый вариант — используя ES6, и второй вариант – используя ES5.

9️⃣ Напишите функцию, проверяющую число на четность, используя только битовые операции

К сожалению, мне удалось в первоисточнике собрать только практические задачки по JS 😕 Но на память могу сказать, что так же интервьюеры интересовались следующими темами:

1️⃣ Иммутабельность в контексте React + Redux;

2️⃣ Дан не сложный компонент на реакте и необходимо провести ревью (заюзать хуки useMemo / useCallback, вынести повторяющийся код в функцию или переменную и что-то там еще было);

3️⃣ Причины ререндера компонентов и как их избежать (те же useMemo, React.Memo, разбиение на более мелкие компоненты и т.д.);

4️⃣ Event Loop, call stack и где это применяется;

5️⃣ Async / await / Promise;

6️⃣ requestAnimationFrame;

7️⃣ Задача на рекурсию;

8️⃣ Рассказать про основные этапы рендера страницы. Какие ресурсы блокируют парсинг, а какие нет. Чем отличается async от defer. Этапы рендера (DOM/CSSOM, Render Tree, Layout, Paint);

9️⃣ Как можно оптимизировать страницу (не блокирующие скрипты, минификация CSS/JS, сжатие изображений, указание размеров изображений, фолбеки для шрифта, выделение critical CSS);

1️⃣0️⃣ Какие CSS-свойства влияют на производительность (преимущество transform: translate перед margin).

Добавить комментарий

Ваш адрес email не будет опубликован.