5 вопросов по React, которые могут попасться на собеседовании


Оглавление (нажмите, чтобы открыть):

Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика

Доброго времени суток. Приветствую вас снова на моем блоге.

Сегодня речь пойдет о том, какие вопросы и задачи задают на собеседовании на позицию frontend-разработчика. Выборка сделана по 10 очным интервью и скайп-собеседованиям с техническими специалистами из разных IT-компаний города Казани и Иннополиса. А собеседование, которое я проходила в Яндексе, это вообще отдельная тема.

Почему на вакансию Frontend Developer задают вопросы на знание Javascript

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

Для веба клиентский Javascript считается основообразующим — практически все интерфейсы, с которыми взаимодействует пользователь в браузере, и их логика написаны на этом языке программирования. Другими словами, браузер понимает только HTML, CSS и Javascript (стандарт ES5, ES6 пока добрая половина браузеров не поддерживает, но думаю в ближайшие 1-1,5 года эта проблема решится и не придется использовать транспайлеры вроде Babel и синтаксический сахар).

Поэтому все JS-фреймворки и библиотеки (Angular, React, Vue) требуют понимания чистого Javascript. Например, мой любимый ReactJS — это сплошь и рядом нативные javascript-функции, поэтому чтобы освоить его особо не приходится ничего изучать нового, в отличие от Angular, который тащит почти всё свое из коробки. Сложности в изучении библиотеки возникают в настройке проекта — React это не фреймворк, а библиотека, где проект собирается из кучи мелких библиотечек. И чтобы собрать на нем проект, требуется знание Webpack и npm.

Что касается Vue.js, то написание проекта на нем несколько проще, чем React за счет расширения html javascript-ом. Если вы когда-нибудь работали с jquery, то на чисто интуитивном уровне можно освоить его, поработав несколько часов. На React наоборот — javascript расширяется html за счет jsx-синтаксиса. Также Vue.js работает по принципу «всё одним разом скачали, установили и пишите код» (интереса ради попробовала написать на нем небольшое приложеньице).

