Джун решает алгоритмические задачи: удаление дублей массива, мемоизация, обработка csv

🌸 МАЙ! До 14 мая PHP со скидкой от 80 000 до 130 000 рублей на Frontend: ru.hexlet.io/link/V8tM1T
🔥 Учись фронтенду с нуля на Хекслете: ru.hexlet.io/link/m23b65
🔥 Бесплатный курс «Основы JS»: ru.hexlet.io/link/uvkMXQ
✅ Полезные вебинары по программированию каждую неделю: ru.hexlet.io/link/pfYsvY
Как проходит собеседование для начинающего фронтендера? Как решать на собеседовании алгоритмические задачи на JavaScript? Как пишется на JS функция, которая удаляет дубликаты из массивов, функция мемоизации (memoize) и обработка CSV? Рассказываем в этом видео
____
Публичное собеседование - формат учебного интервью, где джуниор-разработчик пытается пройти собеседование на позицию фронтенд-разработчика. Опытный разработчик задаёт вопросы, которые помогают кандидату продемонстрировать знание технологий и понимание подходов во фронтенде. В конце кандидат получит вердикт с резюме его слабых и сильных сторон.
- Собеседует Сэм Булатов, ведущий фронтендер в Waliot, организатор сообщества krd.dev
- Собеседование проходит студент Хекслета Александр Сдобников
____
🔗 Полезные ссылки:
- Комьюнити Хекслета: t.me/hexletcommunity
- Ещё публичные собеседования: • Публичные собеседовани...
- 20 советов для будущих программистов, которые ищут свою первую работу в IT: ru.hexlet.io/link/Blp7FJ
- 00:00:00 - интро
- 00:00:28 - нужно ли ожидать от студентов понимания будущей профессии
- 00:02:17 - из переводчика во фронтендеры
- 00:05:24 - поиск работы в течение 4 месяцев и первые собеседования
- 00:07:50 - переквалификация в TS и Remix.run
- 00:08:33 - изучение типизации
- 00:09:27 - лайвкодинг: функция, которая удаляет дубликаты из массивов
- 00:23:24 - лайвкодинг: функция мемоизации (memoize)
- 00:47:05 - инвалидация кэша
- 00:49:12 - обработка .csv
- 01:09:54 - резюмируем и играем на флейте
#itсобеседование #frontend #собеседование #хекслет

[@HexletOrg]

Смотрите больше публичных собеседований здесь: kzbin.info/aero/PLo6puixMwuSOa_0EH6X4OXzFAmyQGS3a3 А в этом видео: - 00:00:00 - интро - 00:00:28 - нужно ли ожидать от студентов понимания будущей профессии - 00:02:17 - из переводчика во фронтендеры - 00:05:24 - поиск работы в течение 4 месяцев и первые собеседования - 00:07:50 - переквалификация в TS и Remix.run - 00:08:33 - изучение типизации - 00:09:27 - лайвкодинг: функция, которая удаляет дубликаты из массивов - 00:23:24 - лайвкодинг: функция мемоизации (memoize) - 00:47:05 - инвалидация кэша - 00:49:12 - обработка .csv - 01:09:54 - резюмируем и играем на флейте

[@geri_freki]

1:12:56 Требования к джунам повышаются. Теперь нужно еще и на флейте уметь играть.

[@dmitriybalamozhnov9424]

еще и на бубне 😁

[@sggames5813]

Ты подожди, скоро на кожаной будут требовать.

[@dini9036]

@@sggames5813 Аахпхаххахах реально

[@rus1025]

😆@@sggames5813

[@TalkerTube]

Про Map - это было нечестно. После того как было сказано что давай без Set, можно было сделать вывод, давай без всяких сложных структур ручками с массивами работать. А тут такая подъебка подъехала

[@user-ry9ic6lt9h]

Задача на мемоизуцию интересная, спасибо)

[@user-mg4nn6gi5n]

Познавательно, образовательно

[@user-mp3tc3kg3b]

Я ещё не досмотрел про мемоизацию, но, имхо, лучше использовать arg как ключ, а результат вычислений как значение.

[@exx-ns4tt]

