Как пройти собеседование js junior разработчику? Что учить? Все здесь!

Собеседование

План:

Первая часть: без воды

1. Список вопросов по основам (с указанием ссылок на материалы)
2. Список вопросов по react/redux (с указанием ответов и ссылок)

Вторая часть (невозможно без воды)

1. Цель собеседования
2. Про обратную связь
3. Общие советы
4. Полезные материалы

Не забывайте, что в группе проводятся разборы тестовых заданий.

На вебинаре были слегка затронуты middle и team-lead, так же разобраны вопросы «из зала».

Список вопросов по основам

• прицнипы ООП (хороший эффект производит знание трех слов: инкапсуляция, наследование, полиморфизм)
• типы данных javascript
• что такое свойство объекта, а что метод
• написать функцию, add, чтобы вызов add(1)(2) вернул 3 (замыкания)
• армия функций
• кофеварка (один раз написать самому, подсматривая в учебник обязательно)
• знать, что объекты передаются по ссылке
• как сделать debounce функцию [EN]
• map, filter, reduce
• xhr и как его отменить (легко: abort), современный вариант fetch (с отменой все так себе)
• promise

Список вопросов по React/Redux

Вопросы скопированы из моего ответа на toster.ru

Ответы предоставлены для подписчиков vk группы — Обучение «Без воды». Приходите, научим. Имеется telegram канал.

React

Какую проблему решает react?

Самые «тяжелые» операции в web — работа с DOM. Реакт оптимизирует эту работу. Как? Virtual DOM + обновление страницы за минимум «телодвижений».

Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?

setState (документация) — асинхронная функция. Чтобы выполнить, что-либо заведомо после обновления state, нужно использовать запись с callback’ом

this.setState({data: [1,2,3]}, () => {
  console.log('здесь, уже точно state будет обновлен')
})

Так же, чтобы обновить состояние, основываясь на предыдущее, подойдет следующая запись:

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

Совет: чтобы быть в курсе подобных вещей, нужно либо читать документацию, либо читать/смотреть какие-то последовательные курсы. Данные знания — фундаментальные, их должен осветить любой уважающий себя автор.

Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента…

«Биндинг» чего-либо, это привязка к контексту. То есть, когда вы находитесь в конструкторе, this ссылается на компонент. Следовательно, если какой-то из методов «прибиндить» (привязать) к this, то он всегда будет иметь внутри себя this ссылающийся на компонент. Так делается, в частности из-за того, чтобы не терять контекст this, когда идет запись не через «жирную arrow функцию».

Пример:

onInputChange(e) {
  // если это обработчик с onChange инпута,
  // то здесь обязательно this потеряется
  // для этого вверху, в конструкторе записано
  // this.onInputChange = this.onInputChange.bind(this)
  // в таком случае, this ссылается на компонент
  // и можно использовать
  this.setState({ data: e.currentTarget.value })
}

Для решения через «жирную arrow функцию», требуется плагин transform-class-properties (входит по умолчанию в create-react-app)

onInputChange = (e) => {
  // this не потеряется
  this.setState({ data: e.currentTarget.value })
}

Про функцию bind

в каких методах жизненного цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props«?

Xhr (ajax, асинхронные запросы) — нужно выполнять в момент componentDidMount

Обновление state, на основе props:

• react до версии 16.3 — componentWillReceiveProps
• react 16.3 и выше — getDerivedStateFromProps

Что будет если вызвать this.setState в render методе компонента?

Будут проблемы. Реакт перерисовывает компонент, если state изменился. setState === ситуации «стейт изменился», а «реакт перерисовывает компонент» === render метод. Получается, что будет циклическая перерисовка.

Зачем нужен componenWIllUnmount, приведите пример

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

Контролируемые, не контролируемые компоненты

Не маленький вопрос. Суть: если input не имеет onChange обработчика и value, то он неконтролируемый. Можно сделать ссылку на него с помощью ref. Таким образом, на сабмит формы, можно будет считать данные из инпутов, практически так же, как это делалось бы с нативным DOM. В чем смысл «неконтролируемого инпута»? Такое поведение может заметно сократить количество перерисовок компонента, куда этот input входит. Однако, если у вас обычная форма на несколько полей и более ничего в render тяжелого нет — все будет в порядке и с контролируемым инпутом (таким, в котором value смотрит на state/props и есть onChange)

Подробнее в документации: uncontrolled components, controlled components

Как организовать роутинг в реакт приложении?

Смотрим в window.location и на основе этого switch/case’ом выбираем какой компонент рисовать.

Так же можно посмотреть видео, как мы делали Route и Link компоненты на одном из вебинаров. Или почитать текстовую версию.

Зачем нужны propTypes? Что происходит с ними в production сборке?

Затем, чтобы быстро ориентироваться какие свойства и какого типа (строка, функция и т.д.) ожидает компонент. Проверка propTypes достаточно затратная, поэтому она полностью убрана из production сборки самим реактом.

Сегодня, в 2018м году, на больших проектах propTypes уступают место flow (где, через babel plugin они так же описываются, но строже) или TypeScript‘у.

Как можно удобно «отлаживать» чужой код приложения, написанного на react (намек в сторону React devtools)

