Кто самый слабый JavaScript - разработчик?

Настало время определить самого сильного и слабого JavaScript-программиста. Ни одно интервью не может сравниться по сложностью с этим испытанием!
0:00 Правила игры
00:28 Раунд 1
01:20 Раунд 2
02:47 Раунд 3
03:35 Раунд 4
04:15 Раунд 5
05:35 Раунд 6
06:20 Раунд 7
07:10 Итоги игры
______________________________
Один из моих самых любимых каналов о Фронтенде в telegram:
t.me/frontendnoteschannel
______________________________
Внешние источники:
1) / which-type-of-loop-is-...
2) / 3-javascript-performan...
3) javascript.plainenglish.io/7-...
4) javascript.plainenglish.io/5-...
#javaScript

[@it2138]

Тренажеры HTML Academy (HTML, CSS, JS, React) + Академия + Книга рецептов фронтендера + комьюнити за 99 рублей: boosty.to/how-to-learn-it Какие тренажеры бывают: htmlacademy.ru/courses#fe-start Подписывайтесь: t.me/howToLearnIT ======================= Друзья, хотелось бы акцентировать внимание на то, что мой контент в первую очередь развлекательный, а потом познавательный. Я не претендую на должность эксперта. Поэтому в роликах могут быть неточности и даже косяки. Увы, у меня нет редактора материала. Однако в комменты приходят большое количество опытных ребят и оставляют свои замечания. Я всем настоятельно советую всегда их читать. Найти их просто: они начинаются со слов автор несет херню и у них много лайков! (я тоже стараюсь отмечать их). Касательно этого видео: 1) Я задаю вопрос: что будет если массиву указать длину больше, чем элементов в нем array.length = 100 - Отвечаю, что массив заполнится элементами в значении undefined. ==================== Вообще говоря у элементов действительно будет значение undefined. Но в комментах была замечательная поправка: массив на самом деле заполнится пустыми ячейками, у которых уже будет значение undefined. Это важное отличие, потому что такие ячейки будут пропускаться в циклах map, forEach и т.д. А такой undefined пропущен не будет const array = [1, 2, undefined]; 2) Показываю пример реверсивного цикла for for (let index = array.length; index > 0; index--) { ===================== Этот цикл не совсем корректен. Я стянул его со статьи и не додумался проверить. А все потому что цикл начнется с элемента массива, которого нет array[array.length]. Корректный цикл: for (let index = array.length - 1; index >= 0; index--) { или for (let index = array.length; index--; ) { _____________________________________________________________________ Спасибо всем кто оставляет комментарии! Думаю после каждого выпуска составлять список ценных замечаний. ____________________________ Один из моих самых любимых каналов о Фронтенде в telegram: t.me/frontendnoteschannel ____________________________ Настало время определить самого сильного и слабого JavaScript-программиста. Ни одно интервью не может сравниться по сложностью с этим испытанием! 0:00 Правила игры 00:28 Раунд 1 01:20 Раунд 2 02:47 Раунд 3 03:35 Раунд 4 04:15 Раунд 5 05:35 Раунд 6 06:20 Раунд 7 07:10 Итоги игры ____________________________ Внешние источники: 1) medium.com/@Bigscal-Technologies/which-type-of-loop-is-fastest-in-javascript-55cc1845f5de 2) medium.com/hackernoon/3-javascript-performance-mistakes-you-should-stop-doing-ebf84b9de951 3) javascript.plainenglish.io/7-little-known-techniques-to-improve-your-javascript-20a9e870a5fe 4) javascript.plainenglish.io/5-trickiest-javascript-interview-questions-9629dbee2a2e #javaScript #frontend #dev

[@user-tr8xi3ik3c]

Автор, закрепи комментарий вверху, а то пока доберешься до него... ))

[@theoty-js-react]

Всё равно мы ценим такие викторины, будем сами перепроверять код при сомнении! Благодарю за развлекательные викторины, жду ещё.

[@vladimirukrainian2268]