Прикольный собес. Порадовал интервьюер своим подходом к собеседованию. Перед каждым заданием ставил на паузу и пытался решить сам. Первое задание можно решить императивным путём, правда сложность алгоритма оставляет желать лучшего: const remImper = arr => { let res = []; for (let i = 0; i < arr.length; i++) { let isDub = false; for (let j = 1 + i; j < arr.length; j++) { if (arr[i] === arr[j]) { isDub = true; continue; } } if (!isDub) res.push(arr[i]); } return res; } Второй вариант через filter: const rem = arr => arr.filter((item, index) => arr.indexOf(item) === index); С кэшем можно просто проверить if(!cashe[key] ... Зачем заморачиваться с typeof === undefined?: const mem = fn => { const cashe = {}; return (...args) => { const key = args; if(!cashe[key]){ console.log("Cashing data..."); cashe[key] = fn(...args); } else{ console.log("fatching data..."); console.log(`fetched data: ${cashe[key]}`); } console.log("cashe:", JSON.stringify(cashe)); }; } const add = (a, b) => a+b; const memAdd = mem(add) memAdd(10, 20); memAdd(10, 20); memAdd(100, 222); memAdd(100, 222); memAdd(10, 20); Ну а в третьем варианте вообще какой-то монстр получился)) можно намапить и сджоинтить: const listOfGoods = [{ name: "Samasung", price: 100 },{ name: "iPhone", price: 250 },{ name: "Nokia", price: 125 }] const convertToCSV = goods =>{ const goodsKeys = Object.keys(goods[0])+' '; const goodsValues = goods .map(good => [good.name, good.price]).join(' '); return goodsKeys + goodsValues; } Но в любом случае парнишка молодец, быстро схватывает.

[@TalkerTube]

по первой задаче мне такой вариант нравится: function removeDuplicates(arr = []) { for (let i=0; i

[@exx-ns4tt]

Всё равно сложность квадратичная, лучше использовать хэш-таблицы@@TalkerTube

[@user-oi9vo7xk4x]

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

[@andryuhadvauha]

Сколько строчек кода нужно для сортировки двухмерного массива ? 😁

[@alexmarch]

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

[@by0uki]

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

[@bloodyclient]

Старый добрый костыльный метод решения: Создаешь второй пустой массив. Прогоняешь через цикл все элементы первого массива. Если второй массив не содержит еще данного элемента, то добавляешь, иначе -> перебираешь элементы далее, например, continue; На выходе просто присваиваешь второй массив значению первого, т бишь firstArray = secondArray. В итоге у нас появляется отфильтрованный массив элементов

[@mr_tcachshelkopryad5262]

Это и есть то, что сделал тот Джун. У этого метода большая сложность выполнения. Вместо второго массива можно использовать мапу, добавляя в него: значение - любое, ключ - элемент массива. Тогда и проверок делать никаких не надо - ключи в мапе все уникальные, второй такой-же не добавится. В итоге внутри цикла одна строчка. А возвращаем массив из ключей мапы, полученный методом Array.from(). Сложность - линейная O(n). Компактно, читабельно, круто.

[@bloodyclient]

@@mr_tcachshelkopryad5262 да, но лучше вообще не прибегать ни к одному из наших способов ) В той же джаве можно использовать putIfAbsent, либо же dublicateRemove() или как-то так, точное название не помню, ибо нужно смотреть по самим методам массива

[@TalkerTube]

@@mr_tcachshelkopryad5262 Когда он сказал давай попробуем без Set я и думать в сторону Map не стал бы. Читерство получается со стороны интервьюера

[@user-oi9vo7xk4x]

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

[@ksjshskak827]

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

[@alexmarch]

Вроде да

[@by0uki]

Ура по первой задачи я знаю что надо удалять найденые)

[@ivanlebedev009]

12:45 какие проблемы доп массив индекс значение если там если 0 то ++ если 1 то улаляем значение

[@sggames5813]

Да, но есть маленькая проблема, люди не знаю css приходят в web и не знают. Очень тяжело после вас парни переделывать проекты, прям тяжко.

[@user-wu1hg4pf9m]

map - тот же самый set в ключах, под капотом. Что то ты запутал просто парня.

[@olegkat4841]

есть вопрос, какой такой критический объем данных приходит на обработку на фронт, что мы начали просчитывать сложность алгоритма? И каковы реальные цифры тестов двух подходов к обработке данных через map или через foreach. На каком объёме тестировали? А если это про бек и Node, вы данные обходите прямым перебором?

[@codingjerk]

Люди которые не знаю про оценку сложности, иногда пишут алгоритмы, которые на любых данных тормозят :)

