January 27, 2021
Hot Topics:

CoffeeScript: Create Optimized JavaScript Code Without Touching JavaScript

  • By Jason Gilmore
  • Send Email »
  • More Articles »

Over the course of the past 15 years, JavaScript has evolved from an annoying language used to scroll messages in the browser status bar to an annoying language responsible for powering significant parts of the Web. While libraries such as jQuery have certainly lessened the pain incurred when integrating JavaScript into a website, there remains a great deal of angst when it comes to the only language with the dubious distinction of having a book written about it that focuses only on "the good parts".

In 2009 an enterprising programmer named Jeremy Ashkenas began an attempt to remove all of the pain incurred when writing JavaScript in a most interesting way: by creating another programming language which is compiled into… JavaScript. Dubbed CoffeeScript, developers can use this heavily Ruby- and Python-influenced language to write programs which compile into succinct and highly optimized JavaScript.

Installing CoffeeScript

CoffeeScript can be installed through the Node Package Manager, a command-line Node.js package management tool. Therefore you'll need to first install Node.js and Node Package Manager (see the instructions on their respective websites for more information). Once installed, run the following command to install CoffeeScript:

$ npm install coffee-script

Once installed, make sure everything is working by invoking the coffee command with the -v option:

$ coffee -v
CoffeeScript version 1.0.1

Creating Your First CoffeeScript Program

With CoffeeScript installed, it's time to explore the language syntax and write your first program. Open up your IDE and create a new file named hello.coffee. Add the following contents to it:

hello = "1 + 1 = #{1 + 1}"

This is a simple but compelling example of just one convenience CoffeeScript has to offer over JavaScript. Were you to want to intertwine dynamic data (such as a mathematical calculation) with a string, JavaScript requires you to concatenate the disparate data using a plus sign, a practice which is often error prone and ugly. In contrast, CoffeeScript allows you to embed the dynamic data into the string using the same syntax used within Ruby. Additionally, note the lack of line-ending semicolons. While you can optionally include them if you choose to do so, the lack of this requirement is just one of many Python-inspired features enjoyed by CoffeeScript users.

Now compile the hello.coffee into JavaScript using the following command:

$ coffee -c hello.coffee

A file named hello.js will be created and saved into the same directory as the hello.coffee script. Open it and you'll see the following JavaScript code:

(function() {
  var hello;
  hello = "1 + 1 = " + (1 + 1);

Reference the hello.js file in an HTML file (see below) and load it into the browser. You'll be greeted with the alert box presented in Figure 1.

Creating Dynamic Output with CoffeeScript
Figure 1. Creating Dynamic Output with CoffeeScript

You're probably already wondering how to forego the additional step of having to compile the CoffeeScript file into JavaScript in order to test the code in the browser. Use the coffee command's --watch option, and the file will automatically be compiled every time it is saved:

$ coffee --watch -c hello.coffee
15:04:59 GMT-0400 (EDT) - compiled hello.coffee
15:05:16 GMT-0400 (EDT) - compiled hello.coffee

CoffeeScript Functions and Arguments

CoffeeScript offers a few great shortcuts for defining and executing functions and methods. The arrow operator (->) is used when defining a function, and is prefaced by the argument list. Further, when executing a function or method, you can forego encapsulating the arguments within parentheses. The following Google Maps API snippet demonstrates both of these features:

handler = () -> map.panTo marker.getPosition()

google.maps.event.addListener marker, 'click', handler

Once compiled, the resulting JavaScript looks like this:

handler = function() {
  return map.panTo(marker.getPosition);
google.maps.event.addListener(marker, 'click', handler);

Originally published on https://www.developer.com.

Page 1 of 2

This article was originally published on May 19, 2011

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date