Пишем полифилы на JavaScript (map, reduce, flat) | Уроки JS

Разберём теорию наследования в JS, поймём, что такое полифил и напишем примеры полифилов для методов массива: map, reduce, flat. Протестируем на mocha & chai.
🍀 Поддержать канал: www.donationalerts.com/r/webe...
☕️ Купить кофе: buy.stripe.com/5kA7sL9574SG7x...
🎨 Купить набор кистей Procreate: webelart.com/illustration.
✍️ Мой telegram channel: t.me/webelart
🏰 Английский KZbin: @webelart_en
💁🏼‍♀️ Инстаграм: / webelart
🦄 LinkedIn: / webelart
❤️ Поддержать развитие канала: / webelart
🌱Старт урока: github.com/liveldi/myPolyfills
Рекомендуемые видео в уроке:
⭐️ 20 методов массивов в JavaScript: • 20 методов массивов в ...
⭐️ Рекурсия и стек в JavaScript: • Рекурсия и стек в Java...
⭐️ Учимся использовать стек и очередь в JavaScript: • Учимся использовать ст...
00:00 Введение.
01:06 Примитивы и объекты в JavaScript
08:34 Что такое полифил?
11:58 Скачиваем и устанавливаем проект с тестами.
17:25 Пишем полифил метода .map
35:11 Пишем полифил метода .reduce
46:23 Пишем полифил метода .flat
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[@mvlad27]

Если я первый раз зашёл на этот канал, посмотрев немного ролик и сразу подписался, значит оно того стоит, спасибо! 👍

[@bsisow]

Елена, отличный материал и подача! Лайкосик однозначно!

[@bogdanmyagkov2601]

Я в восторге, спасибо Вам!

[@eugeneweber4282]

Уникальнейший контент, браво! Подписался.

[@amsterdenko9854]

Спасибо большое. Масса новой информации.

[@kuzinpeter3365]

Спасибо за хороший урок. 👍

[@SnegurkaBu]

Спасибо за очень интересный контент.

[@user-oy5hd9mv5s]

Вас приятно слушать!!!!!Большое спасибо!!!!!

[@egoist2956]

Мегаполезно! Ты, как всегда, большая молодец..)

[@webelart]

Спасибо! 😘❤️

[@gagogoga794]

Было интересно посмотреть, спасибо! Вы молодец 👍🏻

[@webelart]

Спасибо! 🤗

[@DmitryIlyasov]

Отличное объяснение, спасибо.

[@elizavetakonstantinova8661]

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

[@webelart]

Спасибо за тёплые слова, очень приятно! Рада, что контент нравится! ❤️

[@user-up6xd8cv4x]

прекрасное объяснение, подписался на вас после курса по typescript

[@danildemchenko6004]

Елена, спасибо большое за такой крутой и полезный контент! Как всегда очень интересно Вас смотреть:)

[@webelart]

❤️🌺

[@snowiedigga]

Благодарность автору за прекрасный материал!

[@webelart]

❤️

[@Grigoren_com]

ооочень круто! спасибо)

[@user-rk1lb6zc3z]

Прекрасное объяснение, которое я больше нигде не смог найти❤Огромное спасибо!

[@webelart]

❤

[@alenache1]

привет, классно рассказываешь, удачи в развитии канала)

[@user-qu5ff6dw8h]

Огромное спасибо за видео, очень помогло!!!

[@webelart]

Пожалуйста!!!!😘

[@AndreyKudinov]

Лайк не глядя!) Но позже обязательно посмотрю)

[@catsapp]

+1

[@pitbrest]

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

[@Gerlinda137]

rs school?)

[@rodioni661]

вот это канал, только сейчас ютьюб показал его мне, подписка

[@theoty-js-react]

Елена, Вы настолько интересно преподносите материал, что у меня просыпается желание учиться а не прокрастинировать. Огромная благодарность за качественный контент! Всем рекомендую, кто уже знаком с объектами, понимает как копировать объект, занет про методы у объекта, ну и хоть немного имеет представление о js)

[@catsapp]

Да, посмотрел только начало. Подача хорошая.

[@divansimdrive]

Все понятно, спасибо.

[@webelart]

😘❤️

[@alexup7437]

Хороший контент, приятный голос. Удачи!

[@webelart]

Спасибо! 😘

[@orcsamuro9687]

Топ контект. Лайк, подписка