Сразу оговорюсь, что мои рассуждения касаются frontend-разработчиков, создающих Single Page Applicaton, так как для фреймворков типа Yii2 (язык PHP) и ASP.NET MVC5 (язык C#) требуются дополнительные знания других языков, кроме HTML, CSS, Javascript. А следовательно вопросы от технического специалиста будут касаться и них. Поэтому неважно, на каком фреймворке или библиотеке вы пишите код, но если он исполняется в браузере, вопросы и задачки по javascript-у будут.

Список популярных вопросов на знание Javascript

В самой статье я привожу только условие задач — решение и код к ним находится в открытом доступе в моем репозитории на Github, которые доступны по ссылкам.

  1. Перечислите типы данных.
  2. Что такое ООП? Объясните, как вы понимаете основные его принципы.
  3. Что такое MVC.
  4. Что такое замыкания и callback-и?
  5. Что означает запись ‘use strict’ ?

Задачи для решения:

  1. Даны переменные a = 3, b = 5. Необходимо поменять их местами, не используя третью переменную. Массив тоже использовать нельзя.
  2. Дан массив чисел. Написать программу, которая отсортирует его на четные и нечетные числа. Четные числа должны находиться в порядке возрастания, нечетные — по убыванию. Посмотреть ответ на решение задачи на Github — Задача 2
    Что почитать на эту тему и где? Тема «Массивы: методы» на learn.javascript о встроенных методах массивов JavaScript.
  3. Задача на приведение к типу данных в Javascript

Пример тестового задания для Frontend-разработчика (JavaScript, React.js)

На выполнение этого задания дается 1 неделя. Система бронирования переговорных комнат в режиме реального времени на React.js.

Реализовать одностраничное приложение системы бронирования переговорных комнат в режиме реального времени.

Логика работы приложения:

  • Интерфейс приложения должен отображать доступные даты для бронирования переговорных комнат.
  • Забронированные даты должны сохраняться в localStorage и видны при перезагрузке страницы.
  • Перечень переговорных комнат доступных для бронирования: желтая, красная, зеленая, синяя, фиолетовая.
  • Разработка фронт-энда — ReactJS/JavaScript/JQuery/HTML5/CSS3
  • Кроссбраузерная верстка (min. IE10)
  • Приложение должно быть адаптировано под мобильные устройства, без использования CSS фреймворков (Bootstrap).
  • Использование препроцессоров: LESS/SASS
  • Размещение исходного кода на ресурсе github с пошаговыми коммитами разработчика.

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

6 комментариев для “ Топ-5 вопросов и задач, которые задают на собеседованиях на Frontend-разработчика ”

Hi my friend! I want to say that this post is awesome, great written and come with approximately all significant infos.

I would like to look more posts like this .

Привет! Очень интересная статья! А это тестовое задание на какой уровень разработчика (джуниор, мидл, сеньёр)? Ну или на какую зп.

Хочется по больше тестовых заданий посмотреть��

Задачка рассчитана на разработчика с опытом 1 год +. Совсем зелененькому новичку будет ее выполнить сложновато, потому что требуется уверенное знание Javascript. То есть уровень где-то продвинутый джуниор или начинающий мидл. Насчет зарплаты сказать не могу, так как между Москвой, Петербургом и регионами вилка цен разная на один и тот же грейд разработчика.

На сколько я понял это задание от казанской фирмы? Я сам Казанда Яшим.

Да, всё верно, собеседование было в Казани.

5 вопросов по React, которые могут попасться на собеседовании

Многие front-end разработчики с опытом работы в React и Redux тоже обращают внимание на этот инструмент. Поэтому зачастую работодатели ищут для разработки мобильных приложений JavaScript-программистов с навыками работы с React.js / React Native. И их не будет смущать, если соискатель — чистый JavaScript-программист и ни разу не писал ничего под iOS/Android. Отличных знаний в классическом React.js будет достаточно.

Работодатель может не требовать законченных проектов на React Native и, как правило, готов обучать. В ожиданиях компаний обычно фигурирует опыт мобильной разработки, практический опыт разработки приложений iOS и Android с использованием React Native. Также потребуются навыки верстки (HTML/CSS, SASS, Less и пр.). Понимание принципов клиент-серверного взаимодействия, ООП и шаблонов проектирования будет тоже необходимо.

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

В первую очередь нужно не забывать, что React Native — это фреймворк на языке JavaScript и уверенное понимание разработки под iOS и Android просто необходимо, потому что придется очень много работать с нативными модулями. Нужно изучить актуальный гайдлайн нативной разработки и очень хорошо понимать JS, потому что основная работа будет на нем. Надо знать как работает Redux и все что с ним связано.

Кандидат должен уметь работать с xCode, Android studio, Ide для JS, GitHub. И самое главное — необходимо понимать жизненный цикл приложения от начала разработки до выпуска его в продакшн.

Игорь Андреев, мобильный разработчик

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

Дополнительные вопросы на IT-собеседовании

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

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

1. Какие инструменты в React вам нравятся больше всего?

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

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

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

2. Какое ваше самое крутое приложение на React?

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

3. Какие трудности у вас возникают в разработке?

У большинства веб-разработчиков есть сложности, возникающие в каждом проекте. Например, оркестрирование анимации или сложные схемы маршрутизации. Можно часами рассуждать об изъянах библиотек и о том, что может не получиться в подобных задачах.

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

4. Какие инструменты вы используете для запуска проектов?

Ответить можно по-разному: начиная с инструмента create-react-app до кастомных конфигов webpack или менее известных пакетных менеджеров. Снова же, в ответе стоит упомянуть те вещи, которые вам наиболее удобны. С другой стороны, вещи, которые были услышаны от других или где-то прочитаны, будут не интересны интервьюеру, в отличие от мыслей и опыта кандидата. Например, вы можете сказать, что у вас лучше всего получается строить проекты вне зависимости от их размеров и подкрепить это утверждение несколькими аргументами.

5. Использовали ли вы какой-либо другой фронтенд фреймворк в продакшене?

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

В ответе на вопрос можно сравнить виртуальный или реальный DOM, решения по управлению состояниями, схемами маршрутизации и внедрения зависимостей и ещё много других тем.

6. Как бы вы оптимизировали производительность приложения на React?

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

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

Если вы обладаете опытом оптимизации производительности, не стоит рассказывать об этом в общих фразах. Лучше расскажите о конкретных утилитах и методах, которые вы использовали.

7. Как вы работаете в команде?

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

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

Выводы

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

50 вопросов, ответы на которые вы должны знать, прежде чем идти на собеседование по JavaScript

Собеседования c разработчиками напоминают Дикий Запад. Никто толком не понимает, чем занимается. Большинство технических рекрутеров не могут отличить Java от JavaScript. Тем не менее им поручено заниматься наймом разработчиков.

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

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

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

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

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

Общие вопросы — это вопросы, которые покажут, как вы реагируете, думаете и насколько хорошо впишитесь в команду.

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

Не путайтесь в своих словах, делайте длинные паузы, чтобы тщательно обдумать ответы на вопросы.

  1. Что вдохновляет или интересует вас в программировании?

2. Что нового вы узнали вчера/на этой неделе?

3. Расскажите о предпочитаемой среде разработки. Какуюоперационную систему, IDE и терминал вы используете и почему?

4. Если бы вы могли освоить одну технологию в этом году, что бы это было? Как бы вы осваивали новый навык?

5. Как на предыдущей работе вы решили последнее разногласие с вашим начальником? Чем все закончилось? Не могли бы вы дать номер вашего начальника, чтобы я мог проверить его версию? [Последний вопрос — блеф, ни у кого нет времени звонить вашему бывшему начальнику]

6. Какие ресурсы, форумы или инструменты вы используете, чтобы узнавать о последних тенденциях во фронтенд-разработке и дизайне? Есть ли среди них фавориты, какие и почему?

7. Если бы вы присоединились к проекту и команда разработчиков использовала табы, а вы пробелы, что бы вы сделали в таком случае? Вы попытаетесь убедить команду использовать пробелы или присоединитесь к толпе и будете использовать табы?

[Вопрос с подвохом] — Наиболее правильный ответ будет заключаться в том, чтобы использовать стандартный инструмент форматирования, вроде Prettier, чтобы код любого члена команды выглядел одинаково при отправке в репозиторий. Таким образом, вы сможете продолжать использовать пробелы, а команда сможет свободно использовать табы.

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

8. Можете ли вы описать свой рабочий процесс при создании веб-страницы? Какие первые пять шагов вы проделываете при создании нового проекта?

9. С какой технической проблемой вы столкнулись в последний раз и как вы ее решили?

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

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

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

11. С какими системами контроля версий вы знакомы? Как вы делитесь кодом между проектами без потерь?

12. Назовите четыре способа уменьшить время загрузки страницы.

13. Как расшифровывается CORS и к какой проблеме это относится?

14. Объясните, что такое ARIA и экранные считывающие устройства, а также как сделать веб-сайт доступным для людей с ограниченными возможностями.

15. Для чего используется doctype ?

16. Перечислите структурные блоки в HTML5.

17. В чем разница между localStorage, файлами cookie и sessionStorage?

18. Для чего подходят атрибуты data- ?

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

20. Что такое прогрессивный рендеринг?

21. Объясните, как работает this в JavaScript. Как работает this в классах и функциях?

22. Опишите, что такое всплытие и перехват событий (event bubbling и event capturing).

23. Объясните, что такое поднятие переменных.

24.Объясните разницу между:

  • function Animal() <>
  • var animal = Animal()
  • var animal = new Animal()

25.В чем разница между объектами хоста и нативными объектами?

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

27. Объясните, как в JavaScript работает прототипное наследование.

28. Что такое замыкание и как/зачем вы его используете?

29. В чем разница между null и undefined ?

30. В чем разница между == и === ?

31. Что такое Webpack? Какие проблемы он решает?

32. Вы когда-нибудь использовали фреймворк или библиотеку для фронтенд-разработки? Если да, то какие именно?

33. Почему условный (тернарный) оператор так называется? Что означает слово тернарный?

34. Какие инструменты и методы вы используете для отладки JavaScript кода?

Мастер Йода рекомендует:  51 задание для оттачивания навыков системного администрирования

35. Как вы отлаживаете JavaScript код, который выполняется на сервере, например Node.js?

36. Назовите преимущества/недостатки написания JavaScript кода на языке, который компилируется в JavaScript?

37. С учетом нижеприведенного кода, как бы вы выполнили функцию duplicate ?

38. Можете ли вы привести пример каррирования и рассказать, почему такой синтаксис дает преимущество?

39. Можете ли вы привести пример деструктуризации объекта или массива?

40. Кто создал JavaScript и почему язык называется JavaScript?

41. В чем разница между этими двумя функциями?

42. Для чего и когда создаются статические члены класса?

43. В чем разница между переменными, созданными с помощью let , var или const ?

44. Что происходит, когда вы заходите на веб-сайт? Что такое DNS?

45. Что такое движок V8? Кто его использует?

46. Что означает $ в JavaScript коде?

47. Объясните разницу между лейаутом, рисованием и композитингом.

48. Как вы можете повысить FPS при прокрутке веб-сайта?

49. Какой вывод у нижеприведенного кода?

50. Что такое цикл событий в JavaScript и для чего он нужен?

Спасибо за прочтение и удачи в программировании! ❤

Вопросы для собеседования javascript разработчика

Как пройти собеседование 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Redux

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

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

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

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

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

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

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

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

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

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

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

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

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

Компоненты присоединены с помощью функции connect . А на самом верху живет redux компонент

. 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 для своего региона. Однако, есть еще пара полезных ссылок:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5 вопросов по React, которые могут попасться на собеседовании

Идеальное руководство для прохождения интервью JavaScript- разработчика.

Интервью с JavaScript (JS) непросты. Я принимаю это, вы принимаете его, и каждый делает это. Количество возможностей вопросов, которые можно задать в интервью для JavaScript, велико. Как можно пройти интервью JS? Когда начать? Эта статья — попытка проинструктировать всех начинающих разработчиков JavaScript, чтобы углубить их знания JS, зная основные концепции. Это первые шаги, которые нужно предпринять, по крайней мере, для интервью JS. Если я кандидат, я хорошо готовлю эти концепции. Если я интервьюер, я предполагаю, что вы знаете, что бы продолжить дальше.

Если вы не знаете автора,то он является разработчиком полного стека с опытом работы с Python, Go & JavaScript. Недавно он написал книгу- «Building RESTful Web services with Go»!

Это руководство является отправной точкой, но не является толчком для разработчика JS. Это его / ее обязанность готовиться к гораздо более жестким интервью. Им также необходимо иметь в виду, что вопросы собеседования также могут быть связаны с доменом и технологиями, которые они работали (например: React JS, WebPack, Node JS и т. Д.).

Здесь мы представляем основные элементы JS, которые вы должны хорошо разбираться, чтобы назвать себя хорошим разработчиком JavaScript.

Прекрасный разработчик JS может быть отличным разработчиком React, но обратное не гарантируется. К сожалению, JS имеет плохую репутацию для производства бесчисленных сценаристов с отсутствием дисциплины (частично верно). JavaScript позволяет разработчикам делать что-либо, без полного понимания. Это тоже забавно. Немногие великие программисты на JavaScript, такие как Джон Ресиг (создатель, jQuery), Брендан Эйч (создатель, JS), и Ларс Бак (команда Google Chrome) понимали язык от и до. Успешный программист JS всегда читает простой JS-код из библиотек. Многие говорят, что очень сложно найти хорошего разработчика JavaScript.

«Виртуальные машины — странный зверь. Идеального решения нет, вместо этого вы оптимизируете «идеальное место». Там много мастерства. Это долгая игра, вы не можете сгореть »- Ларс Бак, Google

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

Мастер Йода рекомендует:  Используйте Psyco, и Python будет работать так же быстро, как и С

console.log(2.0 == “2” == new Boolean(true) == “1”)

9 человек из 10 говорят, что это печатает false . Но он печатает true . Почему? См. здесь.

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

1) Хорошо понимать функции JS

