Собеседование на JavaScript разработчика | Junior Frontend разработчик

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

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

  00:00:00 - 00:01:14

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

  00:00:38 - 00:01:58

• познакомился прошел то некоторые тестики свободным доску если там оля на профориентацию выйти и выбрал и выбрал чтобы сейчас все очень нравится ну здорово супер гуд хорошо я у меня тоже примерно такая же история я работал в области электроники в разработке булыжником отдел потом в пару ситуации в жизни и решил попробовать все-таки выйти и получилось и сейчас работает front-end разработчиками компании призвать куратору в школе виду ребят учим учим учим погнали начнем буквально пару вопросов html css до первый вопрос

  00:01:18 - 00:02:39

• такой очень популярный да что такое семантика да какие химические теги ты знаешь ну если так очень общего с иными словами говорить-то семантика нужно для того чтобы когда скажем так наш сайт как-то определялся в поисковых системах то есть когда он google проводит поиск по сайтам он считывает семантику сайта и смотрим что в нем находится ну семантический теги например это форм article экшн main на фидер footer у такого рода супер поисковым роботам проще понимать находится хорошо что такое css вообще

  00:02:01 - 00:03:33

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

  00:02:47 - 00:04:15

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

  00:03:30 - 00:04:51

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

  00:04:15 - 00:05:44

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

  00:05:13 - 00:06:38

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

  00:06:00 - 00:07:34

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

  00:07:14 - 00:08:29

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

  00:07:54 - 00:09:31

• declaration мы можем объявлять и позже чем используем это то вы хотите услышать но вода в какой-то степени да а если мы рассматриваем это с точки зрения переменных как клетка нс ивар в чем вот здесь вот главное отличие скажем так вот где присутствует он присутствует в каких ключевых словах присутствует fall apart присутствуют но так лучше не делать a bad company не в общем так нельзя то есть будет тогда принтер в чем как бы основные отличия глобальные между бар или в область видимости лодка он станет

  00:08:52 - 00:10:09

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

  00:09:33 - 00:11:06

• оператор и он возвращает 1 фолз либо последние ru оператор или наоборот за счет первая труба последний фолз . первая строчка вернет 10 вернёт 0 до 2 в 1 с точками все понятно как и сказал и оператор или он возвращает 1 труп 0 нас были на низкое значение переводится это фолз 10 во второй строке у нас falls но он записан в виде строки поэтому просто true и тогда у нас оператор и возвращает 1 фолз ноль соответственно будет дальше мы переходим ко второму оператору и ну и соответственно 1 фолз это снова 0

  00:10:27 - 00:12:04

• пожалуйста разница между прочим фарш declaration там есть три отличия это первый синтаксиса написания самое банальное второе это в том что можем с ван цин declaration 1х eten то есть мы можем объявлять позже чем пользуем с function express и бы так делать не можем еще одно отличие то что панк declaration имеет блочную видимости нет функционального edius и barry white индексов между врач ничего не обращают мог возвращает помещаем функцию call back функции colbert на правом какие-то действия с каждым ребята массив

  00:11:24 - 00:12:49

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

  00:12:37 - 00:14:03

• каким образом они работают вот ну давай рассмотрим на методе файнс у нас есть какой-то массив и как он работает и месиво что принимая call back и что должен вернуть кубок чтобы что то у нас произошло колпак одевает какое-то условие и point возвращает 1 элемент о котором в условиях дал утру все супер просто понятно ok едем дальше расскажи мне тогда пожалуйста действенность такие методы как септимов eset интервалу маша сказать что это за методы для чего применяется это методы ахнул слова можно оказывать такой небольшой

  00:13:54 - 00:15:13

• асинхронный java скрипта это функция которая принимает себя коллберг и который параметр виде числа лбк соответственно мы помещаем какое-то действие вторым параметром помещаем время в миллисекундах соответственно set time out навешивает например на какую-то функцию данный то что у нас вот как вообще на call back навешивает время которым указали вторым параметром и то время интервал соответственно навешивать через это время постоянно повторять немножко да если прям по учебнику по моему это просто

  00:14:34 - 00:15:59

• объект который хранит в себе свое состояние и только когда мы ожидаем чего-то еще кое что такое не помню как он называется [музыка] хорошо [музыка] когда не выполнен когда она в процессе получается обработки отправили куда-то и ждем сидеть хорошо давай passing a white немножко ну это такой синг се с помощью которой мы можем сделать наши функции асинхронными максимально простой то есть я мы пишем сюда не хочу sing дальше там где например мы ждем наш promise мы вставим weight и это помогает в отличие от работы с кроме сами

  00:15:33 - 00:17:24

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

  00:16:51 - 00:17:55

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

  00:17:22 - 00:18:56

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

  00:18:52 - 00:20:18

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

  00:20:26 - 00:21:55

