How to add syntactic sugar in javascript (or should you)

Question

So I was setting out to build a simple library that would swap "screens" in and out of a viewport for a full screen web app.

I created a basic interface to support this:

function Swap(element_in, element_out, animation_in, animation_out)

When I finished, I thought, hey this is javascript -- I wonder if I can create some crazy syntax that reads like a sentence. My goal was this:

Swap(element_in).InBy(animation_in).AndSwap(element_out).OutBy(animation_out)

ie

Swap('screen1').InBy('slidingitoutleft').AndSwap('screen2').OutBy('slidingitoutright');

After some reading I found a post here on SO (which I can't seem to find now) which allowed me to achieve this (with some pitfalls, namely, you can call those methods in any order and you have to store some variables). This interface looks like this:

function Swap2(element_in) {
  var _element_in, _element_out, _animation_in, _animation_out;

  // assign param
  _element_in = element_in;

  this.InBy = function(animation_in) {
    _animation_in = animation_in;
    return this;
  }

  this.AndSwap = function(element_out) {
    _element_out = element_out;
    return this;
  }

  this.OutBy = function(animation_out) {
    _animation_out = animation_out;

    // Do the swap!
    return Swap(_element_in, _element_out, _animation_in, _animation_out);
  }

  return this;
}

After this, I thought pretty cool but I bet I can do better. I came up with this (try not to throw up):

function Swap3(element_in) {
  return {
        InBy: function (animation_in) {
            return {
                AndSwap: function (element_out) {
                    return {
                        OutBy: function (animation_out) {
                            return Swap(element_in, element_out, animation_in, animation_out);
                        }
                    };
                }
            };
        }
    };
}

This last one forces the methods to be called in the right order, and doesn't hang on to any parameters - it just passes them along.

I made a codepen just so you can see it actually works (although admittedly I've only been playing with this in Chrome): http://codepen.io/andrewleith/pen/emltv

So, my question: am I going to javascript hell for this? Is this A Good Thing? Or A Very Bad Thing? Or is it just preference?

Andrew

Answer 1

am I going to javascript hell for this?

No, you're going to JavaScript hell for capitalizing non-constructor functions ;)

Anyways, both your implementations work, but consider using something more standard-looking:

swap(element_in, {
    inBy: animation_in,
    andSwap: element_out,
    outBy: animation_out
});

Answer 2

I think I don't see the value. It looks like an english sentence, sure, but how important is that? There are more characters to type and more data to send to the client (and I doubt this minifies very well). If it were possible to do different things for each step, I could see it being more beneficial, but I don't know that I prefer it to a normal function call with the four steps being necessary in the same order. The code, with the pyramid hell you've got, is definitely harder to read.

Otherwise, there's nothing technically wrong with the approach.

================== Edit

To avoid the pyramid, you can do the following. this would also give you control over what following steps are possible at each step.

function Swap3(element_in) {
    var _element_in, _element_out, _animation_in, _animation_out;

    _element_in = element_in;

    return {
        inBy: inBy
    };


    function inBy(animation_in) {
        _animation_in = animation_in;

        return {
            andSwap: andSwap
        };
    }

    function andSwap(element_out) {
        _element_out = element_out;

        return {
            outBy: outBy
        };
    }

    function outBy(animation_out) {
        _animation_out = animation_out

        return Swap(_element_in, _element_out, _animation_in, _animation_out);
    }

}