[@dimualdos]

Класс!

[@AntonioModer]

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

[@igorafonkin2648]

Для меня JS - побочка от от основной работы. Занимаюсь разработкой устройств на МК и периодически к ним надо веб-морды писать. Материал очень интересный, может быть даже получится применить в своих проектах. Спасибо!

[@Arkadz.]

Безумная барышня! Годно!

[@saxa2956]

Сегодня в первые тебя нашел, крутой контент. Лайк, подписка, режим ждуна :D

[@TheKwadriga]

С детства болею такой болезнью: прежде чем прочитаю мануал, сначала изобрету свой велосипед. Уверен, если бы мне где-нибудь понадобилось рекурсивная развёртка массива, я бы просто сел и написал рекурсивную развёртку - это не очень сложно, а рекурсии это всегда приятно, как немножко пивка выпить после того, как выпил водки. А оказывается, рекурсивная развёртка массива уже есть и называется "flat". Спасибо, вот правда - сам бы никогда не додумался загуглить. То же самое с reduce. :)

[@user-dq5yx3cq3f]

Подписался. Спасибо

[@dvdrelin]

Знание в массы! лайк однозначно только нюанс. принято сокращать вложенность (так легче читать), да и к тому же логика правильная проговаривается на 17:53, что 'если существует, то ничего не делаем', то самым логичным способом проверить будет конструкция вида if(Array.prototype.myMap) return; и далее уже, реализация полифила...

[@webelart]

Спасибо! Про сокращение, да так обычно лучше выглядит. Но в текущем случае после пойдут на одной вложенности полифилы для reduce и flat поэтому return не получится.

[@Evgeniy19856]

Молодец!

[@vovakolesnikov4114]

Спасибо за ролик, познавательно! Получилось немного переделать myReduce. Цикл может всегда начинаться с нулевого элемента, для которого initialValue по умолчанию будет равно 0. Еще условие для проверки является ли callback функцией, кажется, можно убрать, потому что в случае, если callback не будет функцией, то его вызов и без доп. условий закончится ошибкой TypeError. if(!Array.prototype.myReduce) { Array.prototype.myReduce = function(callback, initialValue) { if(!(this instanceof Array || this instanceof String)) { throw new TypeError(`Array.prototype.myReduce was called with wrong type ${this}.`); } // Параметры по умолчанию не работают в IE, поэтому: let accumulator = (initialValue) ? initialValue : 0; for(let i = 0; i < this.length; i += 1) { accumulator = callback(accumulator, this[i], i, this); } return accumulator; } } Кстати, в тесте Array.prototype.myReduce.call('test', (acc, value) => { acc[value] = value + 1; return acc; }, {}) Результатом будет объект {t: 't1', e: 'e1', s: 's1'}, потому что первый ключ с буквой "t" перезапишется последней "t".

[@rodioni661]

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

[@webelart]

Ого!! 😍 Да, тоже из Твери, 2/3 жизни по факту там прожила.)) Рада видеть на своём канале земляков! Успехов Вам, всё получится! Тверь - отличный город и очень скучаю, это навсегда часть сердечка и моя родина. В общем крепко обнимаю!! 🤗

[@rodioni661]

@@webelart спасибо! Всегда взаимно! ПРочитал ещё как штудировали грамматику через Галицинскую... у меня тоже лежит книга, когда-то также открыл, увидел кучу упражнений на артикли, и закрыл :D. Но ваши посты как-то приободрили, да и последние события заставляют серьёзнее отнестись к выбору жизни. Иногда просто хорошо, что существуют те или иные люди, и большая удача найти их. Впереди весна и лето, отличное время, чтобы снять мишуру депрессии и активнее заняться изменением жизни. В бой, вперёд и с песней... потом и с пенсией :) Have a nice day! или как там у вас говорят...) Будем на связи.

[@webelart]

@@rodioni661 Thank you! Have a nice day too! ❤️

[@enslit]

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

[@webelart]

Спасибо! Надо посмотреть ❤️

[@primuspares4462]

Че проверяем то?) доступно, спасибо.

[@tony-p864]

Спасибо за материал!) Очень рекомендую поставить Quokka и Wallaby, жизнь проще будет в разы :)

[@webelart]

Рада, что контент понравился. По возможности посмотрю что это за инструменты такие❤️

[@user-zs8gf4zj7i]

