Array Methods: map, reduce, filter, forEach | JavaScript Array Methods

[@frontendscience]

⚠️ Не забывайте подписываться на наш Канал, у нас здесь каждую неделю свежие полезные видео по фронтенду - kzbin.info/door/mI5YBB9KJ0xLtFtgBX8rfw ❗️😉

[@digital_nomad_spain]

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

[@frontendscience]

Рад, что было полезно! :) Заходите почаще)

[@МатвейБеликов-ц2б]

А на каком ресурсе курсы проходишь?

[@digital_nomad_spain]

@@МатвейБеликов-ц2б в комментарии имела в виду нетологию, которые мне не понравились. хорошо зашли курсы Ивана Петриченко на юдеми и IT-Camasutra Димыча здесь на ютубе

[@МатвейБеликов-ц2б]

@@digital_nomad_spain я их как раз и прохожу ;)

[@fanfar9778]

Дякую за коротке та інформативне відео

[@АлександрМайстр]

Серій дякую. Вас завжди приємно слухати. Гарна подача матеріалу як завжди!

[@timsanbakr6517]

Такая подача , все понятно сразу. Всех благ вам.

[@Achieve_Zenith]

Шикарная подача, коротко и ясно. Обожаю ваш контент

[@redconfizbl1281]

после прочтения главы в книге долго путалося, спасибо за подробное объяснение. стало все понятно)

[@serhiilytvyn8753]

Было бы интересно посмотреть Вашу реализацию методов. Спасибо за полезные видео!

[@frontendscience]

Приятного просмотра! :) kzbin.info/www/bejne/fnKbl2dveM-epdE

[@nataliavardazaryan3981]

Я в восторге от контента :) на канале есть все нужное новичку

[@frontendscience]

Рады слышать! Если будут пожелания - пишите в комментариях, мы откликаемся на просьбы наших подписчиков :)

[@kaspersky__13]

Побольше бы таких видео! Очень хорошо объяснили! Но хотелось бы узнать, где в пишете код?

[@yurakirichenko9770]

5 из 5. Несколько раз перечитал в книге эти методы, но здесь кратко, доступно и понятно человек объяснил. Спасибо большое!!!

[@frontendscience]

Благодарю! Рад что было полезно!

[@borisgrejcha7263]

как книга называется если не секрет?

[@ЖанибекСундетов-о9д]

Пока самый лучший канал по фронту который я видел! Почему я раньше вас не нашел)

[@ruslangilyazov7733]

Cпасибо за видео! Хотелось бы видео про реализацию этих методов!!

[@____Olga__]

Cвоя реализация методов , спрашиваете ещё, конечно интересно. Ждём с нетерпением , когда покажете)

[@frontendscience]

Обязательно сделаем. Может даже разберем на ближайшем субботнем. live-stream.

[@ДеткиеНочники]

Спасибо за видос! Насчет самостоятельного написания методов, было бы полезно посмотреть как это реализовать самостоятельно

[@frontendscience]

Благодарим за поддержку! Сделаем!

[@TheProfessionalGambler]

кастомная функция фильтр: const filter = (arr, callback) => { const result = [] for (let i = 0; i < arr.length; i++) { if (callback(arr[i], i, arr)) { result.push(arr[i]) } } return result } кастомный метод прототипа: Array.prototype.customFilter = function (callback) { const result = [] for (let i = 0; i typeof item === 'number' const newArray = filter(arr, isNumber) const customArray = arr.customFilter(isNumber) const evenArray = arr.customFilter((_, index) => index % 2 === 0) console.log({newArray, customArray, evenArray}) Здесь без контекста и проверок аргументов, думаю Серега покажет лучше. Это на коленке набросал)

[@petarthecodehunter3333]

Спасибо! Лучшее объяснение от методу reduce()

[@ОльгаЗолотарёва-г6з]

Спасибо большое за такое простое объяснение!!!! 🙂

[@vahe.hayrapetyan]

Очень хорошо объяснил! Спасибо за видеокурс)

[@andreyshek1490]

Классно объясняет! Подписка оформлена🙏👍

[@w3k5ik]

8:30 По умолчанию в данном кейсе не нулю равен аккумулятор, а первом значению в итеррируемом массиве.

[@frontendscience]

Да все верно! В этом видео для упрощения, не стал разбирать этот edge кейс. На следующем же стриме, где мы с нуля писали все эти методы (свои реализации) уже подробно рассказал про кейс - без дефолтного значения.

