Технические вопросы на собеседовании frontend разработчика

Опубликовано: 2022-02-11

Всем привет! Сегодня я разберу вопросы, которые меня лично спрашивали на собеседовании на должность middle/senior frontend developer в одну из самых крупных компаний Росиии. Эту компанию точно знают все, поэтому думаю что будет интересно. Собеседование было в январе 2022 года, совсем недавно, поэтому вопросы актуальные. Прошу заметить, что вопросов на собеседовании frontend разработчика существует тысячи и это скорее всего зависит от конкретного человека, инженера который собеседует вас. Поэтому это лишь самая малая часть того, что может быть на собеседованиях и я делюсь с вами исключительно своим опытом.

Первое, давайте рассмотрим вот такую задачу. Нужно реализовать тело функции delay, чтобы она прошла тест.

function delay(ms) {}
test("delay", async () => {
 const start = Number(new Date());
 await delay(100);
 const elapsed = Number(new Date()) - start;
 expect(elapsed).toBeGreaterThanOrEqual(100);
 expect(elapsed).toBeLessThan(120);
});

Тут вопрос затрагивает понятие асинхронности в JavaScript. То есть нам нужно сделать задержку на 100ms. Мы видим ключевое слово await. Оно обозначает что нам нужно вернуть promise из функции delay. Promise - это обёртка над асинхронным кодом в языке JavaScript. То есть все что выполняется как асинхронный код мы будем писать в теле promise. Создавая объект класса promise, мы передаем в него callback функцию, которая принимает два аргумента. Первый аргумент функции это коллбэк успешного выполенения promise, второй аргумент это коллбэк неуспешного выполнения promise. В данном случае нам нужно создать таймаут и передать в него функцию callback, в которой зарезолвим промис через количество ms, переданное в delay. Выглядит решение вот так.

return new Promise((resolve,reject) => {
 setTimeout(() => {
   resolve();
 }, ms);
});

Второй вопрос, который был задан мне звучит следующим образом. Реализовать тело объекта object, чтобы у него появилось свойство prop "только для чтения". Тест должен пройти.

const object = {};
test("value doesn't change", () => {
 expect(object.prop).toBe(5);
 object.prop = 7;
 expect(object.prop).toBe(5);
});

Вопрос затрагивает геттеры и сеттеры в объектах JavaScript. Тут все просто, геттеры возвращают свойства объекта, сеттеры перезаписывают уже существующие свойства в объекте. Поэтому в методе get() возвращаем то, что нас просят. А в set() просто вернем undefined, тем самым не дадим изменить свойсто объекта.

const object = {
  set prop(val) {
    return
  },
  get prop() {
    return 5;
  },
};

Третий вопрос связан с понятие this в JavaScript. Существует понятие, что this самая сложная тема в JS. На самом деле, все не так сложно. This это просто контекст вызова функции в JS, то есть где в конкретный момент была вызвана эта функция. Еще можно сказать, что this это то что находится перед точкой при вызове метода объекта. Не изменяя тело функции getObject, опишите экспорт модуля, чтобы прошёл тест. Функция getObject должна быть вызвана и вернуть требуемый результат.

function getObject() {
  return this;
}

const object = {
  a: 1,
};

module.exports = /* code */

const getObject = require("./get-object");

test("gets object", () => {
  expect(getObject()).toEqual({ a: 1 });
});

Здесь мы будем использовать функцию bind, которая принимает контекст и аргументы, и возвращает новую функцию, которую если мы вызовем, она будет связана с тем контекстом в котором мы хотим ее вызвать. То есть функция, будет как бы "забиндина" на тот контекст, который мы передали в bind. Причем этот контекст у функции больше изменить не получится, то есть она всегда будет связана с этим объектом. В данном случае нам не нужны аргументы поэтому передаем null воторым параметром.

module.exports = getObject.bind(object,null);

На сегодня все, надеюсь что вы узнали чуть больше о языке JavaScript, и хоть немного о том, что могут вас спросить на собесе на должность frontend developer. Не бойтесь ходить по собесам и практиковаться, это очень важно для того, чтобы стать уверенным в себе и решать любые задачи, какие бы вас не спросили. Успехов вам!

Технические вопросы на собеседовании frontend разработчика

kirill pavlovskii