Вы просто богиня, ваше объяснение лучшее, что я смог найти. Нашел вас совсем недавно, когда искал для себя информации по теме рекурсии и именно вы помогли мне ее понять🥰. Но хотел бы задать маленький вопрос, какая разница между console.log и console.dir?

[@webelart]

Спасибо! :) console.dir более подробный вывод даёт. Я обычно его использую, когда нужно посмотреть методы функции, например. console.log распечатает просто функцию, а .dir покажет что внутри.

[@mikhailprigorodov3272]

Молодец, успехов! П. С. Если бы я так писал, то не написал бы и 10% всего кода.

[@u-kob]

Здравствуйте. Может где-то этот вопрос уже звучал, и я не увидел, так что спрошу: в связи с ожидаемой блокировкой Ютуба в России, Вы не планируете создать канал на Рутубе?

[@webelart]

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

[@dimashforseagull2925]

ого ничего себе канал вырос

[@andreyevanton]

здравствуйте! это тут делают вепрь-разработчиков?

[@veresivan]

Голос приятный) видосик залипательный. Много воды, не хватает чётких определений краткости изложения.

[@JavaScriptcher]

Могу сказать, что на собесах частенько любят поспрашивать написать полифил цикла forEach или reduce

[@user-tx5sr2lt6z]

forEach?

[@user-tx5sr2lt6z]

И там метод, а не цикл

[@Sjarguk]

Вельмі дапамагло мне гэта відэа, спадзяюся і яшчэ дапаможа. Стаўлю палец і падпісваюся на аўтара, а яшчэ дзялюся спасылкай!

[@aid4982]

А в console.dir видно полифилы после глобального объявления?

[@anaduhovny3421]

Hi, Why call method needed for reduce and not needed for map?

[@gardenliken]

Ура, что-то свежее, а не 2х летней давности

[@zodchiygigas6098]

Не сущности, типы. Типы!

[@user-qu5xj4no5q]

method - метход? это что-то новенькое =)

[@fedoresko]

Спасибо, господу, что дал нам ES6, который уже похож на нормальный язык программирования. А "полифилы" и прочая стремная фронтендерская дрянь, костыли и хаки - гори в аду. )

[@everemchuk]

Так только после того как напишешь хоть один свой полифил поймешь как JS работает под капотом.

[@CELTRIX88]

Привет. Не понял как прошел тест на строчку. у меня 'test' instanceof String -> false

[@webelart]

Крутое замечание. Я не обратила на эту вещь внимание. instanceof работает c инстансами классов.т.е. будет работать если строку объявить как new String('asdfsdf'), так это будет instanceof String. Причём typeof на этой строке будет object. Если вызвать typeof 'literal string' === 'string', то мы получим string. Но есть прикольная тема, в тестах я вызываю строку через метод call. Array.prototype.myMap.call('asdfasd', ...) и в качестве this передаю простую строку, но внутри функции этот this уже становится строкой-объектом, как будто строка была передана таким образом new String('asdfsd') и собственно всё отрабатывает верно. Теорию по этой теме не смогла найти, почему так. Возможно это относится к теме, когда мы начинаем работать с примитивными типами, например вызывать методы первоначально создается обертка new String, после уже достается метод и после расчеты и возврат нового значения. Возможно здесь также если примитив передаётся через this, то this всегда должен быть объектом и поэтому создаётся обертка. Кстати проверила также вызов функции через call со строкой, числом и булевым значением function f() {console.log(typeof this, this)} f.call('12312') f.call(1231) f.call(true) Заметьте что печатается класс String, Number, Boolean Если вызвать с null и undefined то мы получаем объект window в качестве this.

[@dim_zp6470]

Елена, скажите какого уровня программист должен уметь это делать?

[@shnextv1217]

жабаскриптер уровня любителя

[@user-is3yh5ik6t]

А для чего делать type guard для проверки, что полифил вызывается на массиве, если он записывается прямо в прототипы массива? Как может произойти вызов не на массиве?

[@enslit]

В js возможно все

[@user-is3yh5ik6t]

@@enslit тогда нужно ещё добавить проверку, что этот код запускается как js код 🙂

[@FrameMuse]

Всё верно, это не возможно и автор видео не объясняет почему это не так, просто говорится что ВОЗМОЖНО - поэтому сделаем проверку. Хотя по факту это нигде кроме массива вызвать нельзя, даже если операться на информацию из начала видео.

