Техническое собеседование на JavaScript разработчика | Junior fullstack-разработчик

Транскрипция видео:

• всем всем привет Сегодня у нас публичная Техническая собеседование с выпускником эльбрусбадкамов кстати ранее на нашем канале мы выпустили видео с этим шаром где выпускник проходил первый этап собеседования где мы проверили его софты посмотреть его подсказки сверху Теперь мы перейдем к следующему этапу к технической части которая проведу Я кто-то со мной не знаком расскажу Меня зовут Александр Князев я тимлит преподавателей Московского кампуса в Эльбрусе Сегодня я буду задавать вопросы связанные с языком программирования

  00:00:00 - 00:01:10

• чтобы оценить знания и умения Андрея в этой области Привет Андрей мы послушаем ответы Андрей если меня будут к ним какие-то комментарии то я обязательно их озвучу в том числе вот после вопросов мы посмотрим фрагмент кода а также может быть решим еще какую-нибудь задачу Если вы хотите больше подобных видео на нашем канале Давайте нам об этом знать с помощью подписки лайка и комментариев не будем больше тянуть Как ты себя чувствуешь Ну примерно так же как на всех остальных собеседованиях но не нервничай вопросики будут

  00:00:35 - 00:01:55

• совершенно не трудными я уверен что ты на них знаешь ответы тем не менее Если вдруг не знаешь мой совет просто попробуй порассуждать немного как бы ты на них поотвечал И если мы всегда можем условно взять и развить какую-то тему Может быть скажу потому что обычно собеседование не нужно будет не столь важно всегда точно ответить на вопрос Сколько показать свою некоторую область знаний Ну начнем с таких некоторых общих вопросов Вот ты наверное знаешь что есть какие-то методы запросов и есть два таких самых типичных методов

  00:01:19 - 00:02:41

• которые используют пост можно сказать в чем их Ну давай попробуем Get запросы в основном нужны для получения каких-то данных то есть для отрисовки страницы Вот они не предполагают передачи каких-то данных в самом запросе то есть мы просто запрашиваем какой-то адрес и получаем в ответ разметку то есть видим какой то страницу вот в то же время поста опросы они себе могут содержать внутри запросов какие-то данные которые мы Передаем и получаем в ответ что-то от сервера То есть например это может быть запрос на

  00:02:00 - 00:03:31

• добавление какой-нибудь записи то есть мы отправляем записи в ответ получаем ответ что запись успешно создана или поиск какого-то записи по базе данных то есть мы отправляем ответом определенные Вот и в ответ получаем либо там Саму запись либо информация что она успешно найдена супер то что сказал как раз прогретый пост Это вот в частности их наверное цель зачем они используются это в частности архитектура rest И на самом деле мы можем использовать где-то пост даже для каких-то других своих целей

  00:02:46 - 00:04:01

• единственное хотел чуть-чуть тебя вот здесь уточнить вопрос то есть ты сказал что отличается от поста что в посте мы можем данные вот где данные можно достать выпуск насколько я помню Они лежат в теле запроса то есть запрос представляет себя объект и у него есть поле рек Ну либо квест Вот это сам запрос и в нем есть поле Body в котором будет лежать наша информация отлично последний вопрос здесь будет в эту тему с помощью можно вложить в тело запрос данный можно вложить где-то запросе то есть данные

  00:03:24 - 00:04:53

• можно но они будут храниться в открытом виде то есть они попадут в сам URL которыми Передаем соответственно они будут не зашифрованы доступны в самом запросе в том числе клиент даже будет видеть в адресной строке эти данные Давайте общий вопрос после ты с ней и вообще про что она Да сталкивался Корс вообще это политика доступа к внешним ресурсам в чем в чем она заключается То есть когда мы с какого-то URL запрашиваем данные с другого URL с другого домена то в браузер есть политика кожи которая по умолчанию это

  00:04:09 - 00:05:39

• запрещает То есть она считает доступ небезопасным соответственно на нашей странице Мы например не сможем просто напрямую получить данные с другого домена Вот и мы можем либо Это явно задать настройках разрешить подключение к каким-то источником внешне может ли он Можно ко всем то есть каким-то образом это настроить либо обойти то за путем запроса сервера То есть когда мы отправляем запрос с нашей страницы на сервер и запрос внешнего ресурса идет уже со стороны сервера Вот как раз у меня был такой момент в одном из проектов

  00:05:02 - 00:06:27