Это надо говорить голосом в начале видео, я отпишусь щас от всех каналов ваших))

[@chei_eto_ne_l_a_i2635]

После первого вопроса подписался.

[@chei_eto_ne_l_a_i2635]

5:02 а еще Илон спросит почему использовался var

[@props1531]

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

[@kirilldegtyarev6671]

Почему?

[@realmoftheminone]

@@kirilldegtyarev6671 они не нужны

[@grenadier4702]

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

[@volodimiryemshyn715]

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

[@user-sc7wm6nl2i]

Вопросы звучат на собеседовании

[@funnyenglish4330]

Класс, спасибо за новое видео! Каждый раз жду, пересматривая старые видосы😁 5/7, считаю, что это достойный результат)

[@MegaXyita]

3/7 Было интересно! Очень нравится контент на твоём канале :) Даже не думай бросать это дело! Потому что у тебя отлично получается :)

[@VasjaG]

Красота смотреть такие ролики или читать статьи вроде "хитрости такого-то языка" и понимать, что я почти всё это знаю.

[@prog3522]

Тот случай когда автор сам наделал ошибки))): 1:58 «реверсивный цикл» - в предоставленном примере первый проход (index = hugeArray.legth) вернет undefined, такого элемента не существует в массиве (hugeArray[index]). Index > 0 никогда не пройдет нулевой элемент массива; 4:10 ['mango', 'apple', undefined] - если задать length больше длины массива, то массив заполнится пустыми ячейками (empty), а не ячейками со значениями undefined. Это важное отличие, которое проявит себя в .map и подобных методах; 6:53 array.filter(Boolean) «Функция конструктор Boolean» - никак не конструктор (не фабрика), обычная функция которая возвращает не экземпляр объекта, а примитив boolean.

[@amigocom1301]

Кроме момента с epmty все верно. Почему решил, что в массиве нету параметра . length? Прямо вчера проверил трюк с булевом, вполне все работает.

[@prog3522]

@@amigocom1301 где написано что в массиве нет свойства length?

[@amigocom1301]

@@prog3522 ах. Пардон. Неправильно прочитал. :).

[@vladimirukrainian2268]

Из-за таких и страдает программирование в общем и АЙТИ в целом :) (из-за таких как автор)

[@amigocom1301]

@@vladimirukrainian2268 ошибки делает каждый, хоть миллион раз проверь. А в программировании без ошибок... Явно ничего и не писал. :)

[@BOCbMOU]

2:00 Ошибка в "реверсивном" коде. Начальное значение индекса должно быть на 1 меньше длины массива и проверка индекса должна быть на больше ИЛИ равно. В дополнение стоит отметить, что длину массива для прямого прохода можно просто в переменную сохранить. Впрочем, сегодня и это не надо, современные движки прекрасно оптимизируют стандартную запись i < arr.length, поэтому изменение этой записи, потенциально, может наоборот снизить производительность данной части кода.

[@BOCbMOU]

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

[@olezhonnv3215]

​@@BOCbMOU Как замерял?

[@BOCbMOU]

@@olezhonnv3215 что замерял?

[@codingjerk]

@@BOCbMOU Разницу между -- и ++ как вы замеряли, откуда информация про разницу между ними и на какой архитектуре вы предполагаете, что такая разница есть?

[@BOCbMOU]

@@codingjerk я не замерял, я читал. Это было очень давно и поэтому ничего конкретнее я уже не скажу. Впрочем, на что это влияет? В реальном проекте ты эту разницу не заметишь банально потому, что в реальном проекте будут на порядки более медленные операции. Вообще, может сегодня разницы и нет, я не знаю, но как я и сказал, это, по сути, бесполезная информация.)

[@theoty-js-react]

Интересная рубрика, чтобы стать true разработчиком буду смотреть наблюдать за новыми видео на канале 👍..и вникать, хоть и мало правильных ответов зато сколько нюансов и есть что почерпнуть. Автору респект.

[@max_mgtow]