[@borisgrejcha7263]

если меня попросят сказать что-то на умном, я буду готов))

[@vladimirpuzey713]

Отличное видео! Но хотелось бы больше интересных, не типичных примеров использования методов массивов! Спасибо за контент!

[@frontendscience]

Рад ,что понравилось! Разберем в следующих видео.

[@kaspersky__13]

​@@frontendscience можете сказать, название вашего редактор кода?

[@romanprokopets3693]

спасибо, освежил в памяти) хотелось бы больше подобных видео

[@frontendscience]

Благодарю за поддержку. Будет)

[@Stas-ir3gh]

Спасибо, качественно объяснил

[@polka-a]

Спасибо, наконец то поняла 💕

[@awenn2015]

Все кроме reduce уже давно использую, теперь буду пробовать редьюс, у него большой потенциал

[@olexandrkozirskiy6917]

23,04,2023 😎

[@mila4308]

замечательный канал, отличное видео, спасибо!

[@frontendscience]

Спасибо большое! Рады стараться

[@akylbekbaizakov]

Спасибо за видео!

[@serverizedinov7942]

Спасибо! Полезное видео.

[@____Olga__]

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

[@leoclu8939]

спасибо за работу

[@РУСЛАНОРАСБАЕВ-т1и]

Просто и максимально быстро)

[@ИльяПанин-и3л]

Полезно! Спасибо)

[@frontendscience]

Благодарим! :)

[@ArtiCHEs]

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

[@frontendscience]

Рад, что понравилось!

[@АнтонСтрока]

Конечно интересно.

[@chikichik4164]

Спасибо, доступно очень объяснили!)

[@chou_mlbb_ru]

спасибо очен полезный видео

[@maratiot]

Видео крутое! снимайте видео чаще для новичков!

[@lTanTea]

8:30 а разве по умолчанию аккумулятор не равен первому эллементу массива, если мы не указывали ноль в условии?

[@frontendscience]

Да так и есть. Для простоты объяснения в этом видео я упростил эту часть. В следующем видео где мы делали свою реализацию методов я подробно остановился на дефолтном значении и варианте когда оно не задано

[@multiply87]

Кстати, неоднократно слушал о том, что невозможно прервать forEach и иже с ними, но можно. Просто выбросить ошибку(throw). Такой кейс был у меня, но очень давно. Возможно что-то изменилось. В любом случае спасибо, ибо нужно уметь не только кодить, но и уметь научить. Я как-раз занимаюсь подобным для новичков в пределах моей работы)

[@frontendscience]

Это ситуация из разряда "почему все говорят, что нельзя микроскопом забивать гвозди? у меня вот получилось...". Так можно и выдернуть комп из розетки чтобы прервать forEach :) задача ведь не только прервать, а дальше продолжить выполнение. С эксепшеном все будет сложнее - чтобы не прерывать дальше код прийдется оборачивать все в try/catch. Короче говоря - гвозди и микроскоп! :) Если иметь целью писать хороший код - это не гуд практика. Ценю твою активность и целеустремленность! Нравится, что ты так глубоко стараешься во всем разобраться. И правильно, что уже учишь! Так все полируется и структурируется еще лучше.

[@mtb-love-belarus]

Огонь, спасибо!

[@frontendscience]

Рад, что было полезно

[@Alex-scc]

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

[@frontendscience]

Благодарю! Рад что понравилось! По поводу суммирования содержимого массива вариантов масса - например посчитать сумму заказа в корзине, или просуммировать и вывести итого в списке выплат сотрудникам. Вариантов - тьма :)

[@ВоваШпилевой-в5ж]

красава не плохо

[@metterandroid]

Спасибо, было полезно)

[@viktoriakrasiuk2000]

Хотелось бы видео с более сложными примерамм использования метода reduce

[@frontendscience]

Будет! Не забудьте нажать на колокольчик 🔔 😀

[@АлисаСелезнева-в1о]

Поддерживаю!

[@AndreiD-f7s]

Там если не ошибаюсь небольшая ошибка с reduce. Если не передавать второй аргумент, то acc будет сразу не 0, а первым элементом массива, т е 1, и итерация начнётся с второго элемента, т е еlem === 2

[@frontendscience]

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

[@РоманГирич-з5ш]

еще раз спасибо

[@frontendscience]