• когда я подключался копии внешнему политика кожа запрещала мне напрямую подключение с сделал запрос на сервер и уже сервера подключаться супер спасибо большое Андрей Давай тогда чуть-чуть перейдем к более каким-то точечным вопросам сейчас я наверное задаю некоторые вопросы непосредственно про JavaScript Вот и начнем с кого-нибудь супер простого Вот вот есть ну Яндекс в чем их различие чем они нужны почему они вообще различаются это оба типа обозначают отсутствие данных но отличаются они тем что

  00:05:44 - 00:07:13

• ну мы явно задаем то есть соответственно мы можем в какой-то поле объекта либо функцию какой-то переменную записать на вот и это будет явно заданное отсутствие значения defind у нас возвращается само то есть это либо результат выполнения функции которые ничего не возвращает либо просто объявлено но не заполненная переменная Вот и соответственно присваивает значение если он не видит какого-то значения Супер Тогда у меня здесь вот есть несколько как минимум один такой Следующий вопрос Ты сказал что если функция ничего не

  00:06:36 - 00:07:56

• возвращает то действительно результат ее работы это будет undefine который запишется в какой-то Вот вот предположим что у меня во-первых такой вопрос Если я напишу Отличается ли Как ты думаешь запись Return and внутри функции или когда у нас просто нет притерна от ее возвращаем значение 1 [музыка] достаточно интересный вопрос честно скажу с таким не сталкивался с явным возвратом Надо подумать Но вообще я предполагаю что не будет отличаться потому что если мы явно зададим то значение и получит вот так вот такой показатель ну и

  00:07:17 - 00:08:58

• соответственно то есть грубо говоря мы явно сдадим то то что функция и так по получила по умолчанию чем вообще чем может пригодиться запись резервном дефант внутри функции придумали попробую придумать кейс когда запись будет важна и она будет отличаться от поведения функции нас общение есть предположение что может быть это важно будет в Type скрипте когда мы явно указываем что Функция может вернуть undefind и хотим чтобы она его вернула в данном случае то есть не возникла ситуация когда она вернет не

  00:08:13 - 00:09:28

• undefined Например если какое-то условие внутри функции Мы хотим что получить обработать как-то значение undefinet и соответственно точно задать чтобы именно она нам приходила в каком-то кейсе приходит то есть условно действительно ричардафан позволит нам что-то обработать И заранее вы завершить работу функции А если у тебя не будет Return undefind Да и вообще никаких Харитонов не будет функция то ты по сути сразу понимаешь что тебя функция должна работать полностью то есть опять же нужно обработать что-то и завершить

  00:09:00 - 00:10:17

• работу функции хорошо и последний вопрос вот в этом же степь вот предположим у нас функция была объявлена с помощью ключевого слова sing Я в ней ничего не написал никаких Чернов нет вот вызвал эту функцию и результаты функции поместил переменную что в этой переменной будет насколько я понимаю асинхронная функция всегда нам возвращает промес то есть скорее всего это переменной будет лежать промес и вот когда он зарисовывается уже ну либо не зарисовывается мы получим наш эндофант Спасибо большое не получилось

  00:09:43 - 00:11:09

• к вопросу Есть такая концепция называется замыкание Может ли мне рассказать вообще про что она может Зачем какой-нибудь пример зачем Иногда используется замыкание скрипте это функция со всеми доступными и переменными так как сейчас в современном синтаксисе точно область видимости переменных То есть это переменная объявленные через конность и соответственно эти переменные доступны только в том блоке в котором они объявлены и не в доступны в вышестоящих блоках Вот вот функция замыкание функции эта функция и все

  00:10:34 - 00:11:59

• переменные которые ей доступны выглядит это чаще всего как например функция внутри функции если мы в родительской функции объявляем какой-то переменную то во внутренней функции мы имеем доступ к этой переменной Вот но соответственно Извне функции мы эту переменную не увидим Ну и Например если у нас там много однотипных функций мы можем похожие переменные называть одинаковые они будут отличаться внутри каждой функции Отлично вот смотри предположим тебе нужно хранить коллекцию каких данных скажи чтобы ты использовал объект

  00:11:22 - 00:12:47

• тут наверное все будет зависеть от того какая именно коллекция что в ней содержится и Какие данные нам нужно сохранить Если вкратце то позволяет в качестве ключей пений имеет только строки соответственно То есть если нам позволяет это структуры данных то можно использовать объект сет в свою очередь нам оставляет только значение без ключей причем эти значения будут только уникальными соответственно если у нас в коллекции Изначально и это с помощью Set моих потеряем Ну и Map соответственно это наверное самая

  00:12:17 - 00:13:46

