What is "()" in 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 CoffeeScript code. And here he 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 fine, 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 the brackets '()' appear after the line return _results2; ? It doesn't matter: the code works fine, but as a little perfectionist I want to know how to remove these parentheses.

UPD: Thanks. Now I understand what '()' is. But still I have a question: why does he appear?

Answer 1

why does he appear?

The function spans a temporary variable created by CoffeeScript to store the list comprehension value (here _results2 ). CoffeeScript always creates such a function when the loop is a list comprehension.

The function is not strictly necessary, but makes compiled JavaScript more than 1: 1 with a CoffeeScript source (one of CoffeeScript's goals). For instance,

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

compiles to

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

whereas without an extra function you should instead have something like

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

Answer 2

Defines a function, and then immediately calls it. This really has nothing to do with CoffeeScript as such, but here is at least one more link with additional information about hows and whys (the naming part in this use is exclusively optional):

Can I name a javascript function and execute it immediately?

Answer 3

This is a self-starting function.

Defines a function: (function() { ... }) , and then calls it without a parameter () .

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

Answer 4

The code defines an anonymous function object, which is then called.

The code you should look at is this:

  (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 () on the last line.

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