DEV Community

Pramod K 💻
Pramod K 💻

Posted on

1

Polyfills Cont...

Implement the pipe() polyfill

if (!Function.prototype.pipe) {
  Function.prototype.pipe = function (fn) {
    return (...args) => fn(this(...args));
  };
}
Enter fullscreen mode Exit fullscreen mode

You can use it like this:

const add = (a, b) => a + b;
const double = (x) => x * 2;
const addThenDouble = add.pipe(double);
console.log(addThenDouble(1, 2)) //6
Enter fullscreen mode Exit fullscreen mode

Implement the publisher-subscriber pattern in javascript

class EventEmitter {
  constructor() {
    this.subscribers = new Map();
  }

  subscribe(event, callback) {
    if (!this.subscribers.has(event)) {
      this.subscribers.set(event, []);
    }
    this.subscribers.get(event).push(callback);
  }

  unsubscribe(event, callback) {
    if (this.subscribers.has(event)) {
      this.subscribers.set(event, this.subscribers.get(event).filter((cb) => cb !== callback));
    }
  }

  emit(event, data) {
    if (this.subscribers.has(event)) {
      this.subscribers.get(event).forEach((callback) => callback(data));
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

You can use it like this:

const eventEmitter = new EventEmitter();

const callback1 = (data) => console.log("Event 1:", data);
const callback2 = (data) => console.log("Event 2:", data);

eventEmitter.subscribe("event1", callback1);
eventEmitter.subscribe("event2", callback2);

eventEmitter.emit("event1", { message: "Hello World!" });
// Output: "Event 1: { message: 'Hello World!' }"

eventEmitter.emit("event2", { message: "Hello World!" });
// Output: "Event 2: { message: 'Hello World!' }"

eventEmitter.unsubscribe("event1", callback1);
//unsubscribe from an event
Enter fullscreen mode Exit fullscreen mode

Implement the Array.map method on the Array Prototype

Array.prototype.map = function(callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        newArr.push(callback(this[i], i, this));
    }
    return newArr;
};
Enter fullscreen mode Exit fullscreen mode

*** Implement the Array.filter method on the Array Prototype***

Array.prototype.filter = function(callback) {
    var newArr = [];
    for (var i = 0; i < this.length; i++) {
        if (callback(this[i], i, this)) {
            newArr.push(this[i]);
        }
    }
    return newArr;
};
Enter fullscreen mode Exit fullscreen mode

Implement the Array.reduce method on the Array Prototype

Array.prototype.reduce = function(callback, initialValue) {
    var accumulator = initialValue !== undefined ? initialValue : this[0];
    for (var i = initialValue !== undefined ? 0 : 1; i < this.length; i++) {
        accumulator = callback(accumulator, this[i], i, this);
    }
    return accumulator;
};
Enter fullscreen mode Exit fullscreen mode

Implement the Array.forEach method on the Array Prototype

Array.prototype.forEach = function(callback) {
    for (var i = 0; i < this.length; i++) {
        callback(this[i], i, this);
    }
};
Enter fullscreen mode Exit fullscreen mode

Implement the Function.bind method on the Function Prototype

if (!Function.prototype.bind) {
  Function.prototype.bind = function(context) {
    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    return function() {
      var innerArgs = Array.prototype.slice.call(arguments);
      var finalArgs = args.concat(innerArgs);
      return self.apply(context, finalArgs);
    };
  };
}
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay