CoffeeScript, the Other JavaScript
If you have been programming JavaScript for a while you may or may have not found yourself coming across funny little languages with “script” as the suffix. Well, let me be the first to tell you that is not an anomaly and it is very real. As you first began to learn JavaScript, and may have found it a bit difficult to grasp at first. Well, what these languages are here to do is simplify the task at hand while giving you the same outcome as native JavaScript. The only thing needed to run these types of not so distant “cousins” of JavaScript is a compiler that returns the code to raw JavaScript.
One example is CoffeeScript. This is pretty much just JavaScript with syntax that resembles and models that of python and ruby. It compiles as clean JavaScript and also passes JSLint, which is a JavaScript quality tool in which you can enter your own code and test.
The benefits are lightweight syntax, class based inheritance, and concise function declarations. But there are some downfalls. The learning curve can be a bit steep in order to pick it up and use with efficiently. And it can be a bit difficult to debug so it isn’t an optimal starting point for someone that is looking for a crutch.
To get started using CoffeeScript you will need to install the command line utility that runs under node.js. Only issue is that if you are running Windows, which I’m sure many of you are, there is no easy or straight forward way to get node.js but there are workarounds. They do make a few Different compilers available to download and help out with this issue.
Whitespace
One of the benefits to CoffeeScript is making JavaScript a bit simpler and more compact; which helps speed up load time. One way it carries out this task is by the use of whitespace. Those that are familiar Python already know how this works but those of you that aren’t will see the benefit once thrown into a larger scale project. First and foremost, there is no longer a need to end every line with a semi-colon. Once the line is ended this is interpreted to be an “End” for those VB guys/gals. For example:
This can seriously reduce the repetition of terms such as var,”;” and complete declarations of the variables themselves. To add to the simplicity, you no longer need to us the curly braces “{ }” to signify the beginning and ending of a block of code. Also “borrowed” from Python, indentation is used to signify this same action of enclosing blocks of code, for example:
Operators
Another cool feature is that it converts some operators to a more readable alternative, such as:
Is maps to ===
Isn’t and != maps to !==
== maps to ===
And maps to &&
Or is mapped to ||
Not compiles to !
Conditional
Ternary operator
An addition to the collection is the keyword, unless. The function is the opposite of that of the if keyword EX:
Switch Statements
With switch statements we begin with none other than, yes, and the switch keyword. But that is where the similarities end. Now, instead of having to use the keyword case and then put the value and semi-colon, you can now just write when keyword, the value and the then keyword with the statement follows. We can also exclude the break to jump out of the code.
Basic Loops and Looping Arrays
Looping statements are our bread and butter whether it looping through an array or nodes in a DOM. You still get the basic loops as while, for and do-while.
Functions
Functions can be one of the best improvements in CoffeeScript. All that is needed to create and use a function is to define it and list parameters. From there you can jump right into the body of the given function and work your magic like so:
Embedding JavaScript
As you may have realized, if you have to for any reason refer back to using raw JavaScript, this is not as straight forward as just writing and hope it works. You have to remember that all the code you write here will be passed through the CoffeeScript compiler. But do not fret, this can be fixed by passing the raw JS encapsulated within backquotes, backticks, like so:
Libraries
Before you start freaking out because you cannot find any CoffeeScript specific libraries, don’t worry. You can use any third party JavaScript library that you can find.
Well, that will conclude our Introduction into the new and improved CoffeeScript. I know some will feel resistant towards changes, but for those of you that look forward to progression, keep practicing and keep up the good work.
coffeescript.zip
One example is CoffeeScript. This is pretty much just JavaScript with syntax that resembles and models that of python and ruby. It compiles as clean JavaScript and also passes JSLint, which is a JavaScript quality tool in which you can enter your own code and test.
The benefits are lightweight syntax, class based inheritance, and concise function declarations. But there are some downfalls. The learning curve can be a bit steep in order to pick it up and use with efficiently. And it can be a bit difficult to debug so it isn’t an optimal starting point for someone that is looking for a crutch.
To get started using CoffeeScript you will need to install the command line utility that runs under node.js. Only issue is that if you are running Windows, which I’m sure many of you are, there is no easy or straight forward way to get node.js but there are workarounds. They do make a few Different compilers available to download and help out with this issue.
Whitespace
One of the benefits to CoffeeScript is making JavaScript a bit simpler and more compact; which helps speed up load time. One way it carries out this task is by the use of whitespace. Those that are familiar Python already know how this works but those of you that aren’t will see the benefit once thrown into a larger scale project. First and foremost, there is no longer a need to end every line with a semi-colon. Once the line is ended this is interpreted to be an “End” for those VB guys/gals. For example:
Code Block
javascript.js
Code Sample ComparisonCars = [Ford, Dodge, Chevy, Toyota, Honda]
Title = “My Dealership”
//JavaScript equivalent
Var Car, Title;
Cars = [Ford, Dodge, Chevy, Toyota, Honda];
Title = “My Dealership”;
Code Block
javascript.js
Another CoffeeScript vs. JavaScript example.
if redLightslamOnBrakes()
Compared to raw JS
if (redLight){
slamOnBrakes();
}
Another cool feature is that it converts some operators to a more readable alternative, such as:
Is maps to ===
Isn’t and != maps to !==
== maps to ===
And maps to &&
Or is mapped to ||
Not compiles to !
Conditional
Ternary operator
Code Block
javascript.js
Conditional Statement exampleMood = if playingXBOX then isHappy else isSad//compared to JavaScript
Mood = playingXBOX ? isHappy : isSad;
Code Block
javascript.js
Code Block DescriptionjustKeepSwimming() unless tired
keepEating() unless satisfied completely
VS.
if (!tired){
justKeepSwimming()
}
if (satisfied !==completely) {
keepEating();
}
With switch statements we begin with none other than, yes, and the switch keyword. But that is where the similarities end. Now, instead of having to use the keyword case and then put the value and semi-colon, you can now just write when keyword, the value and the then keyword with the statement follows. We can also exclude the break to jump out of the code.
Code Block
javascript.js
Switch Statement Exampleswitch
when blue
PaintScreenBlue()
when red
PaintScreenRed()
when yellow
PaintScreenYellow()
else PaintScreenWhite()
// compared to raw JavaScript
switch (color) {
case blue:
PaintScreenBlue();
break;
case red:
PaintScreenRed();
break;
case yellow:
PaintScreenYellow();
break;
default:
PaintScreenWhite();
break;
}
Basic Loops and Looping Arrays
Looping statements are our bread and butter whether it looping through an array or nodes in a DOM. You still get the basic loops as while, for and do-while.
Code Block
javascript.js
Looping ExampleRestaurants = [‘Fridays’, ‘Applebees’, ‘Chilis’]
for restaurant in restaurants alert restaurant
//compared to JavaScript
var restaurant, restaurants, _i, _len;
Restaurants = [‘Fridays’, ‘Applebees’, ‘Chilis’]
for (_i = 0; _len = restaurants.length; _len < _i; _i++) {
Restaurant = restaurants[_i];
alert(restaurant);
}
Functions can be one of the best improvements in CoffeeScript. All that is needed to create and use a function is to define it and list parameters. From there you can jump right into the body of the given function and work your magic like so:
Code Block
javascript.js
Functions ExampleDriving = (car, model = “corvette”) ->
Alert “you are driving a #{car} #{model} fast!”
Driving ‘ford’, ‘F150’
//compared to JavaScript
Var driving;
Driving = function(car, model) {
if (model == null) {
Model = “corvette”;
}
Return alert(“you are driving a ” + car + model + “fast!”);
};
As you may have realized, if you have to for any reason refer back to using raw JavaScript, this is not as straight forward as just writing and hope it works. You have to remember that all the code you write here will be passed through the CoffeeScript compiler. But do not fret, this can be fixed by passing the raw JS encapsulated within backquotes, backticks, like so:
Code Block
javascript.js
Raw JavaScript InjectionrawJS = `function() {
return someAmazinglyComplexThing;
}`
//This returns
var rawJS;
rawJS = function() {
return someAmazinglyComplexThing;
};
Before you start freaking out because you cannot find any CoffeeScript specific libraries, don’t worry. You can use any third party JavaScript library that you can find.
Well, that will conclude our Introduction into the new and improved CoffeeScript. I know some will feel resistant towards changes, but for those of you that look forward to progression, keep practicing and keep up the good work.
coffeescript.zip
