DEV Community

Cover image for How to pass function to Web Workers

How to pass function to Web Workers

elisiondan profile image Daniel Charvát ・3 min read

Web Workers allow for something similar to multithread operations that are common in languages such as Java or C++. In front end world, they are tool which is yet to be more frequently used.
That's, in my opinion, mainly due to lack of knowledge about their use cases, misjudgment that most people have fast PCs and modern browsers, and force of habit of sticking to what one knows (I second that). Additionally, there some limitations to their usage, such as the inability to pass functions into them.

Why to use Web Workers

Web worker is a mere script that runs in the background, in another thread, which means that any calculation, however expensive, will not block the UI's thread. That's huge. People hate when websites become slow or even worse, non-responsive. With Web Workers, you can do the heavy lifting in the background while showing the user a loading indicator and letting him or her do whatever else in the meantime.

You may ask when this is useful. We've put this into good use when we worked with a recursive tree structure. We were processing the whole tree with thousands of nodes each time the user interacted with the tree. That included loads of calculations and had we had done all of that in the main thread + render the result at the end, even the most beastly pc sets would have growled about it.

Limitations of Web Workers

Since the Web Workers run in another thread, there are limitations to what it can and cannot do.

  • It cannot access the DOM directly and you lose direct access to window object.
  • you cannot rely on a global state within them.
  • you cannot send in data that cannot be handled by structured clone algorithm

The last has turned out to be the most painful for me. You see, when you have an instance of a Web Worker, you may send in data through postMessage

    string: 'string',
    number: 0,
    array: [],

Those value types above can be handled by the structured cloning. However, you cannot send in functions because they can be neither cloned nor transferred. That was a problem, because we wanted to send in an evaluator for each of the nodes (e.g. whether its name matches a search term), for which we needed a function inside of the worker.

Overcoming the no-functions limitation

There is a simple trick on how to solve this. As any other object or value, and in javascript especially since functions here are First-class citizens, we may define functions within objects and stringify them through JSON.stringify. This transforms the function declaration a bit, so parsing them back requires a bit of effort. Luckily, there's JSONfn plugin that handles it well both ways.

And that's that is required. Now you can declare and object which includes functions for the Web Worker, stringified with JSONfn:

// From main thread
    myFunction: JSONfn.stringify( (arg) => ... )
    payload: ... // any kind of data, let the function decide whether it's useful

And reconstructed inside of the Web Worker's script

// inside of worker
self.addEventListener("message", function(e) {
    // `` contains data sent from main thread
    const myFunction = JSONfn.parse(;
    myFunction(; // reconstructed and callable

As you can see, if we have several functions which need different arguments, we have to be careful. This is similar to an observer pattern in the way commonly implemented in C# for instance, where several observers subscribe to the dispatcher, and when they receive data, the observers have to handle the payload and decide whether they can use that message. Here it is the same. The most scalable option I've found is to have two stable parameters, one for functions and one for their arguments a simply send it both in arrays. Then when the event occurs, send all the arguments to all the functions and let them handle it.

A side note about classes

Be aware that the above-described approach will not work if you use classes. Although from the maintainability and readability perspective it would have made a perfect sense to use classes and typescript interfaces, it is not possible. The stringify method can turn to a string only those values it has access to directly. However, when you define something as a class method, it is attached merely to the object's prototype. It does not directly exist on the object itself.

This article has been originally published on

Discussion (6)

Editor guide
johnkazer profile image
John Kazer

Are there any security issues?

elisiondan profile image
Daniel Charvát Author

The JSONfn uses eval to rebuild the function, so I'd definitely not use that for user's input.

pclundaahl profile image
Patrick Charles-Lundaahl

This was my first thought, as well.

alekseiberezkin profile image
Aleksei Berezkin

Passing serialized functions around may be not secure. It's better to define all needed functions inside the worker.

elisiondan profile image
Daniel Charvát Author

I generally agree. However, I'm currently working on a reusable Vue component that offloads heavy calculations to workers. I'm aiming at providing a simple way to pass additional evaluators, functions, so that anyone who uses the component can easily extend it's function without having to manually play around with workers.

For internal development, definitely, I'd define everything there too.

luistak profile image
Luís Takahashi

Woow nice article!

There is also this library that help creating workers from files