[@webelart]

Я же привожу в видео пример как это можно сделать, через методы функции call, apply и bind. Например, Array.prototype.map.call('12312', (value) => {....}) Даже в тестах примеры с call прописаны, смотрите внимательно. ;) Раньше такие вещи пользовались популярностью. Особенно, когда берёшь список node из html, это не настоящий массив по факту, у него нет всех методов массива и можно было вызывать методы через такие хаки. Сейчас для списка нод мне больше нравится Array.from(nodeList).

[@user-is3yh5ik6t]

@@webelart Тогда сор, не заметил.

[@mody-pq8kd]

Сейчас бы полифилы писать с использованием const, let и spread syntax😄

[@webelart]

Полифилы на то и полифилы, они должны работать в старых браузерах.

[@user-ij8sn3sr6z]

а куда делся ваш сайт?

[@webelart]

Вроде всё на месте webelart.com/. Но я его не всегда в описание добавляю и последнее время не так часто выкладываю туда новую информацию. В шапке канала, если что всегда доступен :)

[@igorl5133]

Пример как написать flatten=> const flatten=(arr,depth)=>arr.reduce((sum,el)=>Array.isArray(el)&&depth>0?[...sum, ...flatten(el,depth-1)]:[...sum, el],[])

[@webelart]

Огнище!! В одну строчку! 👍🏻

[@AEF23C20]

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

[@webelart]

​@@AEF23C20 Здесь же есть некоторая тема. В целом тут можно похоливарить :)) Разница есть, ведь мы же стремимся вырасти классными программистами, технологии сейчас усложняются, чтобы это всё понять, нужно понимать разные конструкции и разбираться. Можно привести аналогию с английским языком. В целом допустим вы дошли до уровня intermediate, вы можете говорить, понимать, работать, зарабатывать и выполнять свои задачи. Но если при этом вам будет не доступна богатость языка, мы же любим восхищаться людьми которые круто презентуют себя, какие-то продукты, могут поддержать любую беседу, эрудированные. Ещё говорят, когда человек начитанный. Согласитесь это же круто? Особенно это также круто может помочь в продаже и заработке денег, если мы деньги воспринимаем как общую ценность. Так и тут в нашей профессии программиста, мы изучаем алгоритмы, особенности языка, в том числе и тонкие особенности, чтобы иметь богатый словарь выражения и написания программ. Плюс здесь ещё есть всякие балансы между кодом и пользователем. Если совсем забивать на код, архитектуру, то в какой-то момент его расширять станет слишком сложно, будет тратиться много времени. Также и в код не стоит совсем уходить, иначе будет наделал, всё предусмотрел, а кому это нужно... не понятно :) И про парсинг, то что написали, здесь тоже есть балансы. Нужно считать время и приводить цифры. Я пока на практике не замечала, чтобы reduce прямо тормозил. Но опять же зависит для какого устройства пишите и абсолютно возможно, что для каких-то приложений даже такие оптимизации будут крайне важны. Со своего опыта (работа в Яндексе с высокой нагрузкой, в Loveholidays, тоже довольно высокая нагрузка), могу лишь сказать, что такие конструкции языка это микро заморочки и не оказывают никакого влияния на статистику, однако кеширование при запросах вот это да, в том числе и страниц и частей кода. Поэтому от задачи лучше исходить и применять соотвествующие подходы. ❤️

[@AEF23C20]