• солнце да давай так и пока я заставлю ну то есть я только здесь могу конус я правильно так мы делаем давай удалим весь я врезал принял наш promise функция здесь заключается так у нас пришел и содержится наш профиль так супер теперь мы должны наш он просто взять response а то есть то что он содержит окей как мы [музыка] можем верни нам response сделать да и следующему же promise убеждает достать стыда ос response через но через я понял сразу ну вот как бы все мы получили массив какой-то жалкий of the fuck the не довел

  00:21:14 - 00:23:18

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

  00:23:37 - 00:24:55

• информация хорошо вот эти дальше может быть немножко расскажешь мне про event log что это замечательная штука и может быть знаешь что такое микро и макро тоски да иван клуб это можно начал собой цельный цикл он состоит из трех вещей это лтп папе и очереди я могу пример привести . это говорит о том что ну как стать его попробуем наши интервала например console.log art здесь например тайм аут тайм аут мы помещаем и говорил конце лоб например цифра 2 нанесут и говорил 1000 миллисекунд пока сколько потерял

  00:24:17 - 00:25:57

• все верно а здесь он будет концом блок и пристану каким образом оно уже там есть уже есть решение да то есть таким образом что она сначала выполнить состав даже если сравнить да конечно то есть у нас идет код выполняться этапа точно последовательно на сначала в конструктор он сразу кидается в наш call stack как вызовов сразу пришел ушел дальше у нас идёт пункт set time out она видит что это функции с кубиком она идет нашего папе потому что по дефолту эту функциональность предоставляет именно наш браузер он идет в папе ждет

  00:25:25 - 00:26:54

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

  00:26:22 - 00:27:44

• выполняются макро тоски они уходят в папе потом уже идут через колбы full of так не совсем так поговорим в контексте что в этом деле отопитель когда чтобы едем дальше еще передавать его просекой по этими задачками расскажи мне пожалуйста что не такие play line ничего не применяется обещая катенька да конечно ну тогда можно начать объяснение из контекста ключевого слова как искал у нас есть скоб и области dynasty и java скрипте нас часто их разграничения по лексической области видимости например

  00:27:02 - 00:28:47

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

  00:27:56 - 00:29:19

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

  00:29:03 - 00:30:53

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

  00:31:17 - 00:32:25

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

  00:31:56 - 00:33:20

• на b нечетные возвращает их сумму можем сделать так [музыка] он сделан немного иначе возвращает их сумму а не иначе как она у нас будет здесь про а ты логику покопаться я все-все [музыка] но всё верно давай посмотрим на последние адана последние ну [музыка] теперь подумаем как оптимизировать я думаю просто что можно начать тогда с валидации является оба черт этих числа нечетные или разные нипочём подчеркну почетные среда или или одинаково они оба там нечетные или поставить цикл ну я сначала провел validate на то болит

  00:32:54 - 00:34:53

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

  00:35:37 - 00:36:59

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

  00:36:29 - 00:37:32

• еще одну интересную задачку для того чтобы посмотреть как ты дружишь с шестым так значит смотри у нас есть задачка найти вес всех вещей то есть сумму всех вещей на складе цена которых более 80 ну вот просто более 80 условных единиц и количество которых менее семи на складе у нас есть вот такой массив из всех вещей то есть мы получается должны количество наши умножить на диас случае если но удовлетворяет этим условие давай браво держать [музыка] пока там сделаем да конечно нет 5 мы берём наш ну например

  00:37:00 - 00:38:20

• будет а говорю что . прайс кстати можно сделать по моему вот тогда становись прайсы на которых более 80 больше 80 и декстер [музыка] мини-пончики ниши точнейшие вот так правильно ругается 1-2 теперь у нас будет отфильтрованный массив и теперь мы можем сказать white ну в принципе можем через readers билось говорим ок и теперь мы говорим ок плюс равно и [музыка] [музыка] интерес у а все все понял мы же down их же я бы конечно мы получаем массив с объектами получается наш аккумулятор аккумулятор как 1 как объект

  00:38:25 - 00:40:48

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

  00:40:59 - 00:42:32

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

  00:42:08 - 00:43:43

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

  00:43:09 - 00:44:22

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

  00:43:52 - 00:44:57

• провис по поводу макро микро задачи как она у нас подразделяется есть макро задачи это такие штуки как санкт intervals и тайм-аут это все браузеры и вот эти вот асинхронные штуки которые происходят внутри взятка задачи это вот например promise i do it mutation обзор игры например вот это такие штуки которые ну что-то внешнее отдает какую-то информацию нашему браузеру не сам браузер по факту считается что-то внешнее дает ему ответ вот и это две дополнительные скажем так очереди и микро задач всегда приоритет выше чем у

  00:44:25 - 00:45:35

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

  00:45:00 - 00:46:11

• и все и таким образом у нас получится один цикл а мне надо будет делать два этих если там идет уже миллионах каких-то полей да ты здесь конечно же стоит думать о производительности когда идет но а маленьких объемах информации речь здесь все-таки предпочтительнее из 6 синтаксис потому что он сильно понятнее для разработчиков так далее вот что еще по тебе хотелось бы сказать даже перед советом который будет в реальной жизни стоит повторить немножко html css ещё продержаться до есть какие-то небольшие

  00:45:36 - 00:46:39

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

  00:46:06 - 00:46:56