Writing our own implementation forEach, filter, map, reduce | JS array methods

[@Komiljon_uzb]

Огромное спасибо за ваш труд и потерянные время ради нас 👏

[@shaxruhnazarov1800]

Spasiba vam Sergey ochen poleznoe video,

[@frontendscience]

Рад слышать! :)

[@shaxruhnazarov1800]

@@frontendscience Zdrastvuyte Serge esho raz, qogda budet qurs po 'react' u, prastit zato chto peshu na latinskom, u menya ruskiy gramatika plahoy

[@studyingturtle2726]

Огромное спасибо за видео! Спустя целый день прокрастинации вместо "заучивания" написание своих методов map, forEach, filter, reduce, нахожу видео, которое и смотреть интересно, методы лучше объясняются, а следовательно, запоминаются:)) Cпасибо!

[@frontendscience]

Супер! Рад, что помог) Успехов!

[@eduardgrigoryan6052]

Спасибо большое Сергей. Было очень понятно. Очень очень помогло ваш урок, и прям то что надо до интервью)

[@143-z4m]

Спасибо большое! То, что было нужно!

[@karenmartirosyan2185]

Сергей ты красавчик .все супер!

[@vladimirpuzey713]

Круть, спасибо! Оч интересно - так держать!))

[@frontendscience]

Спасибо за поддержку! :)

[@arinochka2306]

Спасибо за отличное видео. Очень интересно слушать твои объяснения. Успехов тебе! Береги себя.

[@igormuryy5722]

Автолайк улетел! Ждем завтрашний стрим!

[@dmitry311212]

Благодарю за видео! Было б классно, если бы вы запилили видос на тему реализации паттернов проектирования, ну и вообще "разжевали" некоторые из них на примерах, У вас это суперски получается!!!

[@ВладимирВолощик-ю3ы]

Спасибо! Классный контент.

[@frontendscience]

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

[@razetyusupova7661]

Сергей, у Вас уникальный контент на ютуб, большое спасибо за прекрасную подачу! Успехов Вам во всем!🙂

[@frontendscience]

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

[@____Olga__]

Сергей, спасибо вам за труды -- огромное & человеческое и так кушать захотелось, что переночевать негде, это я к тому, что хорошо бы ещё код скинуть, вы как- то обмолвились об этом , хотя конечно же, можно и самoму всё это за вами ручками повторить : )

[@frontendscience]

Ссылку приложил в описание: codepen.io/puzankov/pen/VwPjpPm?editors=0010

[@strikerorion5290]

Класс, спасибо!

[@vladvoloshenko5701]

спасибо:)🎄

[@turalinov]

Спасибо за полезный контент)

[@frontendscience]

Рад, что было полезно, Руслан! Спасибо и Вам)

[@jorgen5462]

Отлично👓❗Даже про нативные методы кое что новое узнал 👍🆒

[@frontendscience]

Класс! Рад что было полезно! 👍

[@anton-vr5xw]

отличное видео, спасибо

[@frontendscience]

Благодарю! Приятно!

[@avel8965]

45:35 только .reduce() вернет не новый массив, а новое значение, там нет массива. А видео крутое)

[@frontendscience]

Да, я оговорился.

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

крутяк

[@frontendscience]

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

[@ДмитроКравець-л2щ]

Спасибо

[@jorgen5462]

Сергей, сделай магазин на React & Next . Шутка😂 - просто это классическая просьба js блогеру

[@frontendscience]

Может как-то на субботнем стриме и сделаем - и это не шутка :)

[@jorgen5462]

@@frontendscience А вот и сделай! 😁 Спорим, что просмотров будет минимум в два раза больше💯

[@frontendscience]

@@jorgen5462 🤩

[@EvilYou]

