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

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 62

  • @Komiljon_uzb
    @Komiljon_uzb Рік тому +1

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

  • @studyingturtle2726
    @studyingturtle2726 3 роки тому +3

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @shaxruhnazarov1800
    @shaxruhnazarov1800 3 роки тому +1

    Spasiba vam Sergey ochen poleznoe video,

    • @frontendscience
      @frontendscience  3 роки тому

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

    • @shaxruhnazarov1800
      @shaxruhnazarov1800 3 роки тому

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

  • @eduardgrigoryan6052
    @eduardgrigoryan6052 2 роки тому

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

  • @vladvoloshenko5701
    @vladvoloshenko5701 2 роки тому

    спасибо:)🎄

  • @vladimirpuzey713
    @vladimirpuzey713 3 роки тому +3

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

  • @arinochka2306
    @arinochka2306 2 роки тому

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

  • @143-z4m
    @143-z4m 2 роки тому

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

  • @razetyusupova7661
    @razetyusupova7661 2 роки тому

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

    • @frontendscience
      @frontendscience  2 роки тому +1

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

  • @dmitry311212
    @dmitry311212 3 роки тому +5

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

  • @karenmartirosyan2185
    @karenmartirosyan2185 2 роки тому

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

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

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

  • @igormuryy5722
    @igormuryy5722 3 роки тому +3

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

  • @____Olga__
    @____Olga__ 3 роки тому +1

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @strikerorion5290
    @strikerorion5290 2 роки тому

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

  • @turalinov
    @turalinov 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @jorgen5462
    @jorgen5462 3 роки тому +2

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @anton-vr5xw
    @anton-vr5xw 3 роки тому

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

  • @ДмитроКравець-л2щ
    @ДмитроКравець-л2щ 2 роки тому

    Спасибо

  • @СергейЛищенко-е9ц
    @СергейЛищенко-е9ц 2 роки тому

    1 Спасибо.

  • @avel8965
    @avel8965 2 роки тому

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

  • @СергейЛищенко-е9ц
    @СергейЛищенко-е9ц 2 роки тому

    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;
    };

  • @EvilYou
    @EvilYou 3 роки тому +9

    Отличный стрим. Как раз совсем недавно изучил прототипы.
    Написал свои варианты реализации методов из этого видео:
    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
      @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 в любом случае (в моем решении выше ее нет).

  • @РоманГирич-з5ш
    @РоманГирич-з5ш 2 роки тому

    крутяк

  • @dedn61
    @dedn61 Рік тому

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

  • @krasniy_traktor
    @krasniy_traktor 3 роки тому +1

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

    • @frontendscience
      @frontendscience  3 роки тому

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

    • @krasniy_traktor
      @krasniy_traktor 3 роки тому

      @@frontendscience 1:18:47

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @jorgen5462
    @jorgen5462 3 роки тому +3

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

    • @frontendscience
      @frontendscience  3 роки тому +2

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

    • @jorgen5462
      @jorgen5462 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

      @@jorgen5462 🤩

  • @77nixter
    @77nixter 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому +1

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

  • @vadimsib1654
    @vadimsib1654 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

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

    • @vadimsib1654
      @vadimsib1654 3 роки тому

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

  • @Nikitosss91
    @Nikitosss91 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

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

    • @Nikitosss91
      @Nikitosss91 3 роки тому

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

    • @frontendscience
      @frontendscience  3 роки тому

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

  • @darkins7042
    @darkins7042 3 роки тому

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

  • @oleksbober
    @oleksbober 2 роки тому

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