• широкая структура Она позволяет любого вида данные содержать в Ключах значений ну и соответственно позволяет любого вида иметь данные супер то есть действительно очень здорово что ты подчеркнул еще и во всех этих типах данных то есть тогда у меня такой вопрос Ты сказал что в объекте мы в качестве ключей можем не только строки А вот мы можем использовать даже и объекты виде ключей вот тогда на такой вопрос Могу ли я попробовать использовать объект в качестве ключа внутри объекта И что тогда будет являться реальным ключом

  00:13:04 - 00:14:42

• понятно что если укажу строку виде объекта видит ключа внутри объекта это ключом что если там будет объект находиться в качестве ключа внутри объекта Ну не припомню чтобы с таким сталкивался но можно попробовать поразмышлять либо Как вариант он может содержать у нас ключ object Вот и соответственно мы не сможем его однозначно идентифицировать то есть на каждый такой ключ значение Вот либо он может наверное подобрать какое-то значение из внутреннего объекта его использовать как ключ но не знаю это наверное

  00:13:55 - 00:15:33

• маловероятно Но вообще я предполагаю что он запишет это видео object ну и соответственно мы не сможем выбрать конкретное значение потому что у нас в каждом будут объекты если такие значения несколько ключом Что значит объект объект на самом деле это будет такая правда то есть действительно так как у нас в объекте ключи могут быть только видели строки то если я попробую объект сделать ключом о нем вызовется метод который лежит цепочке и приведет его к строке приводя к объекты Совершенно верно будет

  00:14:50 - 00:16:19

• Спасибо большое виртуальном доме Я слышал такой концепцию можешь мне сказать что же такое виртуальный дом Ну давай попробуем То есть в принципе реакция своей основе имеет принцип виртуального дома это то что позволяет ему сильно ускорять работу сильно упрощать наверное немножко отступим и Начнем с того что такое обычный дом когда браузер получает ответ от сервера какой-то разметку он строит дерево вот где каждый объект Каждый элемент этого дерева представляет себя какой-то тег ну и соответственно

  00:15:42 - 00:17:08

• такая получается древовидная структура объектного типа где каждый тег соответственно узлом представлен и при внесении каких-то изменений в эту разметку то есть при изменении любого тега браузер должен полностью перестроить все дерево То есть он не только не только изменившиеся части перестраивает заново строить Все дерево это достаточно трудоемкая операция то есть ресурсоемкая и как раз за счет этого при большом объеме данных нас все работает не очень быстро и вот реакт для того чтобы решить эту проблему

  00:16:31 - 00:17:57

• использовать принцип виртуального дерева Это копия обычного дом дерева она создается Изначально и любые изменения которые мы вносим сначала отображаются в виртуальном дереве то есть меняется только тег который был изменен и соответственно все зависимые от него элементы И после этого он сравнивает уже виртуальная дом дерево и с реальным и заменяет в реальном только ту часть которая изменилась То есть это позволяет очень сильно ускорить процесс обработки супер знаешь что-нибудь про то как часто происходит вот эти отслеживание

  00:17:14 - 00:18:35

• изменений в виртуальном Чтобы отобразить насколько я понимаю при любом действии на сайте тогда мне такой вопрос вот реакция называется реактор Да вот есть такое понятие как реактивность фризы как программирования вот что-то можешь сказать про реактивность реакции Вот точно помню что реакт не реактивный как бы это ни звучало То есть ему явно Насколько помню нужно задать необходимость проверить изменения он не делает этого сам по умолчанию он перевентрии когда у нас вызывает какой-то метод Метод но когда нас изменяется либо компонент

  00:17:53 - 00:19:28

• апдейца либо он монтируется либо он размонтируется то есть вот при этих моментах реак проверяет состояние дом дерева соответственно если не один из этих методов не срабатывает реак сам по себе не будет проверять изменения Хорошо тогда давай чуть-чуть поговорим ты писал реакции Значит ты наверное пользовался хуками было дело Да расскажи может быть Ну то есть хуки какие-то ты использовал не на разлив интересует прокуки каких ты можешь сказать который позволяет так или иначе оптимизировать ряд компоненты как-то

  00:18:52 - 00:20:19

• оптимизировать но наверное самый простой и такой самый популярный это Юза эффект то есть Он позволяет у нас избежать лишних рендеров потому что у него есть массив зависимости соответственно он будет вызывать render страницы только при изменениях внутри этого массива То есть если у нас например какая-то определенная переменная называется соответственно она бы изменение будет вызывать страницы во всех остальных случаях это не будет происходить вот ну и там также достаточно гибкая настройка То есть можно вызвать render только при

  00:19:40 - 00:21:10

• изначальном монтировании компонента вот можно вызвать при каждом изменении переменных Вот либо можно вызвать его вообще при любых изменениях страница вот ну и плюс есть два хука у нас такие самые популярные это искал Бэк и use Memo вот you Skull Back он создает у нас сейчас вспомню как это словами описывается Ну то есть он создает минимизированная функция обратного вызова то есть запоминает вот и опять же он принимает себя еще массив зависимости которого будет это все зависеть Вот и соответственно то

  00:20:24 - 00:21:59

• есть Он позволяет [музыка] делать так чтобы функция сохраненная в нем не вызывалось каждый раз когда у нас происходит Перри рендер компонента например функция внутри него не будет вызываться каждый раз если ее значение То есть все аргументы не изменяются и еще из мема Он позволяет запомнить значение функции чтобы не вычислять Каждый раз при Перри страницы нам не нужен был результат то он его просто вычисляет один раз запоминает и соответственно дальше уже вызывает Ну будет пересчитывать только в случае если

  00:21:17 - 00:22:43

• изменится аргументы функции Давайте чуть обсудим провод 30 момента смотри про userfect и сказал что из эффект вызывает можно сказать Вот Какие аргументы принимают эффект он принимает колбек и массив зависимости вот тогда этот клуб бек он вызывает Страницы или как этот как раз сам колбек насколько я понимаю не вызывает render страница то есть Он позволяет предотвратить рендер вот при срабатывании этой функции Вот то есть соответственно мы можем повесить на массив зависимости какой-то переменную и

  00:22:03 - 00:23:44

• при ее изменении не будет рендериться вся страница вызовет столько callback из эффектов в целом из эффект он действительно помогает нам оптимизировать но скорее не оптимизировать оптимизировать чисто код Потому что жизнь на церкви компонента много разных этапов есть мы можно писать один эффект который следит за обновлением состоянием в частности может быть следит за рендером и того как рендер случился может быть вызван в момент когда случается что-то не то чтобы предотвращает он просто случается мы следим отследили он

  00:23:11 - 00:24:32

• вызвался только может быть еще одна функция поэтому он просто и потом вызывает Вот про ЮСК тоже интересный вопрос действительно передаешь функцию вопрос Когда например Василий зависимости как ты сказал который есть колбеки что-то поменялось you callback вызовет эту функцию или не вызовет то есть Вот что он сделает с функцией которую туда передал в качестве первого аргумента соответственно если какое-то значение в массиве зависимости от изменилась то он вернет новую функцию же с измененными данными если

  00:23:54 - 00:25:25

• насколько я понимаю не будет вызывать То есть как раз для этого нужен чтобы не вызывать каждый раз эту функцию он просто вернется ему функцию отлично Да приходилось это вообще в двух словах Расскажи зачем нужен редакс Что это такое Ну вообще редакс это самая распространенный State Manager То есть это менеджер состоянии он хранит в себе переменные то есть любые данные то что реакции коробки не позволяет делать то есть ну точнее Он позволяет хранить данные внутри компонента и соответственно если нам нужно куда-то

  00:25:09 - 00:26:39

• передать то мы делаем Это для того чтобы избежать во-первых передачи продавцов Через несколько компонентов насквозь то есть но если предположить том что у нас есть там какая-то цепочка там из четырех компонентов Вот и нам нужно передать состояние какое-то через все эти компоненты в самый последний вот мы просто получается будем через каждый компонент передавать принимать это значение передавать дальше Вот редакции позволяет соответственно передать какое-то значение сразу конкретные компонент Ну и вторая опция

  00:26:09 - 00:27:23

• это соответственно наоборот изменения значения То есть если мы хотим передать там из какого-то дочернего компонента изменить какое-то состояние то нам не нужно будет опять же его наверх чтобы передать в соседние дочерние который Не связан напрямую мы можем просто изменить менеджеры и все компоненты на него подписаны вы увидите эти изменения супер да вот ты сейчас про редактор говорил в контексте реактор и на всякий случай такой вопрос а вот редакции он существует Без вариантов интересно вопрос на самом деле даже не

  00:26:46 - 00:28:03

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

  00:27:27 - 00:28:54

