🔧 Javascript Chaining

🕛 Zeit seit Veröffentlichung: 543 Tage, 3 Stunden 49 Minuten
📆 Veröffentlicht am: 23.11.2023 um 14:38 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

INTRO 🔊

Chaining is the concept one function returns a current(this) object and another function will use values in that current(this) object. It's the same as PIPELINE explained in my previous post. But the difference is in chaining we have pre-defined methods not like a pipeline. Javascript chaining is a very familiar concept. If you know array methods then you automatically know javascript chaining.

DEFINITION 🔊

Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism for calling a method on another method of the same object.

USAGE 🔊

For example, if we want to use one method/function modified value in another method/function every time we have to call that method/function and have to pass the returned value from the previous function to the next method/function. It leads to more code, lacks the best practice and affects the performance.

EXAMPLE 🔊

For example let's take four functions named add, subtract, divide, multiple. We have to use the value returned from the function add into subtract, later we have to use the returned value from subtract into divide, and in that same way, we have to use the returned value from divide into multiple and finally should be return the value.

WITHOUT CHAIN 🔕

const add=(i)=>{
   return i + 10
}

const subtract=(x)=>{
   return i - 5
}

const divide=(x)=>{
   return i/3
}

const multiple=(x)=>{
   return i * 5
}

let x = 5
const a = add(x)
const b = subtract(a)
const c = divide(b)
const res = multiple(c)

console.log(res)

If you observe the above code we wrote all 4 methods individually and defined them one by one. It takes up more space and code is also not much readable.

WITH CHAIN 🔔

function main(num) {
  let i = num;
  return {
    add: function (num) {
      i += num;
      return this;
    },
    subtract: function (num) {
      i -= num;
      return this;
    },
    divide: function (num) {
      i /= num;
      return this;
    },
    multiple: function (num) {
      i *= num;
      return this;
    },
    print() {
      return i;
    },
  };
}

const x = main(5)
const res = x.add(10).subtract(5).divide(3).multiple(5).print();

cosole.log(res)

The above code is very readable and we can consider it as the best practice method compared to the previous one.

DIFFERENT WAYS TO ACHIEVE CHAINING IN JAVASCRIPT 🔊

FACTORY FUNCTIONS 📕

function main(num) {
  let i = num;
  return {
    add: function (num) {
      i += num;
      return this;
    },
    multiple: function (num) {
      i *= num;
      return this;
    },
    print() {
      return i;
    },
  };
}

const x = main(10);
const x2 = main(10);

const value = x.add(2).multiple(10).print();
const value2 = x2.multiple(2).add(10).print();

console.log(value);
console.log(value2);

CONSTRUCTOR FUNCTIONS 📗

const main = function (init = 0) {
  this.i = init;
  this.add = function (i) {
    this.i += i;
    return this;
  };
  this.multiple = function (i) {
    this.i *= i;
    return this;
  };
  this.print = function () {
    return this.i;
  };
};

const x = new main(10);
const x2 = new main(10);

const value = x.add(10).subtract(2).multiple(10).print();
const value2 = x2.multiple(10).subtract(2).add(10).print();

console.log(value);
console.log(value2);

CLASS METHODS 📘

class Main {
  constructor(data) {
    this.data = data;
  }
  add(num) {
    this.data += num;
    return this;
  }
  subtract(num) {
    this.data -= num;
    return this;
  }
  multiple(num) {
    this.data *= num;
    return this;
  }
  print() {
    return this.data;
  }
}

const x = new Main(10);
const x2 = new Main(10)

const value = x.add(10).multiple(5).print();
const value2 = x2.multiple(10).add(5).print()

console.log(value);
console.log(value2);

OBJECT METHODS 📙

const main = {
  data: {
    i: 0,
  },
  initiate: function (num = 0) {
    this.data.i = num;
    return this;
  },
  add: function (num) {
    this.data.i += num;
    return this;
  },
  subtract: function (num) {
    this.data.i -= num;
    return this;
  },
  multiple: function (num) {
    this.data.i *= num;
    return this;
  },
  print: function () {
    return this.data.i;
  },
};

const value = main.initiate(100).add(10).multiple(2).print();
const value2 = main.initiate(100).multiple(2).add(10).print()

console.log(value);
console.log(value2)

SIMILAR TO ARRAY METHODS 🔊

If you observe array methods like map, filter, reduce etc... they are also follows the same code practice

For Example :-

Array.map().filter().reducer()

CONCLUSION 🔊

Chaining is the one of the best practice method for create multiple methods depends on one on another. same like array methods. It looks clean and readable. So from now onwards if we want to write multiple dependent methods, follow the chaining method 😎

Peace 😊

...

🍏 Dirty Secrets of Thunderbolt Daisy Chaining: Never Reliable, Probably Never Will Be, Kernel Panics with Sustained I/O eg Backups

🕛 825 Tage, 20 Stunden 57 Minuten
📆 13.02.2023 um 21:03 Uhr
📈 18.76 Punkte
🍏 iOS / Mac OS

☑ Lösungen

☑ Betriebssysteme

☑ IT-Sicherheit

☑ Cyberbedrohungen

☑ Ressourcen

☑ Videos

☑ Sicherheitstipps

☑ Häufig gesucht