[@NiceGirlNiceMusic]

Человек программирует так же как играет на инструменте ).

[@user-uc5zi1gs8f]

То 2 месяца искал работу, то 4, мы вам перезвоним

[@Beast99able]

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

[@mephistorine]

Полностью согласен. Я думаю что из него выйдет хороший программист.

[@yippeeki-yey]

Пособедуйте снобов из комментов по высшему разряду, а то такие кадры для FAANG пропадают

[@93betokov]

Титаник)

[@user-kg6hy1sz4y]

Можете пожалуйста в след раз попросить хорошенько высморкаться того кто проходит интервью

[@twogog8981]

если это крепкий джун, то я уже близок к синьору

[@user-zq4nz6yd2p]

Да, и дальше продолжай тешить своё самолюбие. Почему то болтунов больше тех, кто ещё и дня не отработал в компании, но им кажется, что всё знают и умеют. Обучение в it, и работа в it, это небо и земля.

[@TrayHardPlay]

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

[@VeryLowDamage]

Максимум трейни+

[@PoRoKLusT]

@@TrayHardPlay это в принципе некорректное собеседование, никто не пишет алгоритм по мемоизации руками, ты всегда будешь либо брать из библиотеки подобную функцию, либо сделаешь то что по настоящему должен уметь делать программист - ok google... Конечно можно повыпендриваться и ляпнуть бред вроде "если гуглить такие простые вещи, то лучше продолжать обучение", но объективность такова, что алгоритмы руками с нуля приходится писать редко на фронте, чаще встают вопросы вроде "как сделать требуемый функционал на анте/матириалUI и подружить его с mobx и rxjs", при этом чтобы это было без костылей. Алгоритмы последнее дело. По сути в интервью парню не дали показать как он будет решать реальные бизнес задачи, как размышлять, какими путями идти. И в этом проблема собеседований джунов, на мидла легче залететь т.к. там часто подобной дуростью не занимаются на собесе.

[@yippeeki-yey]

​@@VeryLowDamage слишком жирно

[@Yoniss88]

Первую задачу с помощью синтаксиса спред и оператор new...но это создание нового массива, а не изменение текущего .

[@banan3208]

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

[@TracktorSpark]

Надеюсь, реальные собеседования будут похожи на это, а не из разряда "Что будет в консоли при вызове функции из десяти промисов и двадцати таймаутов"

[@kokhnovets]

Переполнение стека😁

[@user-rt2fw5nr2l]

Object.hasOwn - это статический метод класса Object, принимающий объект и строковое значение проверяемого свойства, hasOwnProperty же - это метод конкретного объекта, агрументом которого является проверяемая строка, а не объект cache, который вы упорно пытались ему подсунуть. Поэтому и не работало. у вас ничего. И "поэтому я не люблю Javascript" ага. Поставьте хоть линтеры себе чтоль, людей же вроде как обучаете.

[@user-tu6co5qy2t]

Навряд ли примерно так проходят собесы )

[@TalkerTube]

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

[@user-tu2mg3jx5n]

22:49 тут непонятно каким образом мапой можно проверить дубликаты в массиве и получить O(n)

[@user-fv4xc4qp2h]

чекашь наличие, если есть, не добавляешь естественно за 1 проход

[@user-tu2mg3jx5n]

@@user-fv4xc4qp2h ну так чекинг например через includes выполняется также за 0(n), проверка осуществляется в цикле мап. 0(n * n) и получаем ту же самую квадратичную сложность

[@mr.odomnitskiy5654]

@@user-tu2mg3jx5n обращение к свойствам объекта, например через obj [key] - не даёт сложности О(n)

[@TheLevius]

​@@user-fv4xc4qp2h а как узнать какой длинны будет выходной массив, если заранее неизвестно сколько в нем (во входящем массиве) может быть дубликатов? Каждый раз при переполнении выходного массива он будет копироваться, а значит и сложность будет почти квадратичной

[@user-tu2mg3jx5n]

@@mr.odomnitskiy5654 знаю, это сложность О(1) Я сперва подумал когда речь шла про мапу как о итераторе)

[@user-rb7zq5bd7f]

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

[@Therapyxx]