Функции — это сливки JavaScript. Это граждане первого класса. Без глубокого знания функций JS, ваши знания сильно ограничены. Функция JS больше чем, просто функция. В отличие от других языков, функция может быть назначена переменной, переданной как аргумент другой функции и также может быть возвращена из другой. Следовательно, это гражданин первого класса в JS.

Я не собираюсь объяснять, что здесь является функцией, но знаете ли вы, что малые вещи тоже могут вас удивить? Как это!


Этот фрагмент кода выведет 25. True! См. Второй фрагмент кода

На первый взгляд, у вас может возникнуть соблазн сказать, что это тоже печатает 25. False! Но вместо этого вы получите ошибку уже при обработке кода.

TypeError: square is not a function

В JavaScript, если вы определяете функцию как переменную, имя переменной будет поднято (hoisted), и вы не сможете получить доступ, пока выполнение JS не встретит её объявления . Вы не удивлены?

Оставим это. Возможно, вы часто видели этот синтаксис где-то в некотором коде.

Почему люди делают такие странные вещи? Это функциональная переменная, которая имеет инкапсулированные переменные и функции, которые не загрязняют глобальную область. Библиотеки от jQuery до Lodash используют эту технику, чтобы предоставить вам переменные типа $ и т. Д.

То, что я здесь представил, — «учиться хорошо». Мы используем много тонких ловушек. Прочитайте хорошо написанную запись Mozilla о функциях. Functions

2) Понимание bind, apply и call

Эти функции вы можете увидеть во всех известных библиотеках. Они позволяют делать что-то названное currying, используя их мы можем скомпоновать функциональность в разные функции. Хороший разработчик JavaScript может рассказать вам о них в любое время дня и ночи.

В принципе, это прототип методов функций для изменения их поведения для достижения чего-то. Согласно Чаду, разработчику JS, использование похоже на это:

Бережный вызов (saving call)

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

Вы отправили библиотеку профессору. Теперь пришло время представить код, который вызывает эту математическую библиотеку.

Представляя образцы второго кода, вы нашли в рекомендациях, что профессор попросил вас использовать постоянный pi с точностью до пяти десятичных знаков. О Боже! Вы только что использовали 3.14, а не 3.14159. Теперь у вас нет возможности отправить библиотеку по истечении крайнего срока. Функция вызова — Call JS спасет вас. Просто вызвать .call() своему коду таким образом:

и функция принимает ваше новое значение pi на лету. Выведет:

Это сделает вашего профессора счастливым! Если вы заметили, функция вызова — Call принимает два аргумента:

  • Context — контекст.
  • Function arguments — аргументы функции.

Контекст — это объект, который заменяет это ключевое слово внутри функции области. Позже аргументы передаются как аргументы функции. Для Ex:

Вызов Call выглядит следующим образом:

Вы увидели, что эти аргументы функции передаются в качестве последующих аргументов после объекта контекста.

Apply точно также, только вместо аргументов передает список:

Если вы знаете call, вы знаете apply и наоборот. Теперь, что такое bind?

Bind придает новое значение данной функции. В случае с Bind функция не запускается мгновенно, как например Call или Apply.

Какая польза от Bind? Это позволяет нам вводить контекст в функцию, которая возвращает новую функцию с обновленным контекстом. Это означает, что эта переменная будет использоваться пользователем. Это очень полезно при работе с событиями JavaScript.

Вы должны знать эти три функции для создания функциональности в JavaScript.

3) Хорошо понимать области видимости JavaScript (И скрытые области также)

Область видимости (scope) JavaScript — это ящик пандоры. Сотни сложных вопросов интервью могут быть сформулированы из этой единой концепции. Существует три вида областей видимости (scope):

  • Global scope — глобальная
  • Local Scope/Function scope — локальная (функциональная).
  • Block scope(Introduced in ES6)- блочная. Представленная в ES6

Глобальная область — это то, что мы обычно делаем:

Область функции представлена так, когда вы определяете переменную локально.

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

Функции и условия рассматриваются как блоки. Вышеприведенный пример должен предупредить 4, поскольку выполняются условные операторы. Но ES6 уничтожает область блоков переменных, и область охвата перешла в глобальную.

Теперь наступает просто магия области видимости (scope). Это может быть достигнуто с помощью закрытий (closures). Закрытие (closures) JavaScript — это функция, которая возвращает другую функцию.

Если кто-то задаст вам этот вопрос. Напишите пример, который принимает строку и сразу возвращает символ. Если задана новая строка, она должна заменить старую. Это просто называется генератором.

Исполнение идет таким образом!

