A taste of CoffeeScript (part 1)

[“

Let’s face it, JavaScript hasn’t always had the best reputation among developers, and since the foundation of CoffeeScript back in 2009 this little language has taken the world of JavaScript\u00a0developers by storm; mainly because it overcomes what some may say is the worst aspect of JavaScript:\u00a0the syntax of its code.<\/p>\r\n

Even though this is a new language you will pick it up really fast mainly because it’s reformulated JavaScript;\u00a0it’s essentially prettier, simpler JavaScript\u00a0.<\/p>\r\n

When writing CoffeeScript don’t forget you are writing code that before being deployed is going to be compiled into JavaScript\u00a0that follows best practices and passes the JSLint test, so that\u2019s one less thing you have to worry about. The output will still be valid JavaScript\u00a0that the browser will not have a problem in reading. CoffeeScript is to JavaScript\u00a0what SASS is to CSS: a way to write simpler and more productive code.<\/p>\r\n

Installing and using<\/h1>\r\n

CoffeeScript is a node.js utility so in order to install it you need to have node.js installed as well as the node package manager. Assuming that you have installed these two packages all you need to do is go to your terminal and install CoffeeScript with the package manager using the code:<\/p>\r\n

npm install -g coffee-script<\/pre>\r\n

Just with that you have CoffeeScript installed on your machine. In order to compile a .coffee file into a JavaScript\u00a0file you need to type:<\/p>\r\n

coffee --compile script.coffee<\/pre>\r\n

This will compile the file script.coffee<\/em> into script.js<\/em> in the same directory but will only do it when you run the command, if you want it to compile in every change you make in the coffee file you need to add the –watch before the compile:<\/p>\r\n

coffee --watch --compile script.coffee<\/pre>\r\n

With this added your JavaScript\u00a0will be compiled every time you make a change to your .coffee file.<\/p>\r\n

<\/p>\r\n

Variables<\/h1>\r\n

When writing a JavaScript\u00a0variable we have to prepend the var keyword, with CoffeeScript that keyword is gone and you can just type out the variable and assign it to something. Another thing to look out for is that CoffeeScript uses a lot of indentation methods to avoid semi-colons and for the language to understand that the variable statement is complete you just need to move to a new line:<\/p>\r\n

age = 21
country = \"Portugal\"<\/pre>\r\n

In JavaScript\u00a0you would have to type something like:<\/p>\r\n

var age = 21;
var country = \"Portugal\";<\/pre>\r\n

It’s a small example but you can begin to see how powerful CoffeeScript is when it comes to simplifying your code.<\/p>\r\n

<\/p>\r\n

Logical and comparative operators<\/h1>\r\n

Remember all that time you spent memorizing JavaScript\u00a0operators? Remember wondering why you needed to use === instead of just using is? Well CoffeeScript also takes care of that. It offers some really nice aliases for the operators:<\/p>\r\n

Comparison operators<\/h2>\r\n

Logical operators<\/h2>\r\n

<\/p>\r\n

If statements<\/h1>\r\n

Another thing CoffeeScript gets rid of is curly braces. It uses the indenting method to declare when you are inside a statement, if<\/em> statements work like JavaScript\u00a0but you don’t need the curly braces or the parenthesis; just indent the code you wish to run when the statement is true:<\/p>\r\n

if work > 24 and sleep < 8\r\n vacations()\r\nelse \r\n work()\r\n<\/pre>\r\n

will compile into JavaScript as:<\/p>\r\n

if (work > 24 && sleep < 8) { \r\n vacations(); \r\n} else { \r\n work();\r\n} \r\n<\/pre>\r\n

I hope that you are starting to see the benefits of CoffeeScript just with these simple demonstrations of how clean it can make your code, and cleaner code means more maintainable code.<\/p>\r\n

<\/p>\r\n

Looping through arrays<\/h1>\r\n

Looping through arrays is one of the things you are bound to do in every JavaScript\u00a0app you write and the syntax for looping through them in JavaScript\u00a0isn’t the simplest or the cleanest, I think this is where CoffeeScript really shines. To loop through an array we use a for..in loop , like so:<\/p>\r\n

tasks = ['Design','Code','Groceries'] \r\nfor task in tasks \r\n alert task\r\n<\/pre>\r\n

All this piece of code will do is read all the things in the array and then alert then one by one, just to make things even simpler you can even write the for…in loop in one line, like so:<\/p>\r\n

tasks = ['Design','Code','Groceries'] \r\nalert task for task in tasks \r\n<\/pre>\r\n

It’s simply far more readable and maintainable than the vanilla JavaScript, speaking of which the code produced by CoffeeScript for those two lines would be:<\/p>\r\n

var task, tasks, _i, _len;\r\n\r\ntasks = ['Design', 'Code', 'Groceries'];\r\n\r\nfor (_i = 0, _len = tasks.length; _i < _len; _i++) {\r\n task = tasks[_i];\r\n alert(task);\r\n}<\/pre>\r\n

<\/p>\r\n

While loops<\/h1>\r\n

While loops are also very useful when constructing your JavaScript\u00a0app and CoffeeScript doesn’t fail to make this easier to read and write as well, for example:<\/p>\r\n

while sleep < 8\r\n sleep()\r\n<\/pre>\r\n

Or you can write it all on one line if you prefer:<\/p>\r\n

while sleep < 8 then sleep()<\/pre>\r\n

Or:<\/p>\r\n

sleep() until sleep > 8<\/pre>\r\n

In pure JavaScript\u00a0this would translate to:<\/p>\r\n

\/\/then\r\nwhile (sleep < 8) {\r\n sleep();\r\n}<\/pre>\r\n

Or:<\/p>\r\n

\/\/until\r\nwhile (!(sleep > 8)) {\r\n sleep();\r\n}<\/pre>\r\n

<\/p>\r\n

Functions<\/h1>\r\n

Functions are also another vital part of any programming language and even though functions in JavaScript\u00a0aren’t as messy as some other parts CoffeeScript simplifies this to the max as well, a simple function that takes someone’s name and then alerts it can be written like this:<\/p>\r\n

sayHi = (name) -> \r\n return \"Hello \" + name\r\nalert sayHi('Sara')\r\n<\/pre>\r\n

All you do is name the function, in this case the functions is called sayHi,<\/em> and then after the equal sign you need to specify the parameters. Here name<\/em> is the single parameter, after the base of our function is defined we need to type -> followed on the next line by what we want the function to do so that CoffeeScript knows we are inside the function. In this case all I want it do is return \“Hello\” and then the name of the person and lastly I use a simple alert to call the function with the name. We can also write this in one line eliminating the enter and indenting just by writing what the function will do after the -> :<\/p>\r\n

sayHi = (name) -> return \"Hello \" + name\r\n<\/pre>\r\n

This little snippet of code will be compiled into the following JavaScript:<\/p>\r\n

var sayHi;\r\n\r\nsayHi = function(name) {\r\n return \"Hello \" + name;\r\n};\r\n\r\nalert(sayHi('Sara'));\r\n<\/pre>\r\n

Of course this was a really simple function but as you can see it saved us 3 lines of code and of course in the JavaScript\u00a0we could just name the variable as we declare the function like so:<\/p>\r\n

var sayHi = function(name) {\r\n return \"Hello \" + name;\r\n};\r\n\r\nalert(sayHi('Sara'));\r\n<\/pre>\r\n

The examples I have given here are what CoffeeScript compiles to and even though in most instances there are easier ways to type something out, all the JavaScript\u00a0compiled is valid and semantic.<\/p>\r\n

<\/p>\r\n

Conclusion<\/h1>\r\n

This is just the beginning of what CoffeeScript can give you, when things start getting more complex this little language will give you a lot of leverage when compared to JavaScript, less code you need to write , more human readable code, and more maintainable as well, so that you can come back to a website a year later and know what is going on in that JavaScript.<\/p>\r\n

Stay tuned for the second part of this series where I will show you how to combine CoffeeScript with jQuery and LocalStorage in order to create a simple contact list app.<\/p>\r\n

<\/p>\r\n

Have you used CoffeeScript to simplify JavaScript? What parts of CoffeeScript do you prefer to Javascript? Let us know in the comments.<\/strong><\/em><\/p>\r\n

Featured image\/thumbnail, coffee image<\/a> via Shutterstock.<\/em><\/p>”]