Спасибо, друг 🤝 Всегда жду новый выпуск 👍 До сих пор под впечатлением Принц Персии 🔥👏

[@alexnagorny7692]

аналогично )

[@user-mh2fz7tx3j]

Классный формат, ждем еще)

[@user-ly7zn9fr6i]

Отличный формат обучения ! Класс.

[@JustTrace17]

Спасибо за видео! Не так важно, что были какие-то неточности, как по мне не самые критичные. Хотелось бы больше такого контента, было интересно.

[@user-pu1ro1kw4u]

Классная тема. Автор давай больше подобного контент а!!!

[@user-vu6hn4ul2i]

3:30 вот тут не согласен. Во-первых, давать задачу на внимательность и ограничивать по времени 5 секунд это фу. Ты, как говорится, либо трусы надень, либо крестик сними. Во-вторых, зачем программисту внимательность к опечаткам, если есть линтер, автокомплит и юнит тесты?

[@rodrigorubberduck]

4:11 - новое значение массива будет empty, а не undefined, что в свою очередь может привести к неожиданному поведению при работе с методами массива

[@vadim4283]

А что за тип данных такой, empty? Расскажите, среди восьми имеющихся в js такого не встречал

[@user-ck9ru7oc1h]

@@vadim4283 по моему опыту, методы перебора просто игнорируют такие значения, пропуская их.

[@zoodogood]

Учитывая, что во втором раунде 2 вопроса я бы дал себе 4.5/7) Меня подловили на точке с запятой в цикле, на контексте this, ну и то что slice самый быстрый способ скопировать массив я тоже не знал

[@user-hp2cg6px8c]

Когда слышу "очень большие данные", начинаю тянуть курсор к перелистыванию рекламы про BigData

[@lostincoda2800]

Все правильно кроме реверсивного цикла (хотя про сам цикл for я помню) и точка с запятой... Очень порадовал мой правильный ответ на 6 задачу. Хорошее видео, делай еще

[@jscode6330]

1:20 Самый быстрый способ пройтись по всем элементам массива это cuda array loop если у вас дискретная графика. Данная технология используется при нахождении хеша. Но в данном примере это никак не поможет сократить время выполнения так как основная сложность данного цикла это обновление значения самого итератора.

[@user-ir8nd6mj2b]

И ещё задание на интуицию: var let = "const" - что будет, если выполнить этот код? var const = "let" - а этот?)

[@QwDragon]

Цикл for в обратном направлении уже давно не самый быстрый. А массивы в духе Array(1e6) не имеют ни одного элемента, соответственно forEach на них выполнится мгновенно, т. к. не вызовет ни одну функцию, поэтому вопрос некорректен.

[@a-k-kord]

02:47 Раунд 3 - объяснение неверное. Результат будет undefined не потому что блок кода ничего не знает про переменную number. Эта переменная доступна. Причина лишь в том, что после прохождения цикла index станет равен 4. В массиве нет элемента с таким индексом, поэтому undefined

[@romandeveloper7720]

Да-да! В топы этот ответ. Похоже, автор канала - слабое звено:D Шутка, конечно.

[@user-iu2ci1cv1w]

Подлая точка с запятой в подлом джаваскрипте) Побольше таких роликов про тонкие моменты js !

[@SmirnovVladimir]

2/7 ))) Я заметил точку с запятой перед блоком и запятую в шестом примере. Знаний в общем у меня нет, ну хоть нормально с наблюдательностью. )) Правда у меня только год опыта. Вообще, очень интересный контент! Фильтрация по boolean - супер лайфхак, буду применять!

[@alenache1]

и еще: почему ты используешь vаr в примерах, ее линтеры не пропускают и вообще нах она нужна?

[@artemkhrulkov5498]

4/7. Попался на контексте this, благополучно забыл про slice поставив за место него [...array], и минус за точку с запятой в цикле.

[@vixazomova5899]

Интересно, какая скорость создания копии массива, если его делать через copyArray = JSON.parse(JSON.stringify(array));

