10 реальных вопросов с собеседования JavaScript-разработчика с ответами

Техническое собеседование — одно из самых стрессовых событий в карьере айтишника. Причём боятся его не только джуны, но и опытные разработчики. Ведь из-за волнения можно забыть ответы на элементарные вопросы.

Но мы призываем отставить панику! Главный секрет вашей уверенности — хорошая подготовка.

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

1. Какие типы данных есть вJavaScript

JavaScript имеет восемь встроенных типов данных:

• число (number) — целые числа и числа с плавающей запятой (float). Целые числа ограничены диапазоном ±(2^53-1), а числа с плавающей точкой имеют неограниченный диапазон

Пример:

			const a = 10; // целое число
const b = 3.14; // число с плавающей точкой
		

• строка (string) — представляет текстовую строку. Строки заключены в одинарные или двойные кавычки
• логический (boolean) — представляет логическое значение true или false
• Null — отсутствие значения или неопределённость
• Undefined — значение переменной, которая была объявлена, но не инициализирована
• объект (object) — представляет группу связанных данных. Объекты создаются с помощью оператора new

Пример:

			const person = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zipCode: "10001"
  },
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
		

• Symbol — тип данных для создания уникальных идентификаторов, например, ключей объекта
• BigInt — представляет очень большие целые числа

Пример:

			const a = BigInt(100000000000000000); // BigInt со значением 100 000 000 000 000 000
		

Подробнее о типах данных можно узнать здесь.

2. Как проверить, что число целое?

В JavaScript можно использовать встроенную функцию Number.isInteger(), чтобы определить, является ли переданное значение целым числом.

Пример использования:

			console.log(Number.isInteger(5));     // true

console.log(Number.isInteger(5.5));   // false

console.log(Number.isInteger(-10));   // true

console.log(Number.isInteger(0.75));  // false
		

Также можно реализовать подобную проверку самостоятельно, используя оператор остатка (%). Если результат деления числа на 1 равен нулю, то оно целое:

			function isInteger(number) {
    return number % 1 === 0;
}

// Пример использования
console.log(isInteger(5));      // true
console.log(isInteger(5.5));    // false
console.log(isInteger(-10));    // true
console.log(isInteger(0.75));   // false
		

Функция isInteger возвращает true, если число целое, и false в противном случае. Оператор % возвращает остаток от деления левого операнда на правый. Если число делится на 1 без остатка, то остаток равен 0 и число считается целым.

Но нужно учитывать, что числа в JavaScript представлены в формате IEEE 754, из-за чего возможны ошибки с точностью. Например:

			console.log(isInteger(5.0000000000000001)); // true
		

Хотя число 5.0000000000000001 не является целым, из-за особенностей работы с плавающей запятой оно округляется до 5 в памяти, и функция возвращает true. Поэтому для более надёжных проверок лучше использовать Number.isInteger().

3. Объясните, что такое callback, и приведите пример его использования

Callback (колбэк) в программировании — функция, которая передаётся в качестве аргумента в другую функцию и выполняется после завершения какого-то определённого события. Колбэки используют в асинхронных операциях — например, для выполнения запросов к серверу, обработки ошибок, чтения данных из файлов.

Вот простой пример использования callback в JavaScript:

			const makeRoll = function (title, cb) {
 console.log('Заказ на приготовление ролла «${title}» получен. Начинаем готовить…');
 setTimeout(cb, 3000);
}

const readBook = function () {
 console.log('Читаю книгу рецептов…');
}

const eatRoll = function () {
  console.log('Ура! Ролл готов, пора подкрепиться.');
}

makeRoll ('Филадельфия', eatRoll);
readBook();
		

Разберём по этапам, что здесь происходит:

1. Вызов makeRoll(‘Филадельфия’, eatRoll) запускает процесс приготовления ролла с названием «Филадельфия». Функция eatRoll передаётся в качестве колбэка (cb).
2. makeRoll выводит сообщение о заказе и устанавливает таймаут на 3 000 миллисекунд (3 секунды).
3. В это время код продолжает выполнение, и вызывается readBook, который выводит сообщение о чтении книги рецептов.
4. Проходит 3 секунды (время, установленное таймаутом в makeRoll), и вызывается колбэк eatRoll. В этот момент выводится сообщение «Ура! Ролл готов, пора подкрепиться».

4.Расскажите, что такое промисы, и приведите пример их использования

Промисы (Promises) — это механизм, предназначенный для управления асинхронными операциями (чтение данных из файлов, отправка запросов к серверам и др).

Промисы имеют три состояния:

• ожидание (Pending) — исходное состояние, в котором промис находится до тех пор, пока действие не завершится успешно или не будет отклонено
• выполнено (Fulfilled) — состояние, когда асинхронная операция завершилась успешно. Результат операции передаётся в функцию-обработчик
• отклонено (Rejected) — состояние, когда асинхронная операция завершилась неудачно. Ошибка передаётся в функцию-обработчик

