What is the '()' thing in the compiled code?

Question

Possible Duplicate:
What does this mean? (function (x,y)){…}){a,b); in JavaScript

I have the following JS code from the Canvas documentation:

 for(var i=0;i<4;i++){  
  for(var j=0;j<3;j++){  
    ctx.beginPath();  
    var x              = 25+j*50;               // x coordinate  
    var y              = 25+i*50;               // y coordinate  
    var radius         = 20;                    // Arc radius  
    var startAngle     = 0;                     // Starting point on circle  
    var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle  
    var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise  

    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);  

    if (i>1){  
      ctx.fill();  
    } else {  
      ctx.stroke();  
    }  
  }  
}

I want to turn it into a CoffeeScript code. And here it is:

@draw = ->
  canvas = document.getElementById('canvas')
  ctx = canvas.getContext('2d')

  for i in [0..3]
    for j in [0..2]
      ctx.beginPath()

      x = 25 + j * 50
      y = 25 + i * 50
      radius = 20
      startAngle = 0
      endAngle = Math.PI + (Math.PI * j) / 2
      anticlockwise = if i % 2 == 0 then false else true

      ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)

      if i > 1 then ctx.fill() else ctx.stroke()

Everything works just great, but I have a question regarding the compiled code:

this.draw = function() {
  var anticlockwise, canvas, ctx, endAngle, i, j, radius, startAngle, x, y, _results;
  canvas = document.getElementById('canvas');
  ctx = canvas.getContext('2d');
  _results = [];
  for (i = 0; i <= 3; i++) {
    _results.push((function() {
      var _results2;
      _results2 = [];
      for (j = 0; j <= 2; j++) {
        ctx.beginPath();
        x = 25 + j * 50;
        y = 25 + i * 50;
        radius = 20;
        startAngle = 0;
        endAngle = Math.PI + (Math.PI * j) / 2;
        anticlockwise = i % 2 === 0 ? false : true;
        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
        if (i > 1) {
          _results2.push(ctx.fill());
        } else {
          _results2.push(ctx.stroke());
        }
      }
      return _results2;
    })());
  }
  return _results;
};

So, why does the '()' brackets appear after return _results2; line? It's not a big deal: the code does its work great, but being a little bit perfectionist, I want to know, how to eliminate these round brackets.

UPD: Thank you. Now I understand, what is the '()'. But still, I have a question: why does it appear?

score 2 · Accepted Answer · answered Nov 20 '11 at 02:41

why does it appear?

The function scopes the temporary variable that CoffeeScript creates to store the value of the list comprehension (here, _results2). CoffeeScript always creates such a function when a loop is a list comprehension.

The function isn't strictly necessary, but it makes the compiled JavaScript more 1:1 with the CoffeeScript source (one of CoffeeScript's goals). For instance,

arr = (i for i in [1..3])

compiles to

arr = (function() { ... })();

whereas without the extra function, you would instead have something like

var _results2 = [];
for (...) { ... }
arr = _results2;

score 0 · Answer 2 · edited May 23 '17 at 11:55

0

It's defining the function and then immediately calling it. It really has nothing to do with CoffeeScript per se, but here's at least one more reference with more information about hows and whys (the naming part in this kind of usage is purely optional):

Can I name a javascript function and execute it immediately?

edited May 23 '17 at 11:55

Community

1
1

answered Nov 20 '11 at 00:04

Marius Kjeldahl

6,830
3
33
37

score 0 · Answer 3 · answered Nov 20 '11 at 00:04

0

That's a self-invoking function.

It defines a function: (function() { ... }) and then calls it with no parameter ().

The function returns the value add to the array return _results2;

answered Nov 20 '11 at 00:04

SLaks

868,454
176
1,908
1,964

apaderno · Answer 4 · 2011-11-20T00:39:49.223

The code is defining an anonymous function object, that is then called.

The code you should look at is the following one:

   (function() {
      var _results2;
      _results2 = [];
      for (j = 0; j <= 2; j++) {
        ctx.beginPath();
        x = 25 + j * 50;
        y = 25 + i * 50;
        radius = 20;
        startAngle = 0;
        endAngle = Math.PI + (Math.PI * j) / 2;
        anticlockwise = i % 2 === 0 ? false : true;
        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
        if (i > 1) {
          _results2.push(ctx.fill());
        } else {
          _results2.push(ctx.stroke());
        }
      }
      return _results2;
    })()

The first lines define the function object, which is then called with () in the last line.

It is similar to what done with jQuery plugins, where the code using $ is wrapper with (function ($) { /* … */ })(jquery).

What is the '()' thing in the compiled code?

4 Answers4