​@@webelart "В целом тут можно похоливарить :)) Разница есть, ведь мы же стремимся вырасти классными программистами, технологии сейчас усложняются, чтобы это всё понять, нужно понимать разные конструкции и разбираться." а давайте) разница есть только для юзера, потому что это всё делается только для юзера, а вовсе не для меня и не для вас классный программист определяется только одним - сколько процессорных тактов сожрёт его программа, и сколько эта же программа загадит винт - а более программист вообще ничем не определяется, это при прочих равных конечно же вы напишете одну программу, она сожрёт условные 2м тактов и 200кеша, я напишу программу она сожрёт 1м тактов и 50 кеша всё) на этом все попугаи и заканчиваются, потому что всё иное - палнейшая ничего не значащая ерунда "Но если при этом вам будет не доступна богатость языка, мы же любим восхищаться людьми которые круто презентуют себя" вы не путайте) хороший программистский язык определяется с точностью данаабарот - минимальным кол-вом "слов" вообще то, а богатость достигается стандартными библиотеками и прочими фреймворками и даже пусть синтаксическим сахарком, только это всё языка не касается вовсе "И про парсинг, то что написали, здесь тоже есть балансы. Нужно считать время и приводить цифры. Я пока на практике не замечала, чтобы reduce прямо тормозил." так а дело не только в тормозах, потому что батарейка если я юзаю старый двигун он точно однопоточный и это хорошо, а вот нынешние двигуны многопоточные и это плохо, и если вы запускаете манструозные нынешние вундервафли, то они парсятся/транслируются/компилируются сразу в несколько потоков, а это неизбежно приводит к значительному оверхеду и да - оно работает быстрее, так оно и жрёт как не в себя зачем мне грузить манструозную библиотеку на мегабайт каторая разбежится на 3 потока выжрет всё до чего дотянется, закешируется мегабайтом на винт [это тоже трата энергии], если проще всё абсолютно то же самое по старинке написать в 50 строчек абсолютно примитивного скрипта, не париться и не парить юзерские железяки? "могу лишь сказать, что такие конструкции языка это микро заморочки и не оказывают никакого влияния на статистику, однако кеширование при запросах вот это да, в том числе и страниц и частей кода." у меня когда то был интернет мегабитный и страницы загружались влёт, а щас оптика и они тормозят притом что комп ессно более менее на кор5 10400 и это не помогает конечно же послушайте, когда то были темплейты, если вы помните хотя вряд ли, те самые xml/xslt-темплейты, так вот мир пошёл не туда, когда от них отказался и да, мир отказался от того что бы xml-ки с трансформациями передавать юзеру напрямую, а вместо этого всё это отдали на откуп скриптовым программистам, что и привело к ужасу и кошмару браузер должен следить сам за кешами, никак не программист - это же путь вникуда чёрт побери, и предельно простое кеширование кода было и оно было прекрасно потому что ничего не ело и быстро работало кешировать же можно xml-ки с трансформациями прям у юзера, и поверх этого кешировать макеты страничек а оно так и было абсолютно без применения скриптов вообще, и всё это делалось браузером само и где это всё? а скрипты в данном случае вообще зачем?? ужас... ужас...

[@webelart]

@@AEF23C20 Ооо! Вот это вы тут написали! Надо ещё переварить, попозже перечитаю, возможно с чем-то поспорю. Но, мне нравятся ваши мысли. Снимайте тоже видосики, рассказывайте! Я с удовольствием посмотрю! 🔥

[@catsapp]

А можно написать полифил для boolean чтобы заменить его на logic? Потому что булеан в честь английского математика Буля, но это не имеет отношение к логике

[@user-tx5sr2lt6z]

Нельзя. Если хочешь чисто для себя - добавь через global.Logic = Boolean. В проектах так не делай

[@catsapp]

@@user-tx5sr2lt6z Да я набросил

[@FrameMuse]

boolean - это тип, а Boolean это конструктор, ты можешь что угодно сделать с Boolean (даже удалить), а вот с типом ничего сделать нельзя.

[@catsapp]

@@FrameMuse If( type === "logic") { type = 'boolean'}

[@grind-t]

Никогда не думал, что полифилы нужно учиться писать. При этом ЧАС. Откройте гугл, наберите запрос и получите ответ за пару минут.

[@webelart]

В видео разбираются примитивы и объекты, что такое полифил, почему не стоит расширять любыми методами массив, и также в ручную создаём три полифила. Это требует времени. Для создания видео, я использовала как теоретические знания, так и свой опыт. И Обучение любого человека также происходит по разному. Найти материал, который усвоится тоже задача. Особенно если тема новая, не знакомая и есть проблемы с пониманием синтаксиса. Взять документации, да хоть примеры полифилов, то понять их довольно не просто, особенно с бинарными сдвигами есть примеры. Я старалась изложить информацию подробно приводя различные примеры, покрывая где-то синтаксис JavaScript, поясняя, при это не усложняя само решение, также ещё в видео показала примеры тестов на chai и mocha и тоже про них немного рассказала. Посмотрите видео, возможно для себя тоже что-то новое и интересное узнаете. ❤️

[@user-rh8jg2fb5t]

А шо за нодА? И ещё орнул ножек модуль