Здесь область видимости (scope) играет важную роль. Закрытие — это функция, которая возвращает другую функцию и обертывает данные. Вышеуказанный генератор строк представляет замыкание. Значение индекса сохраняется между несколькими вызовами функций. Внутренняя функция может обращаться к переменным, определенным в родительской функции. Это разная область. Если вы определили еще одну функцию в функции второго уровня, которая может получить доступ ко всем родительским переменным.

Область видимости (scope) JavaScript может доставить вам массу проблем! Стоит полностью понимать это.

4) Понимайте это ключевое слово well (глобальное, функциональное и предметное пространство — global, function and object scopes)

В JavaScript мы всегда составляем код с функциями и объектами. Если вы используете браузер, то в глобальном контексте он ссылается на объект окна (window object). Я имею в виду, что это будет оцениваться как true, если вы сейчас откроете консоль браузера и введите это.

Когда изменяется контекст и область видимости (scope) программных изменений, this в этом конкретном пункте изменяется соответствующим образом. Теперь см. this в локальном контексте:

Теперь у вас возникнет соблазн предсказать этот результат.

Нет, не будет. Потому что здесь this ссылается на глобальный объект. Помните, каков бы ни был родительский охват, он будет унаследован дочерним элементом. Таким образом, здесь будет выведен объект окна (window object). Три метода, которые мы обсуждали, фактически используются для установки this объекта.

Теперь идет последний тип this — this в области объекта. Вот так:

Я просто использовал синтаксис getter, который является функцией, которую можно вызвать как переменную.

Здесь this фактически относится к самому объекту. И this, как мы уже говорили ранее, ведет себя по-разному в разных местах. Это следует очень хорошо знать.

5) Хорошо понимать объекты (Object.freeze, Object.seal)

Многие из нас знают такие объекты.

Это пример объекта, в котором хранятся пары Key- ключи, Value — значения. Объекты JavaScripts имеют особое свойство хранить что-либо как значение. Это означает, что мы можем сохранить список, другой объект, функцию и т. д. В качестве значения. Почему бы и нет?

Вы можете создать объект таким образом:

Вы можете легко преобразовать заданный объект в строку JSON, а также преобразовать его обратно с помощью методов строкового и синтаксического анализа объектов JSON соответственно.

Итак, какие еще мелочи об объектах, которые вы должны знать? Простую итерацию объекта, используя Object.keys.

Object.values возвращает список значений объекта.

Другими важными функциями для объекта являются:

  • Object.prototype(object)
  • Object.freeze(function)
  • Object.seal(function)

Object.prototype предоставляет более важные функции, которые имеют множество приложений. Некоторые из них:

Object.prototype.hasOwnProperty полезен, чтобы узнать, существует ли данное свойство / ключ в объекте.

Object.prototype.instanceof оценивает, является ли данный объект типом определенного прототипа (мы увидим их в следующем разделе, это функции).

Теперь идут две другие функции.Object.freeze позволяет нам заморозить объект, чтобы существующие свойства не могли быть изменены.

Здесь мы пытаемся изменить значение свойства physics после замораживания объекта. Но JavaScript не позволит этого сделать. Мы можем определить, заблокирован ли данный объект или нет.

Object.seal немного отличается от freeze замораживания. Он позволяет изменять свойства, но не позволяет добавлять или удалять новые свойства или свойства.

Мы также можем проверить, закрыт ли данный объект, используя этот

Существует множество других важных функций / методов, доступных для функции Global Object. Найдите их здесь. Object

6) Хорошо понимать прототипное наследование — Prototypical Inheritance

В традиционном JavaScript существует концепция скрытого наследования. Это использование технологии прототипирования. Все новые class syntax , которые вы видите в ES5, ES6 — это просто синтаксическое представление для базового прототипироания, лежащего в основе ООП. Создание класса в JavaScript, выполняется с помощью функции.

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

Здесь можно усомниться в правильности. В классе нет свойства звука — sound property. Да! вряд ли определяется sound property. Но таким образом это предназначено для передачи дочерними классами, которые наследуют класс далее.

В JavaScript наследование достигается таким образом.

Я определил еще одну специальную функцию под названием Dog. Здесь, чтобы наследовать класс Animal, нам нужно выполнить функцию вызова call (мы обсуждали ее ранее) с передачей this и других аргументов. Мы можем создать экземпляр German Shepard.

Мы не назначаем имя и тип дочерней функции, мы вызываем супер функцию Animal и устанавливаем соответствующие свойства. Домашнее животное имеет свойства (имя, тип) родителя. Но как насчет методов. Наследуются ли они тоже? Давайте посмотрим!

Как же так? Почему это произошло? Это происходит потому, что мы не сказали JavaScript, чтобы наследовать методы родительского класса. Как это исправить?

Теперь method доступен. Мы можем проверить, что является классом данного объекта в JavaScript, используя функцию object.constructor. Давайте посмотрим, что предсавляет класс нашего питомца — pet.

Это расплывчато. Animal — родительский класс. Но какой именно тип pet ? Это Dog type. Это происходит из-за конструктора Dog class.

Эти четыре вещи, которые вы должны помнить о прототипическом наследовании.

  • Свойства класса связаны c this.
  • Методы класса связаны с прототипом объекта Object.prototype
  • Чтобы наследовать свойства, используйте функцию вызова call, передающую this объекта.
  • Чтобы наследовать методы, используйте Object.create для связывания прототипов родительского и дочернего
  • Всегда устанавливайте конструктор дочерних классов для получения правильного идентификатора его объектов.

В JS функция вызова — call и прототип объекта — Object.prototype обеспечивают наследование

7) Хорошо понимать обратные вызовы (callbacks) и обещания (promises)

Обратные вызовы (Callbacks)- это функции, выполняемые после выполнения операции ввода-вывода. Время, затрачиваемое на операцию ввода-вывода, может блокировать код, который не позволяет выполнять дальнейшее выполнение в Python / Ruby. Но в JavaScript из-за разрешенного асинхронного выполнения мы можем обеспечить обратные вызовы для асинхронных функций. Примером может служить вызов AJAX (XMLHttpRequest) из браузера на сервер, события, генерируемые мышью. клавиатуры и т. д. Пример

Здесь reqListener — это обратный вызов, который будет выполняться, когда запрос GET успешно возвращается.

Обещания (promises) — это аккуратные обертки для обратных вызовов, которые позволяют нам запускать асинхронный код элегантно. Я много обсуждал здесь обещания. Это также важный элемент, который должен быть известен всем в JS. Writing neat asynchronous Node JS code with Promises

8) Хорошо понимать регулярные выражения

У регулярных выражений много приложений. Обработка текста, соблюдение правил ввода данных и т. д. Разработчик JavaScript должен знать, как выполнять базовое Regex и решать проблемы. Regex — универсальная концепция. Мы здесь видим, как мы можем это сделать из JS.

Мы можем создать новое регулярное выражение, используя это

