Вопросы JavaScript на собеседовании

JavaScript-собеседование проверяет не только знание методов массива. Интервьюеру важно увидеть, понимаете ли вы типы, область видимости, функции, асинхронность, DOM и типовые причины странного поведения кода

Сильный ответ почти всегда содержит пример. Если можете написать маленький фрагмент кода и объяснить его словами, вы выглядите намного увереннее

Типы и сравнение

Частые вопросы:

• Какие типы данных есть в JavaScript
• Чем null отличается от undefined
• Чем == отличается от ===
• Что такое truthy и falsy
• Почему NaN !== NaN
• Как проверить, что значение является массивом

Пример ответа про null и undefined:

undefined обычно означает, что значение не задано. null чаще используют как явное пустое значение: мы сами говорим, что объекта сейчас нет. В рабочем коде важно не смешивать эти случаи без причины

Пример кода:

const user = null;

if (user === null) {
  console.log("Пользователь не выбран");
}

Не отвечайте только «одно пустое и другое пустое». Объясняйте, кто и когда создает это значение

По этой теме полезно отдельно посмотреть Идеи приложений на JavaScript для портфолио, чтобы расширить контекст и сравнить подходы

По этой теме полезно отдельно посмотреть Задачи по JavaScript для начинающих, чтобы расширить контекст и сравнить подходы

Переменные и область видимости

Что могут спросить:

• Чем отличаются var, let и const
• Что такое hoisting
• Что такое блочная область видимости
• Можно ли менять объект, объявленный через const
• Что такое замыкание

Пример ответа про const:

const запрещает присвоить переменной новую ссылку. Но если внутри лежит объект, его свойства все еще можно менять, если сам объект не заморожен

Код:

const user = { name: "Anna" };
user.name = "Ivan";

// user = {} нельзя

Такой пример показывает, что вы понимаете разницу между переменной и объектом

Функции, this и замыкания

this часто путают, поэтому отвечайте через место вызова

Частые вопросы:

• Чем обычная функция отличается от стрелочной
• Как определяется this
• Почему метод объекта может потерять this
• Что делают call, apply, bind
• Что такое замыкание

Пример ответа про стрелочную функцию:

Стрелочная функция не создает собственный this, а берет его из внешней области. Поэтому она удобна в callback, но не всегда подходит как метод объекта

Код:

const counter = {
  value: 0,
  inc() {
    this.value += 1;
  }
};

Если передать counter.inc отдельно, метод может потерять связь с объектом. Это хороший пример для объяснения this

Массивы и объекты

Многие практические задания строятся вокруг обработки массивов

Повторите:

• map, filter, reduce, find, some, every
• копирование массива и объекта
• spread-оператор
• мутация и создание нового значения
• сортировка

Пример задачи:

const users = [
  { name: "Anna", active: true },
  { name: "Ivan", active: false }
];

const activeNames = users
  .filter(user => user.active)
  .map(user => user.name);

На собеседовании объясняйте: сначала оставляем активных пользователей, потом превращаем объекты в имена

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

Это обязательный блок для frontend и Node.js

Частые вопросы:

• Что такое event loop
• Чем callback отличается от Promise
• Как работает async/await
• Как обработать ошибку в async-функции
• Чем Promise.all отличается от последовательного await
• Почему setTimeout(..., 0) не выполняется прямо сейчас

Пример ответа:

async/await делает асинхронный код похожим на последовательный, но операция все равно выполняется не мгновенно. Если внутри await запрос к серверу, функция приостанавливается, а остальной код может продолжать работу

Код:

async function loadUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    return await response.json();
  } catch (error) {
    console.error("Не удалось загрузить пользователя", error);
    return null;
  }
}

Хороший кандидат не забывает про обработку ошибки

DOM и безопасность

Для frontend часто спрашивают:

• Как найти элемент на странице
• Как повесить обработчик события
• Чем textContent отличается от innerHTML
• Что такое всплытие события
• Как остановить стандартное действие формы
• Почему опасно вставлять пользовательский ввод через innerHTML

Пример:

button.addEventListener("click", () => {
  title.textContent = input.value;
});

textContent безопаснее для простого текста, потому что не интерпретирует строку как HTML

Практические задания

Подготовьте решения для таких задач:

• посчитать сумму значений в массиве
• убрать дубликаты
• сгруппировать объекты по полю
• найти первый элемент по условию
• написать debounce простыми словами
• обработать ошибку запроса
• объяснить порядок вывода console.log с setTimeout и Promise

Когда решаете задачу, проговаривайте входные данные, выбранный метод, результат и крайние случаи

Как объяснять порядок выполнения кода

JavaScript часто проверяют через вопросы «что выведет код». Не угадывайте. Разбирайте порядок

Пример:

console.log("A");

setTimeout(() => console.log("B"), 0);

Promise.resolve().then(() => console.log("C"));

console.log("D");

Хороший ответ:

Сначала выполняется синхронный код: A и D. Потом выполнится микрозадача Promise: C. Потом задача из setTimeout: B. Поэтому порядок будет A, D, C, B

Такой разбор показывает, что вы понимаете event loop хотя бы на базовом уровне

Как решать задачи на массивы

Если дали массив объектов, сначала проговорите цель

Пример:

Нужно получить имена активных пользователей. Я сначала отфильтрую активных через filter, потом возьму имена через map. Это читается лучше, чем один большой цикл с несколькими условиями

Код:

const names = users
  .filter(user => user.active)
  .map(user => user.name);

Если интервьюер спросит про производительность, можно сказать, что для очень больших массивов один цикл может быть эффективнее, но для обычного кода важна читаемость

Типичные ошибки кандидатов

• используют ==, не объясняя преобразования типов
• говорят, что const делает объект неизменяемым
• путают стрелочную функцию и обычную функцию в вопросах про this
• забывают catch у асинхронного запроса
• вставляют пользовательский ввод через innerHTML
• знают названия map и filter, но не могут объяснить результат
• не проверяют пустой массив или отсутствие поля

Эти ошибки легко исправить, если готовить не термины, а маленькие примеры

Что сказать, если вопрос глубже вашего уровня

Пример:

Я не готов подробно разобрать внутренности движка, но на уровне приложения понимаю так: синхронный код выполняется сразу, Promise попадает в очередь микрозадач, а setTimeout - в очередь задач. Поэтому Promise обычно выполнится раньше таймера с нулевой задержкой

Честная граница знаний выглядит нормально, если базовая идея объяснена уверенно

Как подготовить мини-портфолио ответов

Для JavaScript полезно иметь 3-4 маленьких фрагмента кода, которые вы можете написать без подсказки

• фильтрация и преобразование массива
• запрос через fetch с обработкой ошибки
• простой обработчик события
• пример замыкания
• пример потери this

Мини-ответ про замыкание:

Замыкание возникает, когда функция помнит переменные из внешней области даже после того, как внешняя функция завершилась

Код:

function createCounter() {
  let value = 0;
  return function () {
    value += 1;
    return value;
  };
}

Если вы можете объяснить этот пример спокойно, вопрос про closures уже не выглядит страшным

Как говорить про опыт без большого коммерческого проекта

Если опыта мало, покажите учебную практику:

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

Это лучше, чем просто перечислить HTML, CSS и JavaScript

Часто задаваемые вопросы

Что повторить первым делом?

Типы, сравнение, функции, область видимости, массивы, объекты, Promise, async/await, DOM

Нужно ли знать event loop глубоко?

Для junior достаточно порядка выполнения и общей идеи. Для middle нужно увереннее говорить про microtasks и macrotasks

Как не растеряться на задаче?

Сначала решите простым способом, потом улучшайте. Интервьюеру важен ход мысли, а не мгновенная идеальность