[@zahar1979]

почитай про performance.now()

[@vovergg]

Вместо реверсивного массива можно же вот так сделать for (let i = 0, len = hugeArray.length; i < len; i++)

[@RaLLy869]

Памати больше захавает

[@snippetdev8456]

@@RaLLy869 на 1-2 байта больше съест, как страшно

[@RaLLy869]

@@snippetdev8456 ну если нестрашно, используй обычный фор

[@vovergg]

@@RaLLy869 А почему памяти больше захавает? В этом же варианте длинна массива тоже лишь один раз вычисляется и заносится в переменную len. Далее цикл делает сравнение уже со статичным значением в переменной len, как и в случае с реверсивным циклом.

[@RaLLy869]

@@vovergg выделение памяти на переменную len

[@user-tr8xi3ik3c]

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

[@MrCortc]

1:46 forEach тут вообще не будет работать и не сделает ни одного прохода.

[@advhunter2]

Обожаю!

[@dhotovskyi]

Ответил правильно на почти все пункты, кроме отдого. Немного сбил столку пример с object.method - так что тут у меня фейл. Ну и по поводу реверсивнго цикла, как уже написали ниже, сейчас JS хорошо оптимизирован, так что скорости будут равны. Ну и просто привычка, перед вызовом цикла, длину записываем в переменную. Есть еще один пример, пройтись по циклу, не прибегая к доп переменной. С одним условием, что массив не содержит null,boolean,undefined т/е такой подход хорошо подходит для прохождения по массиву объектов, к примеру получили данные из API. Пример ниже for (let i = 0; response[i]; i++ { console.log(response[i]); }

[@aktotuttttt]

Очень понравилось, спасибо, ответил на 4

[@ReAgent003]

Взял 3 из 7. 2:39 а какое время у .concat() ?

[@user-tr8xi3ik3c]

Реверсивный цикл for был быстрее в старых браузерах, а сей час классический значительно быстрее. Информация устарела. Узнал это из просмотра Yandex конференции по оптимизации. Да и никто не мешает закешировать длину массива.

[@altynbekusenbekov]

Раунд 3: index => 4, numbers[4] => undefined так как numbers.length => 4

[@chirkov]

Вопрос с контекстом просто жеесть

[@Tunec_s_hlebom]

Насчёт первой задачи - я знал что так можно записывать числа и не мог найти подвоха😅Насчёт четвёртой задачи - она реально не простая. Я находил её в списке вопросов по собеседованию на фронт разраба в TopTal на зп 20К$

[@CJIu3eHb]

"Ты втираешь мне какую-то дичь..."

[@user-li7sm7ux2q]

Прикола с arguments и this не знал. Все таки как хорошо что есть TS и все варианты безумного автопреобразования типов не нужно знать

[@kai3341]

1:50 А как же for ... of? Чем хорош for ... of: 1) Адекватный синтаксис, не усложняет код 2) Итерирование любых последовательностей (Set, Iterator) 3) Уже проверили: работает сильно быстрее forEach

[@yourbadapple]

Форич и фороф используются в разных ситуациях

[@sergeykhairulin]

number is undefined было легко, очень сильно бросается в глаза var index, а потом замечаешь точку с запятой

[@antoniobendera]

Вроде сейчас уже foreach будет быстрее? Map точно быстрее чем аналог

[@a-f-kay]

6/7. Со скобками не знала а так ну слишком просто :))

[@user-dy9in2sz7x]

Жестко)

[@xqz666]

3)) , я не разработчик, я самоучка. Сегодня смотрел вакансии в екб на хх, откликнулось 500 человек на вакансию, у меня руки опустились. Хотел реакт разработчиком пойти

[@beastovsk]

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

[@yundon8182]

@@beastovsk хорошая аналогия )

[@xqz666]

@@beastovsk ну ты и душнила)

[@beastovsk]

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

[@xqz666]

@@beastovsk как стать хорошим специалистом? Рецепта ведь нет!