• так селектор у нас принимает какое-то состояние То есть он принимает Насколько помню а ну да стоит из редакса то есть Нам нужно в компоненте в файле где у нас компонент импортировать и как-то его и собственно давай подумаем нет нам не нужно импортировать значение моим партируем только сам хук ее селектор уже подписан на наш Store редакса Он позволяет вытащить определенные значения положить но мы объявляем какой-то переменную говорим что она будет у нас равна есть вектору и состояние этой переменной приравниваем К какому

  00:28:28 - 00:30:22

• какому-то состоянию из Тора то есть стоит будет равен там стоит какому-то Но из нашего стола там уже надо смотрите что у нас идет записано сектор принимает себя действительно в которую попадает в аргументы стоит вообще твой можно сказать весь Store и ты говоришь что ты должен вернуть из этого по сути попадает условно объект по какому ключу тебе Куда нужно обратиться в этом объекте то есть Обычно вот ну супер спасибо большое Андрей Давай тогда буквально я покажу небольшой он как раз из функционального

  00:29:45 - 00:31:14

• очень интересно просто смотрел и сказал свои комментарии что по поводу думаешь Ну давай попробуем включая демонстрацию видно что здесь написано да вот по сути есть какой-то функциональный компонент майкомпонент Просто скажи все что думаешь о нем нужно найти ошибки Давай посмотрим Значит это у нас функциональная компонент мои импортируем реакции так рапсон принимаем какое-то значение title [музыка] так дальше объявляем ее стоит это у нас какой-то счетчик Судя по всему Стартовая так дальше и дальше у нас идет разметка

  00:30:43 - 00:32:42

• мы выводим название которое мы получили в пробке так счетчик это мы текущее состояние я стейта выводим дальше кнопка на нажатие по кнопке у нас вызывается функция функция нас увеличивает счетчик на один так и дальше мы выводим Так что у нас здесь не так но для начала мне кажется что мы не получаем значение subtitle то есть мы вроде бы получили title там никак не упоминается на 15 строчки откуда он должен браться То есть тут наверно мы должны на третьей строчке получить не то это объект объект и уже из него вызывать ключи то это

  00:32:06 - 00:34:10

• так это первое и стейтом а ну и в функции increen Count тогда если мы хотим чтобы нас аккаунт увеличивался надо не каунт плюс ровно один Асет каунт от предыдущего значения привез callback Привез плюс равна 1 так как изменить значение Вест третьем и не можем напрямую для этого у нас как раз есть второй аргумент с аккаунт эта функция которая изменяет это значение Вот и наверное нам нужно ее засунуть будет внутри из эффекта чтобы нас Не обновляли но то есть чтобы не обновлялась страница просто увеличилась

  00:33:24 - 00:34:57

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

  00:34:22 - 00:35:47

• просто один объект уже оттуда вот с счетчиком правильно подметично что нужно спорить функцию setcount единственное не нужно Вы без эффект потому что оборачивать то что тебе нужно добиться render компонента по идее по клику на кнопку Мы хотим чтобы у нас счетчик увеличился то есть компонента 3 рендерился и выдал новое число единственное наверное можно задавать можно создавать функцию ее мемонизировать просто чтобы она лишний раз не создавалась потому что логика функции будет одна и та же поэтому можно

  00:35:07 - 00:36:12

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

  00:35:41 - 00:37:11

• ощущения сейчас доволен этим Как прошел собесед твои ожидания или наоборот нет поделись Да Саш спасибо большое за собеседование было очень комфортно мне понравилось Я надеюсь что вы готовы будете взять меня на работу на самом деле все было практически так же как происходит на реальных собеседованиях вот у меня этот опыт был не так давно поэтому есть чем сравнивать вот ну наверное надо было не нервничать вообще спокойно это делать Я очень старался не знаю насколько это получилось и наверное могу дать пару Советов от

  00:36:29 - 00:38:02

• себя то есть тем кто будет смотреть и тем кто скоро пойдет на собеседование вот если вы не знаете ответ на какой-то вопрос то действительно не надо говорить что вы не знаете надо стараться поразмышлять подумать чтобы это могло быть некоторые доли вероятности вот как минимум показать свой образ мысли даже если вы не знаете точного ответа то есть это в любом случае Вот супер спасибо большое Андрей Спасибо за то что вообще согласился пройти интервью твои ответы были крайне информативными и полезными для аудитории

  00:37:20 - 00:38:39

• Я надеюсь что данное видео станет полезным ресурсом для всех кто стремится стать успешным разработчиком что спасибо за просмотр и до новых встреч

  00:38:03 - 00:38:24