Вышеприведенное регулярное выражение является выражением, которое соответствует заданному набору строк. Как только регулярное выражение определено, мы можем попытаться подобрать и увидеть соответствующую строку. мы можем сопоставить строки с помощью функции exec (exec function).

Существует несколько специальных классов символов, которые позволяют нам писать сложные регулярные выражения.

В RegEx существует много типов элементов. Некоторые из них:

  • Символы Ex:\ w — буквенно-цифровые, \ d — десятичные, \ D — не десятичные
  • Классы символов Ex: [x-y] в диапазоне от x до y, [^ x] не x
  • Квантификаторы Ex: +. * (Жадные и ленивые)
  • Границы Ex: ^ (начало ввода), $ (конец ввода)

Используя приведенные выше вещи, давайте проиллюстрируем несколько примеров.

Для получения дополнительной информации о регулярном выражении, пройдите по ссылке Quick-Start: Regex Cheat Sheet.

Наряду с exec существуют и другие функции, а именно match, search и, replace доступны для поиска строки в другой с использованием регулярных выражений. Но эти функции должны использоваться в строковых выражениях.

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

9) Хорошо понимать Map, Reduce и Filter

Функциональное программирование — это тема обсуждения в эти дни. Многие языки программирования включают в себя функциональные концепции, такие как lambdas, в их новые версии (пример: Java> 7). В JavaScript поддержка конструкций функционального программирования существует в течение длительного времени. Есть три основные функции, которые нам нужно глубоко изучить. Математические функции принимают некоторый входной (input) и обратный вывод (return output). Чистая функция всегда возвращает тот же вывод output) для данного ввода (input). Функции, которые мы обсуждаем сейчас, также являются чистыми.

Функция map доступна в массиве JavaScript. Используя эту функцию, мы можем получить новый массив, применив функцию преобразования для каждого элемента в массиве. Общий синтаксис для работы map массива JS:

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

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

Другими словами мы хотим выполнить определенные действия с каждым элементом массива.

reduce

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

accumulator сохраняет промежуточное и конечное значение. CurrentIndex , currentValue — это индекс и значение элемента из массива соответственно. initialAccumulatorValue передает это значение в аргумент аккумулятора.

Одним из практических приложений для reduce может быть сглаживание массива массивов. Сглаживание (Flattening) преобразует внутренние массивы в один массив. Для Ex:

Мы можем добиться этого путем обычной итерации. Но, используя сокращение, это более читабельный и простой код. Магия!

filter

Это третий тип концепции функционального программирования. Он близок к map, поскольку он также обрабатывает каждый элемент в массиве и, наконец, возвращает другой массив (не возвращающий значение, как в сокращении). Длина фильтрованного массива может быть меньше или равна исходному массиву. Поскольку условие фильтрации, которое мы передаем, может исключать несколько / нулевых входов в выходном массиве. Общий синтаксис для работы filter JS:

Здесь elem — это элемент данных массива, и true / false следует возвращать из функции, чтобы указать включение / исключение фильтрованного элемента. Общим примером является фильтрация массива слов, который начинается и заканчивается заданными условиями. Предположим, мы должны отфильтровать массив слов, начинающийся с t и заканчивающийся на r.

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

10) Понимать шаблоны обработки ошибок

Это самый малозанятый фрагмент JavaScript для многих разработчиков. Я вижу, что очень немногие разработчики говорят об обработке ошибок. Хороший подход к разработке всегда тщательно переносить JS-код вокруг блоков try / catch.

Николас К. Закас (Nicholas C. Zakas), инженер UI в Yahoo, сказал в 2008 году: «Всегда предполагайте, что ваш код не удастся. Невозможно правильно обработать события! Запишите их на сервер. Брось свои ошибки.»

В JavaScript всякий раз, когда мы кодируем, мы всегда можем потерпеть неудачу. Для Ex:

Здесь мы попадаем в ловушку, говоря, что результаты всегда будут объектом JSON. Иногда сервер может сбой, и вместо результата возвращается null. В этом случае null [«posts»] выдаст ошибку. Правильное обращение может быть таким!

Функция logError предназначена для сообщения об ошибке на сервере. Вторая функция flashInfoMessage— это функция, которая отображает удобное для пользователя сообщение типа «Сервис недоступен в настоящее время» и т. д.

Николас говорит, что каждый раз, когда вы чувствуете, что-то неожиданное произойдет, вы будете ловить ошибки. Различают фатальные и нефатальные ошибки. Вышеприведенная ошибка связана с тем, что сервер backend упал, что является фатальным. Таким образом вы должны сообщить клиенту, что по какой-то причине служба отключена. В некоторых случаях это может быть не смертельным, но лучше уведомлять об этом. Чтобы создать такой код, сначала выведите ошибку, поймайте ее с событием ошибки на уровне объекта window , затем сделайте вызов API для регистрации этого сообщения на сервер.

Этот код в основном выполняет три функции:

  1. Слушайте ошибки на уровне окна (window).
  2. Всякий раз, когда возникает ошибка, делает вызов API (API call).
  3. Записывает ошибку на сервер.

Вы также можете использовать новую функцию Boolean (ES5, ES6), чтобы проверить, действительна ли переменная, а не null (или) не определена, прежде чем продолжить.

Всегда думайте, как обращаться с ошибками. Все может закончиться неудачей!

Другие вещи, чтобы знать (Hoisting, Event Bubbling)

Все вышеперечисленные концепции являются основными для разработчика JavaScript. Есть немного внутренних деталей, чтобы знать, что они могут быть действительно полезными. Вот как работает JavaScript-движок в браузере. Что такое Подъем -Hoisting и Событие Bubbling?

Hoisting

Подъем — это процесс выталкивания объявленных переменных в начало программы во время ее запуска. Для Ex:

Когда вы делаете что-то выше на языке сценариев, таком как Python, он выдает ошибку. Вы должны сначала определить что-то (переменную, функцию), а уже потом использовать это. Несмотря на то, что JS является языком сценариев, у него есть механизм подъема. В этом механизме, во время работы программы, во время работы с программой Java VM делает две вещи:

  1. Сначала сканируйте программу, соберите все объявления переменных и функций и назначьте для нее пространства памяти.
  2. Запустите программу сейчас, заполнив их любыми значения переменных если нет, заполните undefined

В приведенном выше фрагменте кода console.log печатает «undefined». Это потому, что в первом проходе собрана переменная foo. VM ищет любое значение, определенное для переменной foo. Этот подъем может привести ко многим ситуациям кода JavaScript, где код может вызывать ошибки в некоторых местах и использовать неопределенное значения по умолчанию, в другом. Вы должны знать подъем hosting , чтобы очистить ваш код от двусмысленности! Несколько примеров! Hoisting

Event Bubbling

Теперь рассмотрим событие (Event Bubbling)! По словам Аруна П, старшего инженера-программиста:

«Event Bubbling — это два способа распространения событий в API DOM HTML, когда событие происходит в элементе внутри другого элемента, и оба элемента зарегистрировали обработчик для этого события. Режим распространения событий определяет, в каком порядке элементы получают событие ».

