DEV Community

Cover image for Implementing Golang defer concept into Javascript
Ahmed Rakan
Ahmed Rakan

Posted on

Implementing Golang defer concept into Javascript

In Go, a defer statement defers the execution of a function until the surrounding function returns. Here's a simple example:

package main

import "fmt"


func main() {
    fmt.Println("start")
    defer fmt.Println("defer 1")
    defer fmt.Println("defer 2")
    fmt.Println("end")
}
Enter fullscreen mode Exit fullscreen mode

In this example, the main function executes normally, but all deferred functions are executed in reverse order when the function exits. SO the output will be :

start
end
defer 2
defer 1
Enter fullscreen mode Exit fullscreen mode

Now, adding defer keyword to JavaScript requires a lot of work. But that’s what I love about JS—it’s so versatile that you can implement features from other programming languages without needing to touch the compiler.

But first, why would we need this?

There are many useful use cases for a defer-like functionality in programming, such as:

  • Resource cleanup: Clean up resources like file handles.
  • Transactional operations: Roll back changes in case of an error, like reverting a database or state update.
  • Logging: Add logging at the end of an operation.
  • UI state management: Reset state after a process.

And the list goes on...

Now, let’s dive into the fun part: our implementation of defer in JavaScript.

class Deferer {
  static stack = [];
  static wrapped = false;
  static defer(fn) {
    this.stack.push(fn);
    if (!this.wrapped) {
        throw new Error("can't call defer wihtout wrapping the function with Deferer.wrapper")
    }
  }

  static execute() {
    while (this.stack.length > 0) {
      const fn = this.stack.pop();
      try {
        fn();
      } catch (err) {
        throw new Error('Error in deferred function:', err);
      } 
    }
    this.wrapped = false;
  }

  static wrapper = (cp) => (...args) => {
        if(this.wrapped) throw new Error("nested deferers are not supported");
        this.wrapped = true;
        try {
         const v = cp(...args)
         this.execute()
         return v;
        } finally {
          this.wrapped = False;
        }

  }

}

const myDeferedFunction =Deferer.wrapper((a, b, c) => {
  console.log("Start of function", a, b, c);

  Deferer.defer(() => console.log("Deferred: Function 1"));
  Deferer.defer(() => console.log("Deferred: Function 2"));

  console.log("End of function", a, b, c);
});


myDeferedFunction(8,8,8)
Enter fullscreen mode Exit fullscreen mode

Output:

Start of function 8 8 8
End of function 8 8 8
Deferred: Function 2
Deferred: Function 1
Enter fullscreen mode Exit fullscreen mode

As expected, the deferred functions execute after the main function has completed, in reverse order.

Thanks,

Ahmed

Top comments (0)