Рад, что было полезно! )

[@inokentiyMay]

Класно

[@MrColins710]

top!

[@ДенисДоровских-я2с]

да было бы супер, если напишите реализацию данных методов!!

[@frontendscience]

Уже есть :) Вот запись стрима: kzbin.info/www/bejne/fnKbl2dveM-epdE

[@borysmarder2511]

Тут есть ошибка. Если не задано начальное значение аккумулятора в .reduce то в колбек на первой итерации попадут 0-й и 1-й элементы массива, т.е. функция будет вызвана на один раз меньше чем длина массива.

[@frontendscience]

Там нет ошибки. Я объяснял базовый принцип работы алгоритма метода, без вдавания в подробности на эдж кейсах. Конечный результат работы метода будет именно тот, что нам нужен. Каждый из этих методов (в особенности reduce) имеет массу нюансов и заслуживает отдельного видео - в том числе и про внутреннюю реализацию. Что я и предлагал в видео.

[@user-san-chous]

человек, который отнимет часть ниши в Александра Лущенко))

[@АлександрБолдырев-п7ц]

Как то даже писал собственную реализацию. Но было бы интересно посмотреть как делают это другие.

[@frontendscience]

Приятного просмотра: kzbin.info/www/bejne/fnKbl2dveM-epdE

[@yv4194]

@ Front-end Science with Sergey Puzankov а что за extension под vscode для распознания типа переменной? авто тайп скирт

[@frontendscience]

Даже не знаю, что ответить. Я никаких дополнительных экстеншинов не ставил, это все шло из коробки

[@Nevskij111]

как так смотреть результаты в редакторе подскажите?

[@roxone314]

вызываем нашу функцию редьюсе))

[@umarjuraev1624]

spasibo

[@ОлександрКарась-в1и]

Подскажите пожалуйста, как так получилось что расширения файла .js но Вы используете typescript (указываете типы для аргументов функции)?

[@frontendscience]

Я не использовал там тайпскрипт, это новая фича от вебшторм - он анализирует код и сам показывает типы.

[@ОлександрКарась-в1и]

@@frontendscience Понял, спасибо за ответ.

[@arturnevesomov8300]

Здравствуйте! Какой шрифт используете в редакторе кода?

[@frontendscience]

Jetbrains Mono

[@angular-developer-e1t]

Да интересно, только у array 31 метод.

[@igormuryy5722]

Сделайте минипроект онлайн

[@frontendscience]

В планах :) Stay tuned.

[@Davidovich_aka_smoozydrinker]

@@frontendscience только НЕ на 4 часа видео, пожалуйста, а как "ulbi tv" пилит, ускоряя верстку и рутину, вырезая паузы в видео при монтаже. Спасибо.

[@mentalist_tema]

Очень хочу видео реализации методов

[@frontendscience]

Приятного просмотра! :) kzbin.info/www/bejne/fnKbl2dveM-epdE

[@Valery_150]

Да круто было бы

[@frontendscience]

Приятного просмотра: kzbin.info/www/bejne/fnKbl2dveM-epdE

[@Valery_150]

@@frontendscience спасибо)

[@d_r_robot]

Кстати да, как написать свою реализацию метода map, filter и прочее?

[@frontendscience]

Уже прошел стрим. Приятного просмотра! kzbin.info/www/bejne/fnKbl2dveM-epdE

[@d_r_robot]

@@frontendscience да, посмотрел, благодарю. Максимально полезно, буду пересматривать, засыпался на собесе как раз на полифиле метода map.

[@frontendscience]

@@d_r_robot да, это частый вопрос на собесах. Желаю больших успехов! И классного оффера!

[@kostyapanov5070]

как называется тема?

[@user_emodzithroll3553]

Все они используются для циклов. А в чем разница между ними?

[@frontendscience]

Предлагаю посмотреть видео :) а то аж обидно, как бы целый видос про это

[@FrankyyBalboa]

Не понятно как работает reduce.

[@bitmainuser4028]

Всё хорошо, но давай уже современным синтаксисом пиши, динозавр)

[@frontendscience]

Все хорошо, меня устраивает то, как я пишу, Дартаньян.

[@alexblack43]

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

[@frontendscience]

Предлагаю посмотреть видео и все станет ясно ;)

[@ВасилийВатман]

Дуже корисний контент! З Днем незалженості України!

[@frontendscience]

З Днем незалежності України!