[@meskirian]

'code .' в консоли откроет vscode в текущей директории

[@nepridumal5307]

Почему очень многие веб-программисты пользуются макОС. Есть ли какое-то преимущество или только субъективные: дизайн и бренд ?

[@webelart]

Конечно есть :) Вообще на мак я давно перешла потому что виндовс не была нормально приспособлена для разработке. А именно не было нормальной консоли. И помимо этого возникало кучу багов при установке различных библиотек, языков. Переход у меня случился в 2012 году, я тогда была новичком и начала погружаться в Бэкенд на Ruby on rails. И при его установке вылетало просто куча ошибок, это можно было пофиксить, но уходило кучу времени реально. Я тогда перешла linux, т.е. многие программисты переходят если не на мак, то на linux. На Ubuntu и там установка этого же Ruby on rails занимала буквально пару минут, т.е. представляете вообще без ошибок всё гладко. Почему ушла с linux, потому что он эстетические мне не очень нравился, но система хорошая. А мак ос красивая визуально была :) Плюс на винде меня бесили постоянные обновления о которых тебя вообще не спрашивают, ты буквально выключаешь ноут и всё, следующее включение может быть минут 40 из-за обновления. И какие-то проги открывались довольно долго, например фотошоп тогда. Но я понимаю здесь вероятно мощностей не хватало. В общем на маке в 2012 году фотошоп отрывался очень быстро :))) Ну а с тех пор так как-то и осталась на Mac os и в компаниях часто предлагают Mac os либо linux.

[@nepridumal5307]

@@webelart Спасибо за подробный ответ.

[@ThisIsFray1]

зачем в консоли браузера? попробуй Run js

[@musicjob3928]

Вы похожи на Эмили Блант.

[@user-rh8jg2fb5t]

С реторна тоже ржал

[@catsapp]

Никогда не любил полифилы, но придется

[@user-sp1vi7fg2u]

Войтивайти ?

[@catsapp]

Вайнот вайнот?

[@user-sp1vi7fg2u]

@@catsapp Та я шучу ) Сам занимаюсь этим года 3 где-то

[@catsapp]

@@user-sp1vi7fg2u ми ту

[@JavaScriptcher]

#1

[@AlexGabber]

а бабель на что?

[@webelart]

В уроке-то фишка не в том, чтобы библиотеку использовать, а в том чтобы посмотреть как это можно сделать самому. Согласна, что в основном сейчас редко сам пишешь полифилы в реальном коде. Но тема во-первых может пригодиться на собеседованиях, а во-вторых улучшить понимание основ JavaScript. ❤️

[@theoty-js-react]

@@webelart

[@cradleofkaschenko2057]

А разве полифилия не является уголовно наказуемой?

[@webelart]

😂😂😂 Что? Где? Когда был принят закон?

[@gulind]

все хорошо, но полифиллы не написаны )) просто функции, которые расширяют прототип массива (а у map отсутствует второй параметр)) ps. как правило внутри полифилла не идет проверка на тип, только на необходимые параметры ( .length + .hasOwnProperty для каждого элемента, чтобы было понятно, что он определен у конкретного объекта, а не унаследован) вам на подумать: Array.prototype.map.call({length: 2, 0: 1}, console.log)

[@webelart]

Спасибо за комментарий. Кстати да, я не проверила на массивы подобные объектам, хорошее замечание. Про то, что не идёт проверка на тип, проверила ещё с boolean значением, в реальности возвращает массив. Т.е. скорее всего действительно проверку на типы нужно опустить. Получились больше такие железные методы. :) Справедливости ради, не пробовала на map и reduce все протестировать и изначально сделала допущение, что можно только строки и массивы. И если писать полифил целиком и полностью, то нужно всё предусмотреть.

[@gulind]

@@webelart забыл попросить ) - пожалуйста, получайте значение length до начала итерации, потому как если во время выполнения кода length будет меняться - ваш цикл никогда не закончится. Array.prototype.map = function(callback, thisArg = undefined) { const { toString, hasOwnProperty } = Object.prototype; if (toString.call(callback) !== '[object Function]') throw new TypeError(`${callback} is not a function.`); if (this === globalThis) throw new TypeError(`.map() called on null or undefined.`); if (thisArg !== undefined) callback = callback.bind(thisArg) const { length: n = 0 } = this; const result = new Array(n); for (let i = 0; i < n; i++) { if (hasOwnProperty.call(this, i)) { result[i] = callback(this[i], i, this); } } return result; }