Хороший и легкий вопрос на «поболтать». Отладка с помощью console.log, debugger, react devtools, выносом кода компонента на чистый проект и тд тп. Вариантов масса.

Redux

Какую проблему решает redux?

Управление состоянием (данными) всего вашего приложения.

Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое «действие», а что такое «создатель действия»…

Для асинхронных действий многие используют подход, в котором есть «имядействия + request (запрос) _или + success (успех) или + failure (ошибка)». Таким образом удобно обрабатывать случившиеся ситуации в редьюсере (например, показать/скрыть прелоадер, показать ошибку или результат). Конечно, «показывает» — компонент, а в редьюсере мы лишь устанавливаем данные.

Действие (action) — это простой объект с обязательным полем type и не обязательным payload (либо любым другим). Есть соглашение standard flux action (flux, потому что redux переосмыслил/развил идею flux).

Создатель действия (action creator) — это функция, которая возвращает действие.

Пример создателя действия:

function addToto() {
  return {
    type: ADD_TODO,
    payload: 'Пройти собеседование',
  }
}

Пример действия (напоминаю, это простой объект):

{
  type: ADD_TODO,
  payload: 'Пройти собеседование',
}

Что такое редьюсер? Можете написать простой редьюсер без react/redux?

Редьюсер, слово производное от функции reduce. Это такая «штука», которая принимает прошлое состояние и возвращает следующее.

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

Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить «терминами» — асинхронный aciton)

Redux-thunk нужен для того, чтобы внутри создателя действия у вас была функция dispatch, чтобы с помощью нее «диспатчить» другие действия. Код redux-thunk’a состоит из 14 строк. Чтобы понимать как это работает, нужно знать как работают middleware.

Как компоненты приложения получают «пропсы» из «стора»?

Компоненты присоединены с помощью функции connect. А на самом верху живет redux компонент <Provider />. Provider умеет «прокидывать» пропсы вниз в потомков неявно. Используется старое API — context.

Можно ли (и считается ли это нормальным) использовать state, если используется Redux?

Разумеется да! Это нормально. Если изменяемое состояние компонента не нужно нигде, кроме него самого — это однозначно state.

Почему в reducer’ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.

Потому что redux использует простое сравнение: изменился объект или нет. А два объекта могут быть равны только в том случае, если они содержат ссылку на одно и тоже место в памяти. Следовательно, когда вы в старый объект записываете новое свойство, для redux это «тот же самый» объект и перерисовки не произойдет. Выше в вопросах про основы есть пункт «передача объектов по ссылке«, прочтите его если вам не понятен текст ответа.

Что возвращает функция connect (из react-redux)?

Connect возвращает новый компонент, обернутый в «приконекченный» компонент, в котором как раз и живут свойства, пришедшие из редьюсеров (которые туда любезно прокидывает Provider).

Общие вопросы

Вопросы в стиле: расскажите что это и для чего:

• package.json
• Webpack, gulp, и т.д.
• node.js
• promise (хороший материал, для тех кто уже хотя бы немного в теме).

Цель собеседования

Если вы стажер/junior и работу необходимо получить любой ценой, то соответственно цель «получить работу«. Когда такое необходимо?

• у вас нет опыта совсем, но вам интересна тема IT, хочется узнать больше в целом
• вы жестко привязаны к конкретному месту
  • к городу, непосредственно к месту проживания, и/или компании

Советы:

• повышать свои навыки
• (если самому никак) соглашаться на то, что предлагают и терпеть.

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

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

Не нужно:

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

Нужно:

• задавать вопросы, интересоваться
• называть зарплату +20-30% от той, на которую вы рассчитываете (разумеется, необходимо заранее поинтересоваться зарплатной вилкой в вашем регионе). Вы либо станете участником торгов, и сторгуетесь до нужного уровня, либо получите бонус. Отказ тоже можно получить, но это слабый фактор для отказа (если речь идет именно про правильные цифры + разумный процент сверху).
• попросить обратную связь

Про обратную связь

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

Почему можно приходить еще раз? А почему нет! Если снова удастся пройти через фильтр в виде кадрового специалиста и попасть в кабинет на тех.собеседование, то это же круто! Вы уже знаете, какие вопросы были, как минимум их можно обозначить лучше. Хороший специалист задаст и другие, но скорее всего, если вы реально готовились — получится. Да и можно снова спросить — когда зайти еще. Это не шутки, так как многие города, действительно, выдают очень малое количество привлекательных рабочих мест. Можно и побороться!)

Тишина в эфире

Собеседование прошли, ТЗ сделали. Прошла неделя, в ответ ничего.

Что делать?

1) позвонить, поинтересоваться. Постараться получить обратную связь, это поможет стать лучше [1]

2) если обстоятельства позволяют, вычеркнуть контору из списка за неуважение.

[1] иногда, на такие назойливые вопросы могут ответить отпиской или еще хуже — вариантом не в тему. Нельзя верить этому на слово. Если объективно вам кажется, что все было неплохо, но вы получили: вы не подходите нам по уровню, то опять рекомендую уточнить — что именно не так. Ответа скорее всего не будет, но попытка зачтена.

