Обложка статьи «5 простых тестовых заданий на позицию Junior Frontend-разработчик»

5 простых тестовых заданий на позицию Junior Frontend-разработчик

Рассказывает Дарья Пушкарская — основатель и владелец онлайн-школы в IT-сфере Web Hero School

По статистике наших студентов, каждое пятое собеседование на вакансию Junior Frontend-разработчик — успешное. Большую роль в конечном решении по кандидату играет тестовое задание и вопросы. Это один из этапов отбора, и если вы до него дошли — поздравляем, это уже большое достижение! Теперь вам нужно показать то, чему вы научились, чтобы занять желаемую должность.

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

1. Что выведет на экран следующий код?

function b(x, y, a) {
	arguments[2] = 10;
	alert(a);
}
b(1, 2, 3);

Ответ: 10

Пояснение: В функции b 3 аргумента, индексы которых начинаются с [0]. Таким образом, аргумент с индексом [2]  — это a. В первой строке функции третьему аргументу функции присваивается значение 10.

2. Что выведет в консоль следующий код?

console.log(false == undefined);
console.log(false == null);
console.log(null == undefined);

Ответ: false false true

Пояснение: == сравнивает на равенство и не проверяет идентичность типов, поэтому в третьей строке кода в консоль будет выведено значение true.

3. Что выведет в консоль следующий код?

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

Ответ: 1

Пояснение: В данном примере выполнена деструктуризация. По умолчанию переменной у присваивается значение первого элемента массива.

4. В каком порядке исполняются скрипты? Почему?

<script async src="script-1.js"></script> // Время загрузки скрипта 1.5s
<script src="script-2.js"></script> // Время загрузки скрипта 1s
<script defer src="script-3.js"></script> // Время загрузки скрипта 3s
<script defer src="script-4.js"></script> // Время загрузки скрипта 1.5s
<script src="script-5.js"></script> // Время загрузки скрипта 2s
<script async src="script-6.js"></script> // Время загрузки скрипта 1s
<script defer src="script-7.js"></script> // Время загрузки скрипта 0.1s

Ответ: 

  1. <script src="script-2.js"></script> // Время загрузки скрипта 1s
  2. <script async src="script-6.js"></script> // Время загрузки скрипта 1s
  3. <script async src="script-1.js"></script> // Время загрузки скрипта 1.5s
  4. <script src="script-5.js"></script> // Время загрузки скрипта 2s
  5. <script defer src="script-3.js"></script> // Время загрузки скрипта 3s
  6. <script defer src="script-4.js"></script> // Время загрузки скрипта 1.5s
  7. <script defer src="script-7.js"></script> // Время загрузки скрипта 0.1s

Пояснение: Когда браузер загружает HTML и доходит до тега <script>...</script>, он не может продолжать строить DOM. Он должен сначала выполнить скрипт. То же самое происходит и с внешними скриптами <script src="..."></script>: браузер должен подождать, пока загрузится скрипт, выполнить его, и только затем обработать остальную страницу.

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

defer: Порядок документа (как расположены в документе). Выполняется после того, как документ загружен и обработан (ждёт), непосредственно перед DOMContentLoaded.

Поэтому сначала исполнится скрипт 1, поскольку он первый в очереди и по скорости загрузки. Далее 2, потому что у него скорость загрузки такая же быстрая  —  1 секунда. Загрузка асинхронно — вне очереди, 3 скрипт загружается за 1,5 секунды и выполняется сразу после загрузки, затем 4 скрипт загружается в порядке очереди и по скорости 2 секунды, последние скрипты — 5, 6, 7. Они загружаются в конце и в порядке очереди размещения в DOM.

5. Что выведет в консоль этот код?

let x = 3;
function fn() {
    x = 10;
    return;
    function x() {}
}

fn();
console.log(x);

Ответ:  3

Пояснение:  х объявлена как функция, поэтому в итоге она перезаписалась с 10 на 3.

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

  1. Работодатель прекрасно понимает, что вы не знаете всего, поскольку вы не middle или senior разработчик. С вас не будут требовать высокого уровня выполнения кода, но это не повод расслабляться.
  2. Правильного эталонного решения задачи не существует. Если вы не знаете, как справиться с тестовым — сделайте несколько предположений и продемонстрируйте свой ход мыслей.
  3. Программирование — это развитие практических навыков, поэтому решайте как можно больше задач, чтобы развивать в себе навык профильного мышления.
  4. Соискатель допускает, что вы не знаете решения, и что такие ситуации будут происходить и в работе. Поэтому важно показать ваш ход мыслей, когда вы не знаете ответов. Озвучивайте или пишите предположения, описывайте попытки, демонстрируйте свою готовность к подобным вызовам.
  5. Одно из ключевых качеств джуниора — уметь задавать вопросы, работать с обратной связью и быстро обучаться. Покажите свою готовность развиваться и проактивность через вопросы. Когда вы сдали задание, попросите обратную связь по нему. Поинтересуйтесь, чего от вас ожидали, насколько ваше решение оптимально. Это выделит вас среди других кандидатов.

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