При барботировании событие сначала захватывается и обрабатывается самим внутренним элементом, а затем распространяется на внешние элементы. С захватом процесс идет обратным образом. Обычно мы прикрепляем событие к обработчику, используя функцию addEventListener.

Мастер Йода рекомендует:  Как найти ментора в IT-сфере и откуда начать поиски

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

Для Ex: Bubbling Model

Когда мы нажимаем элемент списка, порядок выполнения обработчиков подобен порядковому номеру (по умолчанию).

handler() => ulHandler() => divHandler()

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

Порядок выполнения обработчиков будет следующим:

divHandler => ulHandler() => handler()

Вы должны понимать, что пузырь событий (event bubbling) (независимо от направления движения к родительскому элементу или к ребенку) должным образом реализует пользовательские интерфейсы (UI), чтобы избежать нежелательного поведения.

Это основные понятия JavaScript. Как я уже упоминал ранее, дополнительная информация о них, ваш опыт работы и знания, подготовка поможет вам пройти интервью с JavaScript. Всегда продолжайте учиться. Следите за последними событиями (ES6). Копайте глубже в различных аспектах JavaScript, таких как двигатель V6, тесты и т. д. Здесь представлено несколько видео ресурсов, которые научат вас многим вещам.

Какой необходимый уровень знаний для junior React.js Разработчика?

UPDATE: реальные тестовые задания и разборы здесь, ответы на все вопросы из поста в моем блоге об обучении react.

Извините, но стандартная задача, про «напишите функуцию add, которая при вызове add(1)(2) вернет 3» — многих положила на лопатки =) Поэтому будьте готовы..

React
0) Какую проблему решает react ?
1) Мгновенно ли срабатывает setState? Если нет, то как выполнить код, который 100% выполнится после того, как новый state будет установлен?
2) Зачем многие постоянно пишут в constructor: this.FUNCTION_NAME = this.FUNCTION_NAME.bind(this) и отсюда вопрос вытекает чему равно this в разных местах вашего компонента.
3) в каких методах жизненого цикла стоит выполнять xhr запросы? В каких стоит «обновлять state на основе props»?
4) Что будет если вызвать this.setState в render методе компонента?
5) зачем нужен componenWIllUnmount, приведите пример..
6) Контролируемые, не контролируемые компоненты
7) Как организовать роутинг в реакт приложении? (ответ: взять react-router — подходит, но было бы круто, если бы вы рассказали, как он примерно работает)*
8) Зачем нужны propTypes? Что происходит с ними в production сборке?
9) Как можно удобно «отлаживать» чужой код приложения, написанного на react (намек в сторону React devtools)
.

Redux
0) Какую проблему решает redux?
1) Зачем многие создают типы действий NAME_REQUEST / NAME_SUCCESS ? А заодно, что такое «действие», а что такое «создатель действия».
2) Что такое редьюсер? Можете написать простой редьюсер без react/redux?*
3) Для чего нужен redux-thunk? Как он работает? Напишите (можно псевдокод) асинхронный создатель действия (либо, если надоело говорить «терминами» — асинхронный aciton)
4) Как компоненты приложения получают «пропсы» из «стора»?*
5) Можно ли (и считается ли это нормальным) использовать state, если используется Redux?
6) Почему в reducer’ax мы возвращаем новые объекты? Приведите пример, когда вы возвращаете новый объект, а когда тот же самый.
6.5) А так же, «как в js вообще это работает?». Например:

Что будет в obj1, почему? В каких случаях объекты могут быть равны?
7) Что возвращает функция connect (из react-redux)?
.

Общее:
0) package.json
1) Webpack, gulp, etc.
2) node.js
3) promise

Что-нибудь практическое:
1) Как бы вы валидировали форму, если ошибки валидации приходят после submit’a ее на сервер..
2) Почему не работает следующий код, сделайте чтобы работало
.
На истину не претендую, но такие вопросы имели место быть на собеседованиях. В беседе можно многое разузнать дополнительными вопросами и так далее. Так же, если часть вопросов вам неизвестна — не беда, многие и на половину ответить не могут.

Вопросы для собеседования кандидату на должность Front-end разработчика

Это перевод популярного репозитория от html5bp — Front-end Job Interview Questions (en), который существует с 2009 года. Список вопросов составлялся и дополнятся известными во front-end людьми, поэтому на этот список можно положиться. Перевод делал не я (вернее я хотел, но он оказался уже переведен).

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

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

Содержание

Общие вопросы: [↑]


  • Вы пользуетесь Твиттером?
    • Если да, то кто присутствует в вашей ленте?
  • Кого из мировых front-end разработчиков вы знаете?
    • А российских front-end’щиков?
  • У Вас есть аккаунт на GitHub?
    • Если да, то за какими интересными проектами вы следите?
  • Какие блоги Вы читаете?
  • Какие системы управления версиями вам приходилось использовать?
  • Расскажите о своей среде разработки (ОС, редактор, браузер(ы), прочие инструменты)
  • Опишите последовательность Ваших действий, когда вы создаете новую Web-страницу
  • Можете ли пояснить разницу между progressive enhancement и graceful degradation?
    • Бонус, если также расскажете про feature detection (определение возможностей браузера)
  • Объясните, что означает «Семантическая разметка»
  • Какой Ваш основной браузер для разработки и какими инструментами Вы в нем пользуетесь?
  • Как можно оптимизировать загрузку внешних ресурсов на странице?
    • Комбинация из потенциальных решений:
      • Конкатенация
      • Минификация
      • Использование CDN
      • Кэширования
      • и т.д.
  • Каково преимущество в подгрузке внешних ресурсов с нескольких доменов?
    • Сколько ресурсов браузер может одновременно качать с одного домена?
  • Назовите три способа уменьшения времени загрузки страницы (воспринимаемого или реального)
  • Если Вы присоединились к проекту, где для форматирования используются табы, а Вы привыкли использовать пробелы, как Вы поступите?
    • Предложите использовать EditorConfig (editorconfig.org)
    • Останетесь верным своим привычкам
    • Выполните команду :retab!
  • Используете ли приёмы для ускорения написания кода (сниппеты, Emmet)?
  • Знакомы ли с шаблонизаторами (Smarty, HAML etc.)
  • Реализуйте примитивное слайд-шоу
    • Бонус, если Вы это сделаете без использования JS
  • Какие инструменты Вы используете для тестирования производительности кода?
    • JSPerf (jsperf.com)
    • Dromaeo (dromaeo.com)
    • и т.д.
  • Если бы у Вас была возможность освоить новую технологию в этом году, что бы это было?
  • Объясните важность стандартов и комитетов по стандартам
  • Что такое FOUC (Flash Of Unstyled Content)? Как его избежать?

