Как пройти собеседование 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 библиотек, но заткнуть им все дыры все равно не получится.

---