Отличный стрим. Как раз совсем недавно изучил прототипы. Написал свои варианты реализации методов из этого видео: 1) Array.prototype.forEach Array.prototype.forEach2 = function(callback, thisArg) { if (typeof callback !== 'function') throw new Error("Callback is not a function"); let ctx = thisArg ?? this; for (let i = 0; i < this.length; i++) { if (this[i] === undefined) continue; callback.call(ctx, this[i], i, this); } } Полагаю, что проверка вида if (this == null) не нужна, так как null/undefined не имеют методов и попытка доступа к свойствам таких значений возвратит ошибку по умолчанию: null.forEach2(); // TypeError: Cannot read property 'forEach2' of null 2) Array.prototype.filter Array.prototype.filter2 = function(callback, thisArg) { if (typeof callback !== 'function') throw new Error('Callback is not a function'); let ctx = thisArg ?? this; let result = []; for (let i = 0; i

[@EvilYou]

Вернулся к этому видео снова и написал новые варианты решения (так как они похожи, напишу вариант с forEach): forEach // Все же я был не совсем прав насчет проверки на null и undefined. Она позволяет обработать вызовы с call или apply так же, как встроенная реализация. Array.prototype.forEach2 = function(callback, thisArg) { if (typeof callback !== 'function') throw new TypeError(`${callback} is not a function`); const ctx = thisArg ?? this; if (ctx === null || ctx === undefined) throw new TypeError('Array.prototype.forEach2 called on null or undefined'); for (let i = 0; i < ctx.length; i++) { if (!(i in ctx)) continue; // Если значение пустое (empty) callback.call(ctx, ctx[i], i, this); } } P.S. В reduce надо делать проверку на arguments.length в любом случае (в моем решении выше ее нет).

[@СергейЛищенко-е9ц]

1 Спасибо.

[@dedn61]

Здравствуйте. А будет разница если для метода map использовать не newArray[i] = callback.call( context, this[i], i , o) просто newArray.push(callback.call( context, this[i], i , o))

[@СергейЛищенко-е9ц]

2 Если опустить проверки,такой код имеет место быть? Array.prototype.reduce2 = function (callback, inicialState = this[0]) { for (let i = arguments.length < 2 ? 1 : 0; i < this.length; i++) { inicialState = callback(inicialState, this[i], i, this); } return inicialState; };

[@krasniy_traktor]

Сергей, здравствуйте. Вопрос не по теме: А вы пофиксили вывод в консоль не более 3-х элементов в webStorm ? Если да, то каким образом?

[@frontendscience]

Ээээ- не сталкивался с такой проблемой.

[@krasniy_traktor]

@@frontendscience 1:18:47

[@frontendscience]

@@krasniy_traktor ааа понял. Нет не пофиксил. Это случилось с апдейтом именно на свежую версию node.js. Но там нет ограничения на 3 элемента - там просто выводит все но по 3 в строке.

[@77nixter]

Скажите а почему в колбэке написан this[i]? Не правильней ли было писать - callback.call(context, O[i], i, O) ?

[@frontendscience]

На самом деле - да думаю O[i] был бы даже лучше с точки зрения консистентности подхода - раз мы уже завели O, то почему бы его не использовать. Но в целом разницы я не вижу совсем - не могу даже придумать edge case когда эта разница была бы видна.

[@vadimsib1654]

По поводу forEach: 1) при вызове .call(null, ....) не выводит ошибку в стиле "called on null or undefined", как в оригинальном методе 2) this в forEach по умолчанию window, в нашей же реализации это наш массив

[@frontendscience]

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

[@vadimsib1654]

в строгом режиме первый пункт отрабатывает, а как сделать так, чтобы и не в строгом режиме выдавало ошибку про null или undefined как в оригинальном методе?

[@Nikitosss91]

Как код запускать в шторме?

[@frontendscience]

вторая кнопка мыши на файле - Run file.js Или Ctrl+Shift+R

[@Nikitosss91]

@@frontendscience в том то и дело что нефига, на шифт кнтрл r у меня окно реплейса, а кноки run в контекстном меня вообще нет

[@frontendscience]

@@Nikitosss91 значит не настроен node.js в webstorm

[@darkins7042]

Когда Мармок успел перейти на Frontend?

[@oleksbober]

ниче не понятно 🥲