Macros in JavaScript please

JavaScript doesn't have macros. Various forms of macros have been around for decades in other languages and JavaScript programmers have to struggle along immersed in verbosity without them.

an unless macro

Always start with a simple example: an unless macro is a classic first macro. Suppose we are really tired of writing this

if (!(conditional)) {
  statements
}

If we had macros we could extend the syntax of JavaScript itself by defining an unless macro and we could just write

unless (conditional) {
  statements
}

When JavaScript encounters "unless" in the syntax tree it could expand the macro to the usual negated if statement above. That is, if we had macros in JavaScript.

Currently we have a few choices for writing an unless statement.

Solution 1

Use a text editor snippet. When you type "unless" and press space or tab, the editor expands the unless into

if (!()) {

}

and puts your cursor between the inner parens for you to start typing your conditional. For more complex macros, this makes for bulky code to read and it must all be downloaded by the browser, in the case of browser scripting.

Solution 2

unless(conditional, function() {
    statements;
});

where unless is a function

var unless = function(conditional, statements) {
  if (!(conditional)) {
    return statements();
  }
}

This solution is bulky in this case because of the overhead of the function literals. This solution is easy to debug as JavaScript will report the location of errors intelligibly. I used bits of code like this solution (not for unless, of course!) and it feels like sending functions into a mini framework.

Solution 3

eval(unless("conditional", "statements"))

where unless is

var unless = function(conditional, statements) {
return 'if (!('+conditional+')) {'+
          statements + 
       '}';
}

This almost looks like a macro. Escaping all the quotation marks would be a pain. Having eval run frequently would need avoiding for better performance.

Solution 4

unless (conditional) {
  statements
}

Wow! Looks pretty good. Unfortunately we need to have a server-side program compile this down to JavaScript before serving it to the browser. This is basically the concept behind GWT and many other x-to-JavaScript compilers.

This server-side compiler system is difficult to build and the generated code is difficult to debug. A map from generated code line numbers to source line numbers would help find errors in the source code.

A function wrapping macro

Here is a more practical example. In another article, I wrote about a pattern I use to wrap functions. The pattern looks like this example of adding debugging output to an event library function.

LIB.on = (function() {
  var original = LIB.on;
  return function(element, type, callback) {
    console.log('adding ' + type + ' listener');
    return original(element, type, callback);
  };
})();

If JavaScript had macros we could define a macro wrapBefore and write something short like

wrapBefore(LIB, on, function(element, type, callback) {
  console.log('adding ' + type + ' listener');
});

which would expand to something like

LIB.on = (function() {
  var original = LIB.on;
  return function() {
    (function(element, type, callback) {
      console.log('adding ' + type + ' listener');
    }).apply(null, arguments);
    return original.apply(LIB, arguments);
  };
})();

This wrapping pattern is not something that can be extracted elegantly into a helper function because it involves establishing a closure or passing a reference of the original function into the wrapping function (example).

Conclusion

It would be very helpful if we had macros right in the JavaScript language. The standard ECMAScript language could remain small and developers could add all the domain-specific syntax they want. Versions of ECMAScript after the version with macros would not be necessary (except perhaps to include some common macros in the language for performance.) Fingers crossed for ECMAScript 5th edition.