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

Почему так получилось?

Не сказал бы, что ребята совсем были непригодны, а скорее наоборот. Полный отказ (не подходит нам и другим) получали примерно 30%. Остальные сортировались по рейтингу, который формировал я сам для личного удобства. Из одной сессии на 10 человек “финалистами” становились 1-2 человека с первых мест, которых брали на стажировку, хотя талантливых и достойных было примерно 7 из 10.

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

Начинаем интервью

Интервью с одним кандидатом занимает примерно 30-40 минут. Это достаточно мало, поэтому я имею четкий план:

1. Получить общее представление о человеке и его опыте (5 мин)

2. Знания JavaScript и CSS (20 мин)

3. Задача (10 мин)

4. Ответы на вопросы кандидата (5 мин)

Общее представление о человеке

Сначала я прошу человека рассказать немного о себе, буквально пару минут, то что он сам считает нужным.

Обычно со стажера нечего взять: у него нет опыта, нет понимания о процессах работы, что вообще делают программисты в крупных компаниях. И это нормально! Если человек говорит, что сейчас учится на 4 курсе и не имел никакого опыта, то это ок. Такие факты не поставят его ниже того, кто успел где-то подработать, что-то на фрилансе сделать и т.д.

Но. Всегда важно послушать про домашние проекты (туду листы, мессенджеры, чат-боты, дипломные проекты на React и прочее). Чем больше у вас такого опыта, тем лучше!

Я могу спросить про технологии, которые использовались в этих проектах (React, Redux, Vue, TypeScript, Node.js, styled-components, SCSS и т.д). Буквально пару минут, не углубляясь в точные вопросы. Ваша заинтересованность в изучении различных инструментов показывает, что вы выбрали фронтенд-направление осознанно и уже проделали огромную работу над собой, чтобы скрестить инструменты вместе и выдать работающий прототип чего-либо.

Знание языка JavaScript

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

Тема 1: Общее понимание особенностей языка

☝️ Что будет храниться в следующих переменных?

const var1 = true || false;
const var2 = true && false;
const var3 = 1 && 2;
const var4 = 1 || 2;
const var5 = 0 || 1;
const var6 = '1' + '2';
const var7 = '1' + 2;

console.log(var1); // true
console.log(var2); // false
console.log(var3); // 2
console.log(var4); // 1
console.log(var5); // 1
console.log(var6); // '12'
console.log(var7); // '12'

Тема 2. Переменные и области видимости

☝️ Каким ключевыми словами можно объявить переменные?

☝️ В чем различия этих ключевых слов?

☝️ Какая область видимости у переменных в js?

☝️ Что будет в результате выполнения следующего кода?

var test1 = 2;

function fn1 () {
  var test1 = 3;
  console.log(test1);
}

fn1();
console.log(test1);

3
2

☝️ Что будет в результате выполнения следующего кода?

var test1 = 2;

if (true) {
  var test1 = 3;
  console.log(test1);
}

console.log(test1);

3
3

☝️ Как сделать так, чтобы переменные из кода выше были изолированны в своей области? В глобальной области осталось 2, а в блоке if было 3?

const test1 = 2;

if (true) {
  const test1 = 3;
  console.log(test1);
}

console.log(test1);

Тема 3. Контекст

☝️ Что будет в контексте this?

function Person () {
  console.log(this);
}

const person1 = new Person();
const person2 = Person();

{}
window

Тема 4. Замыкания

☝️ Что такое замыкание?

☝️ Допишите функцию так, чтобы можно было получить количество вызовов метода add

function myMath () {
  // можно добавлять внутри этой функции что угодно
  return {
    add: function (a, b) {
      return a + b;
    },
		getNumOfCalls: function() {},
  };
}

const math = myMath();

math.add(2, 3);
math.add(1, 2);
math.add(4, 1);

const numOfCalls = math.getNumOfCalls();
console.log(numOfCalls); // 3

function myMath () {
  let count = 0;
  return {
    add: function (a, b) {
      count ++;
      return a + b;
    },
    getNumOfCalls: function () {
      return count;
    },
  };
}

const math = myMath();

math.add(2, 3);
math.add(1, 2);
math.add(4, 1);

const numOfCalls = math.getNumOfCalls();

console.log(numOfCalls); // 3;

Тема 5. Event loop

☝️ Что код выведет в консоли?

setTimeout(() => {
  console.log('Таймаут');
}, 0);

let p = new Promise((resolve, reject) => {
  console.log('Создание промиса');
  resolve();
});

p.then(function(){
  console.log('Обработка промиса');
});

console.log('Конец скрипта');

Создание промиса
Конец скрипта
Обработка промиса
Таймаут

CSS

☝️ Какие способы позиционирования знаешь?

Задача

Это второй основной этап после знаний языка. Здесь кандидату необходимо решить алгоритмическую задачу с написанием кода решения (желательно на JavaScript).

☝️ Представьте, что в js нет методов сортировки массивов. Попробуйте написать функцию самостоятельно.

function sort(arr) {
  // написать код
}

const arr = [3, 2, 6, 1, 5];
sort(arr);

console.log(arr); // [1, 2, 3, 5, 6]

function sort(arr) {
  for (let j = arr.length - 1; j > 0; j--) {
    for (let i = 0; i < j; i++) {
      if (arr[i] > arr[i + 1]) {
        [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
      }
    }
  }
  return arr;
}

const arr = [3, 2, 6, 1, 5];
sort(arr);

console.log(arr); // [1, 2, 3, 5, 6]

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

• человек рассказал как должен работать алгоритм по шагам

• человек написал код алгоритма

• код запускается и работает

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

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

Оценка кандидата

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

• Имя

• Общее понимание особенностей JS (0-10 баллов)

• Область видимости (0-10 баллов)

• Контекст (0-10 баллов)

• Замыкания (0-10 баллов)

• Event Loop (0-10 баллов)

• CSS( 0-10 баллов)

• Задача (0-50 баллов)

• Общее впечатление

Содержание этой таблички может меняться от серии к серии. Главное, чтобы она будет одна в одной серии собеседований и по ней просто сравниваются кандидаты между собой.

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

Итог

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

1. Будьте уверены в себе - не сомневайтесь в себе, говорите уверенно, не производите впечатление будто вы пытаетесь угадать ответ

2. Изучите как работает JS - прочитайте несколько книг по JavaScript и попробуйте поприменять новые знания на практике

3. Познакомтесь с основными свойствами CSS - фронтенд разработчик не может существовать без знаний CSS, иначе он будет пытаться все решить через JS. Верстайте больше, делайте компоненты, сетки, изучите для примера как сделан Bootstrap и следуйте принятым стандартам

4. Научитесь решать алгоритмические задачи - решайте, решайте и решайте больше задач

5. Расширяйте кругозор - развивайтесь, читайте статьи, эксперементируйте, делайте домашние проекты. Обязательно попробуйте поработать с одной из популярных библиотек (советую React или Vue)

А дальше дело за вами. Стажировка – это отличный шанс начать карьеру сразу в крупной компании. Всем удачи!