Момент с удалением дубликатов очень фигово подан, я бы вариант с мапой просто бы по факту откинул. Он сказал же - сет, в чем ему сразу отказали, указав, что его нету - зачем? Есть только одна мысль - сделать это алгоритмично самому, ака отсортировать и проверять ближнестоящие элементы. Но заместо этого его мокнули носом, что есть же еще МААААААААААААПА. Мог бы я так универ закончить и не получать неуд за такие хитрости.... :D А так задачи по типу "используйте хешсет, не используя библиотеки хешсета", означает, что его надо написать самостоятельно - с нуля. п.с. ничего плохого о собеседовании в общем (фулл не смотрел). На первый взгляд приятное собеседование. Просто намикнул про подход прикладных задач, это сильно путает и не важно кто сидит на против, самоучка, студент или человек с 30 летним стажем.

[@TalkerTube]

да, интервьюер в этом моменте читернул конечно

[@IvanStolyarov]

Сначала подумал, о, прикольно, просят самим реализовать поиск по хэшу и хранение в бакете, а потом собеседующий такой «Set нельзя, но есть map». Нет, фронтэнд останется фронтендом, никогда там не будет хардкора.

[@Sinedy]

Если сложнее кнопочек ничего не делать, то конечно.

[@snobou12]

"Джун" абсолютно не занимался задачами)

[@kotxiiith776]

Решает задачу через reduce, модно-функционально, но за квадратичную сложность. Вся соль приоритетов на фронтенде

[@TheLevius]

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

[@user-dz8nv7hr2r]

Люди, пишущие микросервисы на спринге, используя Stream API: 🌝🌝🌝 Люди, применяющие аналогичный синтаксис в js: 🖕🖕🖕

[@TalkerTube]

мы у себя в команде за попытку использования редьюс, бьем линейкой по рукам 😂😂

[@devope]

К чему фронтендеру знать как делать функцию мемоизации? Можно хотя бы один внятный живой пример? :)

[@skyhobbit9901]

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

[@az_911]

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

[@user-oz6xm9zp9d]

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

[@STELLS541]

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

[@TalkerTube]

умение проходить интервью - это отдельный скилл и нарабатывается он... прохождением множества интервью ))

[@STELLS541]

@@TalkerTube полностью согласен)

[@sergeypavlov8883]

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

[@PsiHamster]

А в чем проблема в критике? Человеку явно есть куда стремится, был бы это бэк, до джуна бы он не дотянул. Говорю, как человек, который не один и не два собеса проводил).

[@sergeypavlov8883]

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

[@mr.odomnitskiy5654]

Надеюсь его работодатель не будет смотреть

[@mikaelminkinn5820]

Какие симпы пипяо

[@lord8360]

Детские задачи какие-то

[@cybersystem5137]

Господа, вот ваша оптимизация по удалению дублей из массива ))) const _set = new Set([1,2,4,5,6,1,5,7,1]); console.log({s: [..._set]}); Чего вы там лисопед изобретаете? ))) Мемоизация, полагаю, это типа подводка к замыканию? Последняя задача - у вас цикл кривой. Я еще удивился, думаю: вау, новый синтаксис, которого я не знал! Оказывается его никто не знал и вы его разработали прям в эфире 🤣 for (key in object) -- и НИКАК иначе.

[@mr.odomnitskiy5654]

сказали же , что условие не использовать Set

[@user-zq4nz6yd2p]

Молчи, за умного сойдёшь

[@cybersystem5137]

​@@mr.odomnitskiy5654 я этого не услышал, значит так условие ставил. Хотя он сам при этом потом приводит пример на Map. Т.е. Set нельзя, а велик с Set можно - ясно понятно, да.

[@cybersystem5137]

@@user-zq4nz6yd2p ахаха, хорошо нонейм с говорящей фамилией. Жду твой величайший вариант. Не предложишь - тот еще чухланцев значит 🤣

[@cybersystem5137]

@@mr.odomnitskiy5654 так, а теперь еще раз внимательно посмотри и покажи мне где это было в УСЛОВИИ? Специально пересмотрел и получилось, что глупый тут точно не я. Условие звучало так: принимает массив и возвращает массив. Это условие. Про Set появилось в середине уже где-то, как дополнение в рамках текущего лайвкодинга. Если это обязательное условие - о нем говорить нужно четко и сразу, а не когда чувак дал решение, а ты ему: о, не, такое нельзя

[@dranzboi]

неграмотный ведущий

[@yablockodimnoe9202]

зато сленг прокачал ебейше