Очень часто может быть так: позицию уже закрыли (пришел кто-то лучше или знакомый, или решили не искать кандидата временно), а с вами то что делать? HR, вообще, уже про вас забыла и с легкой подачи она пишет: «Вашего уровня недостаточно». Для неуверенного джуна это удар.

Совет:

• очень скептически относится к тому, что говорят. Если по ощущениям в компании было интересно на собеседовании и вам ответили более менее подробно — скорее всего, стоит поблагодарить компанию и садиться учить. Иначе — нужно больше данных, то есть идем в следующую компанию.

Три собеседования — это абсолютный минимум для статистики.

Поставьте себя на место работодателя

Самый годный трюк. Представьте, что вы ищите работника. Кто вам нужен?

• тот, кто понравился в целом
• тот, кто обладает достаточным уровнем, либо вселяет веру, что разберется
• тот, кто просит меньше денег, НО при прочих равных.

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

Так же, вы должны представить себя «неопытным/ленивым» рекрутером или занятым начальником. Тогда вам будет ясно, почему никаких ответов на ваш почтовый адрес не приходит. Кто-то забил, кому-то лень, кто-то забегался. Взяли другого.

- Как говорите вас зовут?

- Такой-то

- А, спасибо, но вы нам не подходите {любая_причина} лишь бы не тратить на вас время.

Нет смысла обижаться или переставать верить в свои силы. Это глупо.

Общие советы

1. Во время звонка HR, нужно выяснить, как проходит собеседование. Нужно ли писать код на бумаге, писать код на месте или сколько у собеседования этапов.
2. День для собеседования желательно выбрать не «прямо сегодня», а чуть подальше: так у вас будет время подготовиться и, возможно, пообщаться с кем-то из компании / вычитать что-то про компанию в сети. Чем дольше вы сдвигаете срок, тем больше шансов, что перед вами кого-то уже возьмут. В реалиях маленького города (когда предложений очень мало) — нужно торопиться. В большом городе (предложений много / регулярно бывают) — скорее всего выслушают и предыдущего кандидата(ов) и вас.
3. Повторить основы. Без идиотского заучивания задач на сравнение типов (список есть в начале статьи)

Зарплата

Специально не обсуждал эту тему, так как все можно найти на hh.ru для своего региона. Однако, есть еще пара полезных ссылок:

• Мой круг «зп за 2017 год«
• Мой круг salaries страница

Полезные материалы

Сказ о том, как Катя попала в Яндекс.деньги + сразу комментарий про зарплату

Главное в статье:

Ничего сверхестевственного не требовали:

• уверенное знание javascript (замыкания, типы, наследование);

• умение взаимодействовать с сервером (транспорты, модель OSI и REST API);

• понимание браузерных процессов (загрузка ресурсов, парсинг кода и рендеринг).

Мое мнение про зарплату в известных компаниях (основано в том числе и на давних разговорах в офисе):

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

P.S. в свое время, на выставке E3 (про игры), у Half-Life 2 был очень скромный павильон, но народ, разумеется, шел туда толпами! Так же и с большими конторами: туда идут за опытом, за именем, но не за зарплатой (если речь про джуна/мидла).

Комментарий к статье про бестолковые задачи на собеседовании + сразу исправление опечатки от автора комментария

Краткая заметка о том, что многие программисты не могут написать метод сортировки пузырьком (и это нормально). Один из не знающих — создатель Ruby on rails.

Спорная статья на vc.ru (короткая, возможно реклама), но хорошо отражает следующие моменты:

• да, специалисты могут сделать лучше ваше резюме
• да, консультант может помочь вам с работой

В обоих случаях, как и в любой сфере, попасть на «специалиста» не просто. Результат не гарантирован.

Вопрос на тостере «Какие стратегии повышения зарплаты существуют» и ответ на него.

Стратегия проста — увеличивайте собственный профессиональный уровень на столько, чтобы свободно менять компанию, как только вас что-то перестало устраивать.

Фильтр «Топовые проекты на Github»

Про найм в Лабораторию Касперского (статья рекламная, но все же есть ответы на вопросы: что на собеседовании происходит и как. Речь про C++).

Интересные разделы:

• Как попасть в «Лабораторию Касперского» и чем заняться
• О тестовых заданиях

Как всегда в комментариях присутствуют люди, которые либо хорошо в теме, либо «обиженные на жизнь», сказать кто есть кто — невозможно.

Авторский telegram канал «Пргрм с Козулей»

Блиц!

— Как вкатиться во фронтенд?

Научиться использовать поиск в гугле и Stack Oveflow. Остальное приложится с опытом. В интернете полно туторов, все уже разжевали по 100 раз и выплюнули для тех, кто умеет читать.

— Я уже какое-то время работаю, какой у меня уровень?

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

— Реакт или ангуляр?

Реакт. Я начинал с первой версии ангуляра и вторая не сильно лучше.

— Тайпскрипт или джаваскрипт?

ActionScript 3.0, там есть настоящая типизация. Тайпскрипт можно использовать для того, чтобы подглядеть API библиотек, но заткнуть им все дыры все равно не получится.