Вопросы и задачи на собеседовании JS в 2024 году

Во время собеседования с программистом важно задать такие вопросы, чтобы оценить уровень опыта, навыков кандидата, а также определить, насколько он подходит для работы с JavaScript в вашей команде. 

Варианты вопросов с ответами для Js junior во время технического собеседования

Предлагаем ознакомиться с наиболее интересными вопросами для разработчиков джаваскрипт, которые можно задать джуниору. В статье также найдете ответы, которые помогут подготовиться к интервью.

• Что такое файлы cookie в JavaScript?

Cookies – небольшие текстовые файлы, которые создаются в момент при входе на веб-сайты и хранятся на компьютере. В них может содержаться информация о пользователе, данные о содержимом корзины заказов из прошлых посещений сайта.

• Как сделать cookie?

Пример, как выглядит простейший метод JavaScript для создания файлов cookie:

document.cookie = “key1 = value1; key2 = value2; expires = date”;

• Назовите недостатки использования JavaScript.

Основной недостаток JavaScript – безопасность. Сюда же относится широта использования и адаптируемость. Это создает дополнительные сложности для программирования и может привести к неравномерной производительности на разных системах.

• Примитивные типы данных в JavaScript – что это?

Это фундаментальный тип данных: все, что не является объектом и ограничено представлением одного значения. Все примитивы неизменяемые (иммутабельные). В джаваскрипт доступно 7 примитивов: undefined, null, boolean, string, number, bigint, symbol.

• Что такое замыкание (closure) в JavaScript и как оно работает?

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

• Что такое event bubbling и event capturing в JavaScript?

Это два механизма обработки событий в джаваскрипт. При event bubbling событие в первую очередь обрабатывается на самом вложенном элементе, а во вторую – передается по цепочке родительских элементов. При event capturing происходит наоборот: событие сначала обрабатывается на верхнем родительском элементе, а далее уже передается к вложенному элементу.

• Как обработать ошибки (exceptions) в JavaScript?

Из-за промахов скрипты иногда содержат ошибки. Обычно в этом случае скрипт «падает» (останавливается), ошибка выводится в консоль. Но есть конструкция try...catch, которая умеет ловить ошибки и совершать какие-либо действия вместо падения.

• Что такое callback-функция?

Колбэк-функция или функция обратного вызова предназначена для отложенного выполнения. То есть, она должна быть выполнена после того, как будет завершена работа другой функции.

• Как работают таймеры в JavaScript?

Таймеры нужны для запуска или повторения фрагмента кода в определенное время. Для запуска используют методы: setTimeout, setInterval, clearInterval. Метод setTimeout устанавливает таймер, который запускает функцию после заданной задержки. Метод setInterval запускает нужную функцию с заданной задержкой. Остановить ее можно только отменой. 

С помощью метода clearInterval таймер сообщает об окончании. Таймеры запускаются в одном потоке, то есть события могут становиться в очередь до выполнения.

• «Строгий» режим. Что это и как его активировать?

Этот режим применяется для улучшения проверки ошибок в коде. При использовании он применяет строгие правила, ограничения, тем самым выявляет частые ошибки. Его можно включить для каждого файла/функции, начав их с с «use strict».

Варианты вопросов с ответами для Js middle во время технического собеседования

• Какие методы у массивов в JavaScript?

Массивы имеют множество методов для выполнения операций. Например, некоторые из них включают методы push(), чтобы добавить элемент в конец массива; pop() – для удаления последнего элемента, join() – для объединения элементов массива в строку, sort() – для сортировки элементов массива.

• Как проверить, является ли значение массивом?

Для этого следует использовать метод Array.isArray. Он возвращает true, если переданный аргумент является массивом, и false в противном случае.

• В чем отличия undefined от null?

Undefined – объявленная переменная, которой еще не присвоено значение, это тип сам по себе. Null – это значение присваивания, объект. Его можно использовать для указания отсутствия значения и присваивать переменной. Undefined и null также являются двумя разными типами.

• Назовите фреймворки JavaScript.

Существует несколько фреймворков, наиболее известные: 

• - React

• - Angular

• - Vue

• - JQuery

• - Backbone

• В чем разница между использованием «var», «let» и «const»?

Разница между ними в уровне охвата. Var – оператор переменных джаваскрипт. Используется для объявления переменной и можно задавать ее значение. Const – идея константных функций. Она не позволяет функциям изменять объект, для которого они вызываются. Let – это сигнал о том, что переменная может быть переназначена.

Эта технология позволяет обмениваться данными между клиентом и сервером без перезагрузки страницы. AJAX делает асинхронные запросы на сервер и обрабатывает данные, предоставляющие желаемый результат.

• Какие приемы работы с асинхронным кодом в JS Вы знаете?

• - Функции обратного вызова (Callbacks).
• - Промисы (Promises).
• - Async/await.
• - Библиотеки вроде async.js, blueprint, q, co.

• Для чего используются операторы break и continue?

Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода. Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции, а оператор continue прерывает одну итерацию и продолжает следующую в цикле.

• В чем смысл оборачивания содержимого исходного JS-файла в блок функции?

Метод заключает в себя содержимое файла, создавая приватное пространство имен. Это позволяет обеспечить коду собственный блок видимости и избежать конфликта между объектами JavaScript и библиотеками, в которых они размещены.

• Что такое классы (classes)?

Это относительно новый способ в JS для написания функций-конструкторов. Они представляют собой синтаксический сахар над функциями-конструкторами. В реальности в джава скрипт объекты по-прежнему создаются на основе объектов или прототипов, а не на основе классов.

• Что такое объект Set?

Объект Set позволяет хранить уникальные значения, примитивы и ссылки на объекты. С помощью алгоритма SameZeroValue он проверяет значения, которые в нем хранятся.

Практические задачи для js-junior и js-middle.

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

Задача №1. Напишите функцию на джаваскрипт, которая принимает параметр со строкой и преобразовывает ее в следующий вид:

"Привет Мир" => "прИвЕт мИр"

"Азбука Вкуса" => "АзбУкА вкУсА"

 Подсказка: "а", "е", "ё", "и", "о", "у", "ы", "э", "ю", "я"

Ответ:

function stringChanger(str) {

    let result = ""

    let letters = ["а", "е", "ё", "и", "о", "у", "ы", "э", "ю", "я"]

    for (let i = 0; i < str.length; i += 1) {

        if (letters.includes(str[i].toLowerCase())) {

            result = result + str[i].toUpperCase()

        } else {

        result = result + str[i].toLowerCase()

        }

    }

    return result

}

console.log(stringChanger("Привет Мир")) // "прИвЕт мИр"

console.log(stringChanger("Азбука Вкуса")) // "АзбУкА вкУсА"

Задача №2. Преобразование массива в объект с группировкой и фильтрацией элементов.

Напишите функцию, которая на вход принимает массив из студентов, где студент – объект с полями «имя», «возраст» и «номер группы» {name: string, age: number, groupId: number}. На выходе возвращает объект, где ключ – это номер группы, а значение – массив из студентов старше 17 лет.

Решение:

// O(n) time | O(n) space

const groupOnlyMatureStudentsByGroup = (students) =>

  students.reduce(

    (acc, student) =>

      student.age < 18

        ? acc

        : acc[student.groupId]

        ? acc[student.groupId].push(student) && acc

        : (acc[student.groupId] = [student]) && acc,

    {}

  );

Вывод.

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