[@narutominer]

Небольшое уточнение. for быстрее forEach только если происходит компиляция в es5 синтаксис, потому что тогда не было forEach. Но если компиляция не происходит, и выполняется код именно в es6 синтаксисе, forEach будет на много быстрее.

[@Boortwint]

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

[@narutominer]

@@dhotovskyi Я проводил тесты, не знаю удалит ли ютуб ссылку, скину сдедующим сообщением

[@narutominer]

@UCXJEmN0eVofZ97hL3A5Jw6A for 50К операций в секунду, forEach 2 миллиона 600К Разница настолько колосальна что аж не верится

[@dhotovskyi]

@@narutominer походу мой коммент был удален. Возможно из-за кода для тестов, который я привел. Еще раз напишу, что for быстрее forEach. Что бы это проверить, создайте массив на миллион строк и заполните его любой простой строкой. Потом пройдитесь по массиву, замерив время.

[@dhotovskyi]

@@narutominer так и есть :)

[@sergeyfilatov3027]

Видео конечно скорее развлекательное, чем проверяющее твои знания. Вопросы из разряда как если бы проводника спрашивали, что будет если в поезде кинуть лом в унитаз. (Я не спорю, что лучше больше знать чем меньше, но что то мне ни разу за всю мою практику не надо было проходить на клиенте массив в 1 000 000)

[@clown2195]

Мало ли такие вопросы будут на собеседование

[@user-rz7xz4wf8p]

@@clown2195 ну и пошли они на йух с такими вопросами

[@user-pi8qz6ni4q]

Ответил на все вопросы (ни на один)

[@devllart]

3:14 такое себе, не могу представить чтобы программист мог так написать... В любом случае, по поводу не внимательности: уже давно есть lsp-сервера. UPD: Ещё не понял момент с реверсией цикла по массиву. Зачем? Зачем жертвовать читабельностью, если можно просто длину массива вынести в переменную и проходится обычным циклом? UPD: 4:15 А вот это действительно интересно.

[@aleksandrmayboroda85]

Появление Укупника в 6м раунде все поясняет 😁

[@olezhonnv3215]

А еще есть цикл while)

[@theenderofficial]

3/7 1. Я видел в питоне 4. Видел лайфхак как сократить массив 7. Лайфхак

[@vnature2vagona]

Илон маск так и не перезвонил...

[@blackmetalterr88r94]

5!! Учу js 4 месяца по 5 часов в день по learnJS, месяц назад начал реакт!

[@JavaScriptcher]

😎

[@user-wq9gc4rj3w]

А сегодня поговорим о том что вы никогда не будете применять.

[@AlexViennaDJ]

На 3:43 автор ролика использует определение константы (const), а в ответе тот же код но уже используется let для присвоения. Так что надо проверить правильность ответа.

[@BOCbMOU]

Достаточно почитать как хранятся объекты в переменных в js и тогда не надо будет проверять на работоспособность.

[@dmitriynevolnichenko6372]

5/7. Мама, я звезда !!!!

[@follower90]

А раунд 5 весьма хорош

[@bogdan5238]

Автора на собесах такими вопросами замучали он видимо мстит теперь в этом ролике)))

[@user-wo6gn1ic4i]

undefined / 7

[@johnbrown3914]

В первом вопросе проще записать с мантиссой 1000000=1е6

[@mastnova2676]

нет не проще, нолики считать проще и что ты будешь делать когда надо будет на единциу увеличить это число

[@RaLLy869]

@@mastnova2676 +1 😂

[@GsMn-ji1mo]

Благодаря этому ролику узнал, что "for of" и "for in" лучше не использовать, а вместо них обычный "for" или "forEach"

[@volodimiryemshyn715]

кто-то давно на собесах не был?) Легчайшая разминка) с for феил :( после начал внимательной смотреть.

[@alenache1]

в 6-ом раунде ты чет запутался. Сначала выполнится 5-1, потом (1,4) вернет 4, а не 5.

[@SergeyMargelov]

3/7 (1,4 и 7 ответил верно)

[@ltlaitoff]

4/7, пойдёт)