Вопросы по HTML: [↑]

  • Для чего нужен doctype и сколько разновидностей Вы можете назвать?
  • В чем разница между standards mode и quirks mode?
  • Какие ограничения накладывают стандарты XHTML?
    • Могут ли возникнуть проблемы при подаче страниц с типом application/xhtml+xml ?
  • Как следует оформлять страницу, в которой контент может быть на разных языках?
    • Что нужно иметь в виду при разработке многоязычных сайтов?
  • Можно ли использовать синтаксис XHTML в HTML5?
  • Как использовать XML в HTML5?
  • Чем полезны data- атрибуты?
  • Если рассматривать HTML5 как открытую web-платформу, на чем она строится, из каких компонентов состоит?
  • Объясните разницу между cookies, sessionStorage и localStorage.
  • Знакомы ли с подводными камнями вёрстки почтовых шаблонов?
  • Какая разница между GET и POST ?

Вопросы по JavaScript: [↑]

  • Какими js-библиотеками Вы пользовались?
  • Вы когда-нибудь заглядывали в исходный код библиотек/фреймворков, которыми пользовались?
  • Чем JavaScript отличается от Java?
  • Что-такое хэш-таблица?
  • Что такое неопределенные (undefined) и необъявленные (undeclared) переменные?
  • Что такое замыкание и как/для чего его используют?
    • Как вы предпочитаете их использовать?
  • Где обычно используются анонимные функции?
  • Объясните «JavaScript module pattern» и где он (паттерн) применяется
    • Бонус, если упомянута чистота глобального пространства имен
    • Что, если Ваш модуль не заключен в пространство имен?
  • Как Вы организуете свой код? (module pattern, наследование)
  • В чем разница между host-объектами и нативными объектами?
  • В чем разница между последними двумя строчками:
  • В чем разница между .call и .apply ?
  • Что делает и для чего нужна функция Function.prototype.bind ?
  • Когда Вы оптимизируете свой код?
  • Объясните, как работает наследование в JavaScript?
  • Где до сих пор используется document.write() ?
    • В большинстве генерируемых баннеров, хотя так делать не рекомендуется
  • В чем разница между feature detection (определение возможностей браузера), feature inference (предположение возможностей) и анализом строки user-agent?
  • Расскажите об AJAX как можно более подробно
  • Объясните, как работает JSONP (и почему это не настоящий AJAX)
  • Вы когда-нибудь использовали шаблонизацию на JavaScript?
    • Если да, какие библиотеки использовали? (Mustache.js, Handlebars etc.)
  • Объясните, что такое «hoisting»
  • Объясните event bubbling
  • В чем разница между «атрибутом» (attribute) и «свойством» (property)?
  • Почему не следует расширять нативные JavaScript объекты?
  • Почему следует расширять нативные JavaScript объекты?
  • В чем разница между событиями document load и document ready ?
  • В чем разница между == и === ?
  • Как получить параметры из URL’а текущего окна?
  • Объясните same-origin policy в контексте JavaScript
  • Объясните event delegation
  • Какие Вы знаете паттерны организации наследования в JavaScript?
  • Сделайте так, чтобы этот код работал:
  • Опишите принцип мемоизации (избежание повторных вычислений) в JavaScript
  • Почему тернарный оператор так называется?
  • Что такое арность функции?
  • Что делает строчка «use strict»; ? Какие достоинства и недостатки от её использования?

Примеры кода на JavaScript [↑]

Вопрос: Какое значение возвращает данное предложение?
Ответ: 3

Вопрос: Какое значение возвращает данное предложение?
Ответ: «goh angasal a m’i»

Вопрос: Чему равно window.foo?
Ответ: «bar»,
только если выражение window.foo было ложным, иначе переменная сохранит своё изначальное значение

Вопрос: Что покажут эти два alert?
Ответ: «Hello World» и ReferenceError: bar is not defined

Вопрос: Чему равно foo.length?
Ответ: 2

Вопрос: Чему равно foo.length?
Ответ: undefined

Вопросы по jQuery: [↑]

  • Объясните «chaining».
  • Объясните «deferreds».
  • Какие Вы знаете приемы оптимизации кода, использующего jQuery?
  • Что делает .end() ?
  • Как добавить пространство имён к обработчику событий? Для чего это нужно?
  • Назовите 4 разных вида аргументов, которые принимает функция jQuery()?
    • Селектор (строка), HTML (строка), Callback (функция), HTMLElement, объект, массив, массив элементов, объект jQuery etc.
  • Что такое очередь эффектов (fx queue)?
  • В чем разница между .get() , [] , и .eq() ?
  • В чем разница между .bind() , .live() , и .delegate() ?
  • В чем разница между $ и $.fn ? Что вообще такое $.fn ?
  • Оптимизируйте данный селектор:

Вопросы по CSS: [↑]

  • Что такое «reset» CSS и для чего он нужен?
  • Объясните, что такое плавающие элементы (floats) и как они работают?
  • Какие вы знаете методы запрета обтекания (clearing) и какие где применяются?
  • Что такое CSS спрайты? Как они реализуются на странице или сайте?
  • Какие Ваши любимые методы подмены текста картинкой (image replacement) и когда Вы их используете?
  • CSS property hacks, conditionally included .css files…
  • Как Вы обеспечиваете отображение страниц в старых/ограниченных браузерах?
    • Какие приёмы/процессы Вы при этом используете?
  • Какими способами можно визуально скрыть элемент (оставив его доступным для экранного диктора, screen reader)?
  • Вы когда-нибудь использовали сеточную верстку (grid system, grid design)? Если да, какая Ваша любимая?
  • Приходилось ли вам использовать или реализовывать media queries или верстку под мобильные устройства?
  • Приходилось ли вам стилизовать SVG?
  • Как оптимизировать страницы для печати?
  • Какие есть подводные камни в оптимизации производительности CSS?
  • Вы используете CSS препроцессоры? (Sass, Compass, Bourbon, Stylus, LESS)
    • Если да, расскажите, что вам в них нравится и не нравится?
  • Как Вы сверстаете макет, который использует нестандартные шрифты?
    • Webfonts (сервисы вроде Google Webfonts, Typekit, Fontsquirrel etc.)
  • Объясните, как браузер определяет, на какие элементы накладывать CSS стили?
  • Приходилось ли сталкиваться с Retina-дисплеями?
  • Слышали ли о системе БЭМ (Блок-Элемент-Модификатор)?
    • Если да, то в чем её суть? Расскажите о системе нотификации селекторов.

«Светская беседа»: [↑]

  • Самое крутое, что Вы когда либо делали и чем гордитесь?
  • Вы знаете секретный жест HTML5-банды?
  • Что Вы больше всего любите в Ваших инструментах разработки?
  • У Вас есть какие-нибудь личные проекты?
  • Возьмите листок бумаги и напишите в столбик буквы A B C D E. Теперь отсортируйте столбик в алфавитном порядке по убыванию, не написав ни строчки кода.
    • Засеките, через сколько времени кандидат перевернет листок
  • Пират или ниндзя?
    • Бонус за комбинацию. Аргументированную. +2 за зомби-пират-ниндзя-обезьяну
  • Чем бы Вы занимались, если бы не Web-разработкой?
  • Какая Ваша любимая «фишка» Internet Explorer?
  • Закончите предложение: Brendan Eich и Doug Crockford являются ____ языка JavaScript.
  • jQuery: хорошая библиотека или великая библиотека? Тема для дискуссии…