[@webelart]

@@gulind Смотрите как я вас промотивировала написать полифил! Огнище! 😍 И спасибо, что тоже шарите знания! ❤️

[@webelart]

​@@gulind Также пофиксила немного ваш код, чтобы не псевдо, а запускаемый: Array.prototype.map = function (callback) { if (this.toString.call(callback) !== '[object Function]') { throw new TypeError(`${callback} is not a function.`); } if (this === undefined || this === null) { throw new TypeError(`.map() called on null or undefined.`); } const len = this.length; const result = new Array(len); for (let i = 0; i < len; i++) { if (Object.prototype.hasOwnProperty.call(this, i)) { result[i] = callback(this[i], i, this); } } return result; }

[@webelart]

Мне понравилось, что вы null и undefined уточнили, правда это скорее проверка не с globalThis (я так поняла это вы имели ввиду window, или в ноде global) а с null и undefined. Еще то, что массив результата сразу с длинной объявили, что будет являться также оптимизаций: мы сразу занимаем нужное нам место.

[@niknuklas]

Привет я люблю js кстате у меня 7500 подписчиков, мы с вами каналы -близнецы хех

[@biLLie_wiLLie]

установи quokka и tabnine - хватит мучаться

[@Deletedeletedelete]

Удалил табнайн из-за подвисания vscode при работе с крупным проектом

[@AEF23C20]

всегда и как обычно, один вопрос - ЗАЧЕМ? всё прекрасно работает на скриптах 15-летней давности, ага на том самом жаваскрипте которому столетвабед, кторый ничего не вешает, который не измеет загоризонтных зависимостей, у которого есть только то что нужно и ничего лишнего и тд и тп зачем это всё?)

[@mityaikowalsking875]

тот же вопрос

[@Sylar7891]

Почему вы использовали циклы? Разве смысл этих методов не в том что они вызывабтся рекурсивно?

[@webelart]

Почему вы так решили?

[@alexgood875]

Хочу подписаться на ваш канал. Вам нужно пройти тест: Спецоперация или Война?

[@AEF23C20]

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

[@alexgood875]

@@AEF23C20 Может ты просто ещё школьник безграмотный?

[@krampos9253]

Структура данных - функция....

[@user-fc3gh1rb7w]

шарписта как всегда бомбит)) зашел только из-за привлекательного автора.

[@Maxim9575]

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

[@webelart]

Где-то промахнулась? :) Про спецификацию я опиралась на developer.mozilla.org, там довольно полное описание поведения методов + даже есть раздел с полифилами, не на всех методах, но есть. Тестировать свой код нужно всегда, мы же полифилы ручками пишем и как разработчики можем допустить ошибку в реализации, поэтому тестировать важно либо вручную, либо автотестами, последние удобнее в перспективе. ;)

[@Maxim9575]

@@webelart я не смотрел полностью видео (поэтому не знаю есть ли ошибки у вас), увидел в рекомендациях, было интересно посмотреть. Ну а в целом эти методы не нуждаются в полифилах у них достаточно хорошая поддержка во многих браузерах. Насчет тестирования спорить не буду - это важная часть разработки. Но как я говорил выше, глядя на спецификацию, не придется пытаться вспомнить или писать кучу множественных проверок под разное поведение, так как сама спецификация и рассказывает об ошибках. P.S Опираться лучше на tc39.es/ecma262, а не на справочник mdn.

[@webelart]

@@Maxim9575 Изучение того как написать полифилы: 1. Требуется на собеседований. И например reduce довольно часто спрашивают. 2. Для понимания основ JavaScript. Оба этих пункта важны. Спецификация от ecma script официальная довольно насыщена фактами и лично я не очень люблю понимать методы по ней. И даже если открыть тот же Array.prototype.map, то там буквально несколько предложений, я вновь предпочту мозилу, либо более человеческую документацию. А дальше цель, что лучше и для чего? Решение написано и кажется ничего не упустила. Задача выполнена. Значит всё отлично. Ваши аргументы больше из разряда чайка-менджмента.

[@Maxim9575]