Чтобы создать промис, нужно использовать конструктор Promise. Он принимает функцию с двумя параметрами: resolve (для успешного завершения) и reject (для отклонения).

			const myPromise = new Promise((resolve, reject) => {
    // Асинхронная операция (например, запрос к серверу)
    const success = true;

    if (success) {
        resolve('Успешное завершение!');
    } else {
        reject('Что-то пошло не так.');
    }
});

// Обработка результатов
myPromise
    .then((result) => {
        console.log('Успех:', result);
    })
    .catch((error) => {
        console.error('Ошибка:', error);
    });
		

В примере resolve вызывается в случае успешного завершения, а reject — в случае ошибки. Далее, чтобы обработать результаты работы промиса, обычно используют методы then и catch.

5. Как проверить, что две строки являются анаграммами?

Анаграммы — это слова или фразы, образованные с помощью перестановки букв другого слова или фразы. Для проверки, являются ли две строки анаграммами, вы можете следовать нескольким шагам:

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

Вот пример на JavaScript:

			function areAnagrams(str1, str2) {
    // Шаг 1: Проверяем длины строк
    if (str1.length !== str2.length) {
        return false;
    }

    // Шаг 2: Сортируем символы в строках и сравниваем результаты
    const sortedStr1 = str1.split('').sort().join('');
    const sortedStr2 = str2.split('').sort().join('');

    return sortedStr1 === sortedStr2;
}

// Пример использования
const string1 = "listen";
const string2 = "silent";

if (areAnagrams(string1, string2)) {
    console.log(`${string1} и ${string2} - анаграммы.`);
} else {
    console.log(`${string1} и ${string2} - не анаграммы.`);
}
		

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

6. Что такое стрелочные функции?

Стрелочные функции (arrow functions) — это новый синтаксис для определения функций в JavaScript, который был введён в стандарте ECMAScript 6 (ES6).

• стрелочные функции предоставляют более краткий и читаемый способ объявления функций
• в стрелочных функциях отсутствует собственный this. Они используют this из контекста, в котором были созданы
• стрелочные функции не имеют своего собственного объекта arguments. Вместо этого они используют arguments из своего родительского контекста

Пример стрелочной функции:

			const add = (x, y) => x + y;
console.log(add(1, 2)); // 3
		

7. Что такое DOM?

DOM, или Объектная модель документа (Document Object Model) — это структурированное представление веб-страницы или XML-документа в виде дерева объектов.

Основные концепции DOM включают в себя:

• дерево объектов — в нём каждый узел представляет часть документа, такую как элемент, атрибут, текстовый узел и так далее  
• HTML-элементы (<p>, <div>, <a> и другие) — представлены в виде узлов в структуре DOM. Каждый элемент может содержать дочерние элементы, атрибуты, текст и другие свойства  
• доступ и изменение — используя JavaScript, можно получать доступ к элементам DOM, изменять их содержимое, стили, атрибуты и даже структуру всего документа  
• события — DOM поддерживает обработку событий, таких как клики, наведение, изменение, чтобы реагировать на действия пользователя  

8. Что такое области видимости и какими они бывают?

Область видимости (scope) — это зона доступности переменных. В JavaScript есть четыре типа областей видимости:

• глобальная область видимости (global scope) включает всю программу. Переменные, объявленные в этой области видимости, доступны из любой точки программы  

			// Объявление переменной 
const globalVar = "Hello, world!";

// Доступ к переменной
console.log(globalVar); // Hello, world!
		

• локальная область видимости (local scope) включает тело функции или блока. Переменные, объявленные в данной области видимости, доступны только внутри соответствующей функции или блока кода  

			// Объявление функции
function myFunction() {
 // Объявление переменной
const localVar = "Hello, world!";

// Доступ к переменной 
  console.log(localVar); // Hello, world!
}

// Вызов функции
myFunction();
		

• блочная область видимости (block scope) включает фигурные скобки. Переменные, объявленные в данной области видимости, доступны только внутри этих фигурных скобок  

			if (true) {
  const blockVar = "Hello, world!";
  console.log(blockVar); // Hello, world!
}

// Попытка обратиться к blockVar за пределами блока вызовет ошибку
console.log(blockVar); // ReferenceError: blockVar is not defined
		

9. Что будет в консоли? console.log(0,1 + 0,2);

Это задача на внимательность. Код вызывает console.log с тремя аргументами, разделёнными запятыми: 0, 1 + 0 и 2. Поэтому в консоли мы увидим «0 1 2».

10. Что выведет код ниже?

			const numbers = [1, 2, 3, 4, 5];
const [y] = numbers;
console.log(y);
		

В этом коде создаётся массив numbers с элементами [1, 2, 3, 4, 5]. Затем используется деструктуризация массива, чтобы присвоить значение первого элемента массива переменной y. Наконец, значение переменной y выводится в консоль. Оно будет равно первому элементу массива numbers, то есть 1. Следовательно, в консоль будет выведено значение 1.

Удачи на собеседованиях!