Первоначальные авторы [↑]

  • @bentruyman (bentruyman.com)
  • @cowboy (benalman.com)
  • @roger_raymond (twitter.com/iansym)
  • @ajpiano (ajpiano.com)
  • @paul_irish (paulirish.com)
  • @SlexAxton (alexsexton.com)
  • @boazsender (boazsender.com)
  • @miketaylr (miketaylr.com)
  • @vladikoff (vladfilippov.com)
  • @gf3 (gf3.ca)
  • @jon_neal (twitter.com/jon_neal)
  • @wookiehangover (wookiehangover.com)
  • @darcy_clarke (darcyclarke.me)

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

5 типичных JavaScript вопросов на собеседовании

Разработчики JavaScript пользуются большим спросом в мире IT. Если это та сфера, в которой у вас достаточно знаний, у вас есть много возможностей изменить место своей работы и повысить заработную плату. Но прежде чем вы будете приняты на работу, вам необходимо будет пройти собеседование. В этой статье мы покажем вам 5 типичных вопросов, которые вы должны пройти при приёме на работу и показать свои умения в JavaScript.

Вопрос 1: Возможности

Рассмотрим следующий код:

Что будет написано на консоли?

Ответ

Код выше напишет 5.

Хитрость этого вопроса заключается в том, что в IIFE есть два задания, но переменная a объявляется ключевым словом var. Это означает, что a является переменной функции. b же присвоена глобальной области.

Другой хитростью этого вопроса является то, что он использует строгий режим (‘use strict’;) в функции. Если был включен строгий режим, код покажет ошибку “Uncaught ReferenceError: b не определён”. Помните, что строгий режим требует, чтобы вы ссылались на глобальные области. Таким образом, вы должны написать:

Вопрос 2: Создание “родных” методов

Определите повторяющуюся функцию в строке объекта. Функция подразумевает целое число, определяющее, сколько раз строка должна повториться. Функция повторяет указанную строку указанное количество раз. Например:

Должно получиться «hellohellohello».

Ответ

Возможная реализация показана ниже:

Вопрос проверяет знания разработчиков о наследовании в JavaScript и свойстве прототипа. Так же проверяется и способность разработчика расширять функциональность собственных типов данных (хотя это не обязательно).

Ещё одним важным моментом является демонстрация знаний о том, как не отменить уже определенные функции. Это делается путём тестирования, подтверждающего, что функция не существует самостоятельно до ее определения.

Этот метод особенно полезен, когда вас попросили заклинить функцию JavaScript.

Вопрос 3: Подъём

Каков результат выполнения и почему?

Ответ

Результаты кода – underfined и 2.

Причина в том, что обе переменные функции подняты (помещены в верхней части функции), но переменные не удерживают присвоены значения. В то время, когда переменная a печатается, она существует в функции (это декларируется), но она все ещё undefined. Другими словами, код выше эквивалентен следующему:

Вопрос 4: Как это работает в JavaScript

Каков результат следующего кода? Обоснуйте свой ответ.

Ответ

Код выдаст Aurelio De Rosa и John Doe. Причина в том, что контекст функции, вызываемый ключевым this словом, в JavaScript зависит от того, как именно вызывается функция, а не от того, как она определена.
Вызов первых console.log ( ), getFullname ( ) вызывается функцией объекта obj.prop. Таким образом, контекст относится к последнему и возвращает “fullname” как свойство объекта. В противном случае, когда getFullname ( ) присваивается переменной, контекст относится к глобальному объекту. Это происходит потому, что тест устанавливается как свойство глобального объекта (window). По этой причине функция возвращает значение свойства fullnameиз window, которая в данном случае является кодом, устанавливаемым в первой строке фрагмента.

Вопрос 5: call ( ) и apply ( )

Исправьте предыдущий вопрос так, чтобы последний console.log ( ) стал Aurelio De Rosa.

Ответ

Вопрос может быть изменен, повлияв на контекст функции, используя функции call ( ) или apply ( ). Если вы не знаете их и их отличия, вам стоит прочесть статью. В коде ниже я буду использовать call ( ), но в этом случае применяется apply ( ), результат будет тот же:

Заключение

В этой статье мы обсудили пять типичных вопросов, которые задают на собеседовании, чтобы проверить разработчика JavaScript. Фактические вопросы могут отличаться от собеседования, но понятия и темы, как правило, схожи. Я надеюсь, что вы хорошо провели время, тестируя свои знания. В случае, если вы не смогли ответить на все вопросы, не волнуйтесь: нет ничего, что изучение и опыт не могут исправить.
Если у вас были другие вопросы на собеседовании, не стесняйтесь поделиться ими с нами. Это может помочь многим разработчикам.

О чем вас спросят на собеседовании vue.js в 2020

Vue — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications).

Каждое Vue приложение начинается с создания нового экземпляра Vue:

  • Реактивность
  • Обработка событий
  • Шаблоны
  • Компоненты
  • Роутинг
  • Легкий

Изменения в определенном свойстве, которое должно быть реактивным, отслеживаются в Vue через data. Вычисляемые свойства позволяют определять свойства, которые используются точно так же, как data, но также могут содержать пользовательскую логику, которая кэшируется в зависимости от зависимостей. Можно считать вычисляемые свойства другим взглядом на data.

  • Собирают зависимости и при изменении данных производится перерасчёт
  • Ленивые — рассчитываются только при обращении к ним
  • Зависят от data, props или других вычисляемых свойств
  • Возвращают новое значение

Это полноценная система для быстрой разработки на Vue.js

Vue CLI стремится стать стандартным инструментарием для экосистемы Vue. Он обеспечивает бесперебойную работу различных инструментов сборки, устанавливает разумные значения по умолчанию, поэтому вы сможете сосредоточиться на разработке приложения, а не проводить дни за его настройкой. В то же время, остаётся гибкость настройки конфигурации каждого инструмента без необходимости извлечения конфигурации в отдельный файл.

Компоненты — это переиспользуемые экземпляры Vue со своим именем

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

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

В центре любого Vuex-приложения находится хранилище. «Хранилище» — это контейнер, в котором хранится состояние вашего приложения. Два момента отличают хранилище Vuex от простого глобального объекта:

  • Хранилище Vuex реактивно. Когда компоненты Vue полагаются на его состояние, то они будут реактивно и эффективно обновляться, если состояние хранилища изменяется.
  • Нельзя напрямую изменять состояние хранилища. Единственный способ внести изменения — явно вызвать мутацию. Это гарантирует, что любое изменение состояния оставляет след и позволяет использовать инструментарий, чтобы лучше понимать ход работы приложения.

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

Добавить комментарий