CoffeeScript in Business - Five Things You Can Do with JavaScript

From the translator : The article has several JavaScript nuances that may be interesting to those who are far from CoffeeScript

Like all programmers, I am cautious about CoffeeScript . How can a little syntax sugar justify the extra step of compiling?

But, after I played with CoffeeScript, just a few days, I realized I would never go back. Syntactic sugar is just the beginning. I started writing code faster, and with fewer errors, because it became much cleaner . CoffeeScript helps you stick to a good style of writing code. Below I will give a few examples on Javascript and describe their more elegant solution using CoffeeScript.
')

1. Declaring Variables

Many newbies think that var x means: “I declared a variable named X”. In fact, var only prevents X from roaming outside the current region. If you write:

x = 'Hello from the JavaScript Nation!';

and you will not use var , then X will automatically become global. Make a similar error in two parts of your application, and one global variable will overlap the other, creating an error.

Even experienced pros often make a similar mistake, especially when variables are declared by a clutch: var a = 1, b = 2 and assign a new value within the environment, while var a = 1; b = 2 assigns a value to global variable b .

From the translator : For those who doubt that they can confuse "," and ";" I will give another example: var a = b = 3

CoffeeScript path

With CoffeeScript, all variables automatically fall into the current environment. When you write:

x = 'Welcome to CoffeeScriptville!'

You can be sure that you have not redefined any global variable. Moreover, thanks to the CoffeeScript compiler, X automatic is limited to the current file.

2. Other this

One of the most common sources of confusion in javascript is the keyword this . You make a simple call:

 tinman.prototype.loadBrain = function() { this.brain = 'loading...'; $.get('ajax/brain', function(data) { this.brain = data; }); }; 

but you get an error, because, inside the data call, this points to not the same object that he pointed to, outside of it.

CoffeeScript path

First, the this keyword has an alias @, so that there would be a visual difference from ordinary variables.

Secondly, in order to transfer the variables @ to a related function, you must use => (bold arrow), unlike the usual symbol ->, which declares a function:

 tinman::loadBrain = -> @brain = 'loading...' $.get 'ajax/brain', (data) => @brain = data 

3. Reduced conditions

The ternary operator holds a special place in JavaScript: Unlike other conditional structures ( if , switch ), it returns a result. This means that the programmer has to choose between the brevity of a ternary operator:

 closestEdge = x > width / 2 ? 'right' : x < width / 2 ? 'left' : 'center'; 

or logical chain:

 if (x > width / 2) { closestEdge = 'right'; } else if (x < width / 2) { closestEdge = 'left'; } else { closestEdge = 'center'; } 

CoffeeScript path

All conditions in CoffeeScript return a result. This gives us a clear second approach, without meaningless repetition:

 closestEdge = if x > width / 2 'right' else if x < width / 2 'left' else 'center' 

4. Asynchronous functionality

The popular test “Do you know JavaScript well?” Contains a task:

 for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); }, 0); } 

the result will be:
4
4
4
Why? Even if the timeout in setTimeout is 0, this function will work only after the end of the cycle. And when the function is executed, i will be equal to 4th. In order to capture every value of i, you have to do:

 for (var i = 1; i <= 3; i++) { (function(i) { setTimeout(function() { console.log(i); }, 0); })(i); } 

CoffeeScript path

Although, CoffeeScript does not automatically capture variables in a loop, it does provide an opportunity to make a brief capture:

 for i in [1..3] do (i) -> setTimeout (-> console.log i), 0 

the result will be:
1
2
3

5. Repeat, repeat

The code speaks for itself:

 x = sprite.x; y = sprite.y; css = { opacity: opacity, fontFamily: fontFamily }; function(request) { body = request.body; status = request.status; // ... } 

CoffeeScript path

Each fragment above turns into one line:

 {x, y} = sprite css = {opacity, fontFamily} ({body, status}) -> ... 

Conclusion

CoffeeScript is not only more beautiful code, it is about more flexible code. It is about making sure you make the right code the first time, and easily change it in the future.

If you like design patterns and fast interaction, you should give CoffeeScript a chance. Even if, in consequence, you decide that it is not for you, in any case you will begin to better understand JavaScript.

(Of course, if you upgrade to Rails 3.1, you will not have a choice)
From the translator : In order not to mislead anyone, I say, this is a joke! Of course there is a choice, just remove the line from the Gemfile.

From the translator : Congratulations to all RoR developers with the release of Rails 3.1 beta 1 . Everything is not exactly translated, please send in the LAN.