[@max_mgtow]

Аналогично)

[@lokilifetc]

3/8 вопросов (не раундов, в втором раунде 2 вопроса).

[@lostsouls3151]

1/7 есть куда расти)

[@vargvarg7922]

4/7, по первым вопросам думал что будет 0

[@SergeiZahharenko]

Классная тема :) 3 из 7 я заработал, слишком много js магии… все кто пишут что у них 5/7 или задроты или как девочки у которых ты всегда второй :)

[@vvg1077]

5 лет опыта - задрот. Понимаю.

[@vnature2vagona]

Если серьёзно, то это, конечно, интересно, только играет минимальную роль при написании реальных приложений, а не приложений с "идеальным" исходным кодом.

[@Krasnoe1]

4/7, проблема в том, что каждый день работаешь с Vue, смотришь видосы по нему, мануалы всякие, а JS забывается, и нужно периодически повторять его

[@user-yw9wx4lv2w]

@@user-ip5vz5uz6w а реакт тут причем?

[@user-yw9wx4lv2w]

с одним отличием. когда пишешь на react ты ВСЕГДА пишешь на js. Кол-во синтаксического сахара там так минимально что можно и забить

[@ktklife8803]

Эм, я 0×10-¹⁰ но на рандоме ответил верно на 6 вопросов, походу у менч в предках ванга с настрадамумом затесались....

[@luckyman5983]

Да, проходить циклом массивы длиной в 1 лям это так по-фронтендерски!) А еще неплохо на каждом элементе проходить еще другой массив циклом, и вот ты уже самый настоящий Малевич.

[@serhiiklymenko2668]

Лет 5 назад когда работал в аутсорс конторе начальник попросил составить таблицу подобных вопросов, на вопрос зачем, он сказал, унизить кандидатов и занизить ожидания по ЗП) так что не стоит отчаиваться, маловероятно что подобный код кто-то увидит на реальном проекте

[@user-vp1ws2gf7t]

3 правильно, дальше понял что js не мое=) хотя любил его...

[@dumitruspilevoi1268]

ответил на все вопросы [ object Object ]

[@user-zg1fh9pg9h]

Посыпался на первом вопросе.

[@yakut54]

2/7 ухожу обратно на стройку. 😔

[@Sl1de13]

В итоге со всем этим (кроме 1го и 7го) вы столкнетесь только на собесах :)

[@my_life_astana]

5 из 7)

[@FailValiev]

Больше подлых вопросов

[@lazyNavel]

Я не волшебник я только учусь и 0 это вкусная плюшка))

[@bassboosted1184]

Всем тем кто говорит что js это классный язык - я буду показывать это видео

[@mediontamginskii5889]

Епрст все настроение испортил))) а я даже подписан(((

[@TheKzfor]

3/7, бэкэндер-джавист

[@clumsy_weirdo]

10 из 7

[@raptorthefirst]

Та ну нафиг)

[@awenn2015]

1:00 а чего тут собственно удивительного ? Строк нет а значит и конкатенации никакой не будет, логично же,

[@user-vg2fp8oi6x]

5/7

[@garvae]

Прости, Илон… p.s. Ненавижу циклы for. Выглядят, Лада Веста, только в жабаскрипте

[@skyshellproduction8860]

4/7 получилось

[@ruslanpostoiuk4963]

2 правильных 🤧

[@KyJluHaP]

3

[@user-xd8sn4wh6r]

ухожу из проффесии))

[@osmon1933]

количество правильных ответов = 0

[@a4y_m5r]

6/7, и то из-за невнимательности

[@raptorthefirst]

3:20 ты правда хочешь, чтоб я ушел ?? Блогеры итак дампят рынок своими рекламами курсов и т.д., а тут ещё такое.... Зачем я учил Ангуляр, лучше б поехал на дачу в Польше собирать клубнику