Friday, July 6, 2012

JSON: serialize and deserialize functions in JavaScript

In my Linq2IndexedDB project, I take advantage of the web workers to do all the filtering that the IndexedDB API doesn’t allow (multiple filters, like, inArray, …). For all these filters I have an “isValid” method which determines if the data satisfies the condition. So when I want to use these methods in my background worker, I need to make sure I can call them. For that I have 3 possibilities

  1. Add a copy of all the filters in my background worker file
  2. Include the file where my filters are defined
  3. Serialize and deserialize the “isValid” functions

The first one wasn’t an option for me, because i wanted to keep all filter logic at one place. The second one was an option, but I didn’t want to use multiple JavaScript files for my library. And an other reason why I don’t like the first 2 is because developers would have to change my library if they want to add additional filters. So this left me only with the third possibility.

For this I’ve done some research. I already knew that you could call .toString on a function and this would result into a string representation of the function. And with the Function.call method I would be able to call the function in my background worker. But I didn’t wanted a solution that had to call the Function.call method in the background worker, I wanted to use the .isValid method that was provided in the filter objects. So I dug into the JSON API and found the following solution.

Serialize Objects

The JSON.stringify (the method that turns JavaScript objects into JSON text) accepts 2 arguments. The first argument is the object you want to turn into a JSON text and the second argument accepts a replacer function. This function gets called for every value in the object structure (even for properties in child objects) and accepts a key (name of the property) and a value (the value of the property) argument. The return value of the object is the object that will be stringified. By using this function, I can return the string representation of the function (in case of function) and return the value in the other cases.

   1: JSON.stringify(filters, function (key, value) {
   2:     if (typeof value === 'function') {
   3:         return value.toString();
   4:     }
   5:     return value;
   6: });


deserialize objects


The next thing we want to do, is deserialize the function again. Like the stringify method, the parse method (returns a JSON string into a JavaScript objects) also a callback (reviver) method as second argument. This method also gets called for every key and value for every level of the result. In this callback you can reform generic objects into instances of pseudo classes, strings into dates, strings into functions, …



   1: JSON.parse(filtersString, function (key, value) {
   2:     // reform your objects here
   3: });

Once I have the string representation of the function, I can start rebuilding that function. This is done by creating a new Function Object. The constructor of the Function objects accepts 2 arguments, a list of arguments for the function you want to create and the string representation of the body of the function you want to create.



   1: new Function(arguments, functionBody);

So if we put those 2 together we get the following:



   1: JSON.parse(filtersString, function (key, value) {
   2:     if (value 
   3:         && typeof value === "string" 
   4:         && value.substr(0,8) == "function") {
   5:         var startBody = value.indexOf('{') + 1;
   6:         var endBody = value.lastIndexOf('}');
   7:         var startArgs = value.indexOf('(') + 1;
   8:         var endArgs = value.indexOf(')');
   9:  
  10:         return new Function(value.substring(startArgs, endArgs)
  11:                           , value.substring(startBody, endBody));
  12:     }
  13:     return value;
  14: });


Detecting if the value is a function, is done by checking if the value is a string and starts with the word ‘function’. If this is the case, we will determine the arguments and the function body so we can pass it to the Function constructor. Retrieving the arguments of the new function is done by taking the string value between the first ‘(‘ and ‘)’. Retrieving the function body is done by getting the string value between the first ‘{‘ and the last ‘}’. Passing these 2 values to the constructor of the function will create a new function. This is the value that gets returned in case of a function. In all other cases we just return the value.


Conclusion


By using the stringify and parse method of the JSON API you can provide a generic way to serialize and deserialize your objects. Serializing functions can easily be done by calling the toString method on the function and deserializing a function can be done by using the Function constructor which is present in the JavaScript language.

3 comments:

  1. This would also be a good start to implement the Structured Cloning Algorithm for IndexedDB API.

    ReplyDelete
  2. Hi,

    I've written a JSON extension that also uses the second arguments to stringify/parse, but provides a higher-level hook that lets you easily implement serialization for custom javascript objects.

    By default it handles Dates, RegExps and Functions, check it out: https://github.com/tarruda/super-json

    ReplyDelete
  3. Awesome stuff, thanks for posting this!!! I'm converting XML with inline markup to JSON and use functions to keep it simple but effective. This just solved the serialization and deserialization, very cool.

    ReplyDelete