Написать пост

Примеры задач по JavaScript для подготовки джуна к собеседованию по фронтенду

Аватар Типичный программист
Типичный программист

В материале разработчик приводит несколько задач, которые чаще всего попадаются на позицию Junior/Middle Frontend

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

У меня большой опыт в прохождении и проведении собеседований по JavaScript и решении немалого количества задач. В этом материале я покажу несколько задач, которые чаще всего попадаются на позицию Junior/Middle Frontend. Они не самые простые, поэтому для каждой вы найдете развернутый ответ. Советую сначала попробовать решить самостоятельно, а затем открывать спойлер ?

Что выведет console.log в Promise.race?

			const first = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "один");
});
 
const second = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "два");
});
 
Promise.race([first, second]).then(res => console.log(res));
  • A: “один”
  • B: “два”
  • C: “два” “один”
  • D: “один” “два”
Ответ

Ответ: B

Когда мы передаем несколько промисов методу Promise.race, он разрешает/отклоняет первый промис, который разрешается/отклоняется. В метод setTimeout мы передаем таймер: 500 мс для первого промиса (first) и 100 мс для второго промиса (second). Это означает, что second разрешается первым со значением ‘два’. res теперь содержит значение ‘два’, которое выводиться в консоль.

Какое значение result?

const result = parseInt("7*6", 10);

  • A: 42
  • B: “42”
  • C: 7
  • D: NaN
Ответ

Ответ: C

Только первые числа в строке возвращаются. На основе системы счисления (второй аргумент, чтобы указать, к какому типу чисел мы хотим его анализировать: основание 10, шестнадцатеричное, восьмеричное, двоичное и т.д.), ParseInt проверяет, являются ли символы в строке допустимыми. Как только он встречает символ, который не является допустимым числом в основании, он прекращает синтаксический анализ и игнорирует следующие символы.

* не является допустимым числом. Он только разбирает “7” в десятичную 7. num теперь содержит значение 7.

Является ли функция sum чистой функцией?

			function sum(a, b) {
  return a + b;
}
  • A: Нет
  • B: Да
Ответ

Ответ: Б

Чистая функция — это функция, которая всегда возвращает тот же результат, если переданы одинаковые аргументы.

Функция sum всегда возвращает один и тот же результат. Если мы передадим 2 и 3, он всегда вернет 5 без побочных эффектов. Если мы передадим 50 и 100, он всегда вернет 150 и так далее. Это определение чистой функции.

Какое значение будет на выходе?

			const client = {
  name: "Mr. Smith",
  age: 21
}
 
const increaseAge = (x = { ...client }) => x.age += 1
const changeAgeAndName = (x = { ...client }) => {
  x.age += 1
  x.name = "Ivan"
}
 
increaseAge(client)
changeAgeAndName()
 
console.log(client)
  • A: {name: "Ivan", age: 22}
  • B: {name: "Ivan", age: 23}
  • C: {name: "Mr. Smith", age: 22}
  • D: {name: "Mr. Smith", age: 23}
Ответ

Ответ: C

Функции increaseAge и changeAgeAndName имеют параметр по умолчанию, а именно вновь созданный объект { ...client }. Этот объект имеет копии всех ключей/значений объекта client.

Сначала мы вызываем функцию increaseAge и передаем объект client в качестве аргумента. Эта функция увеличивает значение свойства age на 1. client теперь {name: "Mr. Smith", age: 22}.

Затем мы вызываем функцию changeAgeAndName, однако мы не передаем параметр. Вместо этого значение x равно новому объекту: { ...client }. Поскольку это новый объект, он не влияет на значения свойств объекта client. client по-прежнему равен {name: "Mr. Smith", age: 22}.

Какой будет вывод?

			const firstName = "Petr"
console.log(firstName())
  • A: Undefined
  • B: ReferenceError
  • C: TypeError
  • D: SyntaxError
Ответ

Ответ: C

Переменная firstName содержит значение строки, которая не является функцией, поэтому не может вызываться.

Ошибки типа выдаются, когда значение не соответствует ожидаемому типу. JavaScript ожидал, что firstName будет функцией, так как мы пытаемся вызвать ее. Однако это была строка, поэтому выдается ошибка TypeError: name не является функцией!

Синтаксические ошибки генерируются, когда вы написали что-то, что не является допустимым JavaScript, например, когда вы написали слово return как retrun. ReferenceError генерируется, когда JavaScript не может найти ссылку на значение, к которому вы пытаетесь получить доступ.

5 простых тестовых заданий на позицию Junior Frontend-разработчик
tproger.ru
Следите за новыми постами
Следите за новыми постами по любимым темам
28К открытий28К показов
Также рекомендуем
Обложка поста Знать Scala — желательно, Spark — обязательно. Что нужно уметь начинающим и опытным дата-инженерам: исследование Яндекс Практикума
Знать Scala — желательно, Spark — обязательно. Что нужно уметь начинающим и опытным дата-инженерам: исследование Яндекс Практикума
Яндекс Практикум изучил самые востребованные навыки для junior, middle и senior дата-инженеров. Разбираемся, где и как себя прокачивать, чтобы войти в профессию и расти в ней.
Обложка поста Зачем нужен MISRA C — стандарт с огромным количеством запретов
Зачем нужен MISRA C — стандарт с огромным количеством запретов
Рассказываем, что такое стандарт MISRA для кода на С и С++, почему в MISRA описана сотня запретов и как применять стандарт в разработке ПО.
Обложка поста Perl-разработчик: чем занимается и почему востребован
Perl-разработчик: чем занимается и почему востребован
Рассказываем, где и над чем работают Perl-разработчики, и делимся подборкой полезных материалов для изучения языка.
Обложка поста Как обеспечить безопасность телеграм-бота
Как обеспечить безопасность телеграм-бота
В этой статье мы поговорим о том, как обеспечить безопасность вашего телеграм-бота на Python, чтобы избежать спама, фишинга и DDoS-атак.