DEV Community

Cover image for JS Polyfills - Part 2 (forEach, keys, Values, Entries)
Sriya
Sriya

Posted on • Edited on

1

JS Polyfills - Part 2 (forEach, keys, Values, Entries)


Github Code: JS Polyfills
4. forEach()

  • Function: forEach(callback, thisArg)
  • Usage: arr.forEach((ele, index, arr)=>{...}, this)
  • Description: callback function will execute on every element. But not for uninitialized elements for sparse arrays.
  • Polyfill: forEach
//function returns undefined
Function.prototype.customForEach = function (callback) {
  //this should point to array
  if(Array.isArray(this)) {
    for (let i = 0; i < this.length; i++) {
      //check if each element exists
      if(typeof this[i] !== 'undefined') {
        //callback will take element, index and array as parameters
        callback(this[i], i, this);
      }
    }
  }
};

Enter fullscreen mode Exit fullscreen mode

5. Keys()

  • Function: keys(obj)
  • Usage: Obj.keys(anyobj)
  • Description: returns array iterator
  • Polyfill:Keys
//function returns Array Iterator
Array.prototype.customKeys = function () {
  let keys = [];
    for (let i = 0; i < this.length; i++) {
      keys.push(i);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the keys return array iterator
    // A yield will pause and resume the function (Basically will return the keys one by one until done becomes true)
    function* iterator() {
      yield* keys;
    }

    return iterator();
};
Enter fullscreen mode Exit fullscreen mode

6. Values()

  • Function: values(obj)
  • Usage: Obj.values(anyobj)
  • Description: returns array iterator
  • Polyfill:Values
//function returns Array Iterator
Array.prototype.customValues = function () {
  let values = [];
    for (let i = 0; i < this.length; i++) {
      values.push(this[i]);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the values return array iterator
    // A yield will pause and resume the function (Basically will return the values one by one until done becomes true)
    function* iterator() {
      yield* values;
    }

    return iterator();
};
Enter fullscreen mode Exit fullscreen mode

7. Entries()

  • Function: entries(obj)
  • Usage: Obj.entries(anyobj)
  • Description: returns array iterator
  • Polyfill:Entries
//function returns Array Iterator
Array.prototype.customEntries = function () {
  let entries = [];
    for (let i = 0; i < this.length; i++) {
      entries.push(i, this[i]);
    }
    // A generator function which returns a generator object( basically follows iterator protocol)
    // Why we use here? because the entries return array iterator
    // A yield will pause and resume the function (Basically will return the entries one by one until done becomes true)
    function* iterator() {
      yield* entries;
    }

    return iterator();
};
Enter fullscreen mode Exit fullscreen mode

Stay Tuned for Part 3
Keep Learning!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay