Проходя собеседования в этом году на позицию middle frontend-разработчик, я решил собрать вопросы, которые сейчас задают наши с вами коллеги.
0️⃣ Что выведет консоль?
|
1 2 3 4 |
console.log(1); setTimeout(() => console.log(2), 1000); setTimeout(() => console.log(3), 500); console.log(4); |
1️⃣ Что выведет консоль?
|
1 |
console.log(0.1 + 0.2 == 0.3) |
2️⃣ Классы, наследование, доступ к родительскому классу через super();
3️⃣ Что такое new?
4️⃣ Что такое замыкание?
5️⃣ Рассказать про контекст this;
6️⃣ Что выведет консоль?
|
1 |
console.log(1 + '2'); |
7️⃣ Что вернет функция?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function f() { let array = []; let index = 0; while(index < 5) { function item() { console.log(index); } array.push(item); ++index; } return array; }; let f2 = f(); f2[0](); |
8️⃣ Ограничения для использования React хуков. Имеется ввиду где в коде компонента можно их использовать, а где нет и почему;
9️⃣ Как можно прокинуть value, чтобы получилось 2
|
1 2 3 4 5 |
const [value, setValue] = useState(0)
; 1) setState(2)
; 2) setState(value + 1); setState(value + 1)
; 3) setState(value => value + 1); setState(value => value +1); |
1️⃣0️⃣ Тайпскрипт. Как описать в интерфейсе компонента:
— value, которое может быть строкой или числом;
— функцию getValue, которая возвращает value;
— функцию setValue, которая принимает параметры и сетает value;
1️⃣1️⃣ Вопрос для рассуждения. Есть стор (Redux или MobX — не важно) и два подхода к хранению данных в нем:
1) Все стейты вынесены в этот стор, компоненты не имеют локальных стейтов;
2) В стор вынесены всего два стейта, а остальное хранится в компонентах.
Нужно рассказать о минусах таких подходов;
1️⃣2️⃣ Что появится в DOMе если вызвать компоненты следующим образом:
|
1 2 3 4 |
<> <name/> <User/> <> |
Кастомные тег, компонент или ошибка?
1️⃣3️⃣ CSS-свойства, которые нежелательно использовать для анимации элементов, т.к. они будут вызывать перерисовку;
1️⃣4️⃣ Какие свойства нельзя назначать для блока если мы используем БЭМ-методологию;
1️⃣5️⃣ Вес селекторов. С каким цветом будет отображаться текст?
|
1 2 3 4 5 6 7 |
<div id="id" class="class"> <span>Some text</span> </div> .class span {color: red}; #p > span {color: green}; #p span {color: blue}; |
1️⃣6️⃣ Есть элемент, стилизованная под ссылку и элемент, стилизованная под кнопку. Первый элемент открывает попап, второй — редиректит юзера на страницу с корзиной. Какие теги нужно использовать в этих случаях?
1️⃣7️⃣ Браузерные способы хранения информации (cookies, session storage, local storage) и их основные различия;
А следом идут вопросы, на которые отвечал мой друг-коллега:
1️⃣ Что выведет консоль? Аргументируйте свой ответ.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(function() { f(); f = function() { console.log(1); } })() function f() { console.log(2) } f(); |
2️⃣ Что выведет консоль? Аргументируйте свой ответ.
|
1 2 3 4 5 6 7 8 9 10 11 |
const obj = { name: 'John', getName() { return this.name; } }; const name1 = obj.getName(); const getName = obj.getName; const name2 = getName(); console.log(`${name1} ${name2}`); // ? |
3️⃣ Создайте метод у объекта String, который многократно повторяет строку (не используя метод .repeat()).
|
1 |
console.log("hello". customRepeat(3)); // “hellohellohello” |
4️⃣ Есть список элементов button, на которые навешен обработчик события ‘click’. Что попадет в консоль, если пользователь нажмет первую и последнюю кнопку в списке? Аргументируйте свой ответ.
|
1 2 3 4 5 6 |
var nodes = document.getElementsByTagName('button'); for (var i = 0; i < nodes.length; i++) { nodes[i].addEventListener('click', function() { console.log('You clicked element #' + i); }); } |
5️⃣ Что выведет в консоль следующий код? Аргументируйте свой ответ.
|
1 2 3 4 5 6 7 8 |
function printme() { console.log(1); setTimeout(function() { console.log(2); }, 1000); setTimeout(function() { console.log(3); }, 0); console.log(4); } printme(); |
6️⃣ Напишите функцию isPalindrome(str), которая проверяет, является ли строка палиндромом
|
1 |
console.log(isPalindrome('asdsa')) // true |
7️⃣ Напишите функцию, складывающую 2 числа, которую можно вызывать следующим образом:
|
1 2 |
console.log(sum(2,3)); // 5 console.log(sum(2)(3)); // 5 |
8️⃣ Поменяйте местами значения целочисленных переменных, не используя временные переменные. Первый вариант — используя ES6, и второй вариант – используя ES5.
|
1 2 3 4 5 |
var a = 1; var b = 2; // b = 1; // a = 2; |
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).