​@@webelart 1) Ничего общего с реальностью написание данных полифилов не имеет, так как они просто не нужны, эта штука имеет чисто академический характер. Времена эксплорера уже практически канули в небытие, и написание полифилов тоже будет отмирать. Конечно написание каких-то важных функций в виде полифилов будет, но уже не так часто. 2) Для понимания основ js, изучать нужно базовые принципы механизмов языка, а эти вещи хорошо описаны в спецификации ecma262. В противном случае это все понимание эфемерное. Спецификация подробно описывает, то как работает язык, и именно поэтому я рекомендую писать полифилы, опираясь на спецификацию, а не на мозиллу, которая не является стандартизацией языка. Некоторые методы действительно сложны в понимании, но Array.prototype.map в понимании не вызывает трудностей. Что дальше? Это уже ваш выбор что дальше. Я высказал свою точку зрения, которая основывается на спецификации. А касательно ваших решений - ваше дело, вам нравится да пожалуйста. Мне-то какая разница, я не преследую цель вас наставить на путь которого я придерживаюсь. P.S Обижаться не стоит, чайку-менеджмента оставьте себе :)

[@webelart]

​@@Maxim9575 Я вам написала пункты 1-2 где может пригодиться. Если вам метод map знаком и вы знаете теорию, то не значит что все знают. Можете тоже снять видео и рассказать своё видение. А тренировку полифилов на мой взгляд лучше начинать с наиболее простого метода. У меня довольно большой опыт работы с JS, а также опыт собеседований и по своему опыту могу точно сказать, как вам удобно и понятно усваивать информацию, так и нужно это делать. Можно так, можно по-другому, ни тот, ни другой способ не является лучшим. Но в рамках каждого человека может являться более удобным и понятным, js я начинала вообще на русском языке учить, т.к. английский был практически на нуле. И ничего выучила, выросла и построила карьеру во множестве компаний. Сейчас живу и работаю в Лондоне и тоже хорошо зарабатываю. Это значит что моя реальность и мои подходы в обучении работают. Вы же даже недосмотрев видео делаете рекомендации что и как лучше. Опять же ваша система ценностей - это нормально. Но зачем опускать мою? Это называется обесценивание. И такие вещи вы вероятно со многими людьми из своего окружения прокручиваете в том числе и с самим собой. Надо делать так как делаю я и правильно делать именно так. И не я к вам на видео пришла менеджерить ваши подходы обучения и представления информации.

[@hohlovich]

С точки зрения развития и объяснения работы - отлично. Но использовать es6 для написания полифила, ну такое :)

[@webelart]

Я признаюсь не догадалась как заюзать меньшую версию js… функции map, reduce кажется уже с es5 идут. Можно конечно было в текущем примере nodejs древний какой нибудь взять, не уверена что либо тестирования на нем бы заработала…. 🤔Если только тоже меньше версию ставить. В общем интересная задача, как уменьшить версию js 😃

[@sasniykun3829]

Че их создавать-то учиться? В доке все написано.

[@user-oc1bh7sf3c]

woman programming?

[@TheGrumm]

Много воды, и болтовни по типу "а давайте посмотрим". Видео на целый час, но фактического контента без воды на 10-20 мин.

[@webelart]

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

[@TheGrumm]

@@webelart Для кого как. Может если для новичков которые только начинают изучать это подойдет, но тем кто уже знает основы и нужно только главное как мне.

[@webelart]

@@TheGrumm Т.е. это у вас фетиш такой? Ходить по источникам интернета и обесценивать контент, если вам всё понятно? Тяжёлая у вас однако работа... Но каждый занимается любимым для себя делом :)

[@webelart]

@@TheGrumm Однако я замечу для вас, будете продолжать писать под моими видео х**ню, я вас в бан добавлю и уже не сможете мне задавать вопросы, когда действительно будет что-то непонятно и нужно будет объяснить. А я обычно всем своим подписчикам помогаю по возможности. Поэтому выбор за вами. ❤️

[@hennadiikhudolieiev2198]

консоле, метход, нодьэ модулес… Очень режет слух подобная транслитерация английских слов. Произносите слова правильно 🧐 В целом контент 👍

[@webelart]

Если вам режет слух, то всегда можно обратиться к врачу. Рада, что контент понравился ❤️

[@user-tp4wc9xv5s]

Устал слушать "соответственно".

[@webelart]

😂😂 моё слово паразит.

[@kirillpavlovskii8342]

Благодарю , приятный голос и объяснения тоже