Вопросы на собеседовании Junior Frontend: разбор с примерами кода

Введение

Собеседование на позицию Junior Frontend разработчика редко проверяет глубокие знания архитектуры — вместо этого работодатель хочет убедиться, что кандидат понимает базовые механизмы JavaScript, CSS и браузера, а не просто копирует код из туториалов. В этой статье разберём типичные вопросы, которые встречаются на таких собеседованиях, с примерами кода и объяснением, почему ответ именно такой.

Вопросы по HTML и CSS

Один из самых частых вопросов — разница между block, inline и inline-block. Блочные элементы занимают всю ширину родителя и начинаются с новой строки, строчные — только ширину содержимого и не разрывают строку, а inline-block совмещает поведение: не разрывает строку, но позволяет задавать ширину и высоту.

Часто спрашивают про box-sizing:

/* по умолчанию padding и border увеличивают итоговый размер блока */
.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* итоговая ширина будет 250px */
}

/* border-box включает padding и border в заданную ширину */
.box-fixed {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* итоговая ширина останется 200px */
}

Также проверяют понимание Flexbox и Grid: чем они отличаются и когда что использовать. Flexbox лучше подходит для одномерной раскладки (в строку или столбец), а Grid — для двумерной сетки с явным контролем строк и колонок.

Вопросы по JavaScript: основы

Классический вопрос — разница между var, let и const. Переменные var имеют функциональную область видимости и поднимаются (hoisting) с инициализацией undefined, а let и const имеют блочную область видимости и попадают во временную мёртвую зону до объявления.

console.log(a); // undefined, потому что var поднимается
var a = 1;

console.log(b); // ошибка ReferenceError
let b = 2;

Ещё один популярный вопрос — что такое замыкание (closure). Замыкание — это функция, которая запоминает переменные из внешней области видимости даже после того, как внешняя функция завершила выполнение.

function createCounter() {
  let count = 0;
  // возвращаемая функция "помнит" переменную count
  return function () {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

Часто спрашивают про поведение this в разных контекстах, особенно в стрелочных функциях, которые не имеют собственного this и берут его из внешнего лексического контекста.

const obj = {
  name: "Junior",
  regularFn: function () {
    console.log(this.name); // "Junior", this — объект obj
  },
  arrowFn: () => {
    console.log(this.name); // undefined, this берётся снаружи
  },
};

Асинхронность в JavaScript

Асинхронность — одна из самых частых тем на собеседованиях junior уровня. Кандидату важно объяснить разницу между колбэками, промисами и async/await, а также понимать, что такое event loop и очередь микрозадач.

console.log("старт");

setTimeout(() => {
  console.log("таймер"); // выполнится после микрозадач
}, 0);

Promise.resolve().then(() => {
  console.log("промис"); // выполнится раньше таймера
});

console.log("конец");

// порядок вывода: старт, конец, промис, таймер

Это классический вопрос про очередь микрозадач и макрозадач: промисы обрабатываются раньше, чем колбэки setTimeout, потому что микрозадачи имеют более высокий приоритет.

Также стоит уметь объяснить async/await как синтаксический сахар над промисами:

async function getUser() {
  try {
    const response = await fetch("/api/user");
    const data = await response.json();
    return data;
  } catch (error) {
    // обработка ошибки сети или парсинга
    console.error("Ошибка загрузки пользователя", error);
  }
}

Вопросы по DOM и браузеру

Кандидата могут спросить про разницу между событиями bubbling и capturing. По умолчанию события всплывают от целевого элемента к родителям, но можно перехватить их и на фазе погружения.

document.getElementById("parent").addEventListener(
  "click",
  () => console.log("фаза погружения"),
  true // третий аргумент включает capturing
);

Ещё частый вопрос — разница между localStorage, sessionStorage и cookies. localStorage хранит данные без срока действия, sessionStorage — только на время сессии вкладки, а cookies отправляются на сервер с каждым запросом и имеют ограниченный размер.

Вопросы по инструментам и экосистеме

HR и технические интервьюеры часто спрашивают про базовые команды Git (git rebase, git merge, разрешение конфликтов), про то, зачем нужны бандлеры вроде Webpack или Vite, и почему код транспилируют через Babel. Junior разработчику важно понимать, что эти инструменты решают: сборку модулей, оптимизацию и поддержку старых браузеров.

Частые ошибки

Кандидаты часто путают null и undefined, не могут объяснить разницу между поверхностным и глубоким копированием объектов, а также путаются в приоритете CSS-селекторов. Ещё одна типичная ошибка — заучивание определений без понимания: например, кандидат говорит, что замыкание это "функция внутри функции", но не может объяснить, зачем оно нужно и как работает на практике. Также многие не готовы объяснить, почему NaN !== NaN или почему сравнение объектов через === сравнивает ссылки, а не содержимое.

Заключение

Собеседование Junior Frontend разработчика в первую очередь проверяет фундамент: понимание JavaScript, CSS и работы браузера, а не количество выученных фреймворков. Лучшая подготовка — не заучивать ответы, а разбираться в механике языка настолько, чтобы уметь объяснить любой пример своими словами и написать рабочий код на собеседовании.