ExploreOurteamtrainingCourses (3)

CoffeeScript leverages the beautiful features and syntax of Ruby, Python, and Haskell to make JavaScript easier to write. CoffeeScript is one of the many popular languages (like TypeScript and Elm) that transcompile into JavaScript. This guide will cover how to install and use CoffeeScript.

Installation

CoffeeScript runs in a Node.js environment. The objective of CoffeeScript is to provide identical features to JavaScript (but with a better syntax). Here is how to install CoffeeScript on Windows and Mac:

MacOS
Node.js and npm are needed to install CoffeeScript within Terminal. CoffeeScript can be installed by running

This installs CoffeeScript globally. A local install is sometimes required when a program is to be compiled elsewhere. The code for a local install is:

Windows
The installation process on Windows is simpler. The installer on the Node.js website has simple steps one can follow to install Node.js. After completion, the following command will install CoffeeScript globally:

To check whether it has been installed properly, we can use :

CoffeeScript Command Line Intro

On the command line, there are multiple flags/commands that will make it easier to work with CoffeeScript. Some of them are:

A) –no-header

This can be declared before the code is written in order to avoid Generated by CoffeeScript header.

B) -c, –compile

The compile command is used to compile CoffeeScript files to equivalent JavaScript files. The JavaScript file retain the name of the CoffeeScript files. For example:

The command above takes CoffeeScript files from src and outputs them as JavaScript files in lib.

C) -m, –map

This is used to map the generated JavaScript file to the source file. When the code is deployed by the client, debugging the code might become cumbersome because the code is in JavaScript and without proper line numbers and breakpoints. The map function generates the equivalent CoffeeScript code in the developer tool provided the source URL is provided with the JavaScript to enable mapping.

D) -i, –interactive

The command launches an interactive shell from where code snippets can be compiled. This can also be done by typing in coffee in the terminal.

E) -w, –watch

The watch command is used to compile into JavaScript every new CoffeeScript that is generated. The command has its limitations. It cannot modify folders added to the coffeescripts folder. It can only modify files.

The commands compile and watch are used in conjunction to compile to and communicate the changes to the respective CoffeeScript, like so:

The -o or –output is used to write into the specified directory the generated JavaScript files.

Variables in CoffeeScript

CoffeeScript’s syntax is simpler than JavaScript. This includes removal of certain keyword declarations from the syntax as seen below.

Variables are declared without the var keyword. For example:

Strings, Attached

Strings are declared in a similar manner to variables, except quotes are used:

Strings can be concatenated with the help of ‘+’ symbol between the strings, like so:

Functions

Functions can be used with a special -> symbol. The symbol by itself defines an empty function. This help to make the code shorter, as the snippet shows:

A function in CoffeeScript

The compiled JavaScript code is as below:

Compiled function in CoffeeScript

The example above shows how CoffeeScript reduces the possibility of syntactic errors when JavaScript code is written, while it retains the way they are called with parentheses.

Arrays, Slice and Splice

Arrays are declared in various forms in CoffeeScript. Some of them are show below.

The elements can be inline:

Or in separate lines:

The commas between elements can also be removed.

Arrays can also be sliced or spliced if necessary. Concretely, this means that new array segments can be formed from the arrays, like so:

If two dots are used, the numbers are included while three dots within the array means the numbers will not be included

The generated array is:

Objects

Objects in CoffeeScript are defined in a nearly identical manner. The only distinction is that the braces in Coff
eeScript are implicit :

The compiled JavaScript is:

CoffeeScript recognizes and actively differentiates between the objects.

Another feature in CoffeeScript (around objects) is that it can detect keywords like class without the need to declare them as separate strings within the declaration. The example below shows how this is done:

Class declaration in CoffeeScript

The compiled JavaScript code is:

Class Declaration in JavaScript

(Un) Conditional Love

Most CoffeeScript conditional statements do not require parentheses, or any brackets for that matter.

Splats is a concept that is adopted from Ruby and lets one declare multiple arguments in a function, when the number of arguments is not fixed. An example is shown below:

Splats in CoffeeScript

The corresponding JavaScript is:

Comprehensions

For loops are written in the way of comprehensions, which can within themselves confine objects and arrays. For in is used to iterate through the arrays, and for of is used for objects to to the same effect as shown below:

For Loop in CoffeeScript

The use of comprehensions makes the code readable and compact.

Freedom of Expression

Another feature of CoffeeScript is that all written code is considered to be an expression. This means that even when there is no explicitly defined “return” function in the code, values can be returned from those expressions. For example:

An expression in CoffeeScript.…

Compile into the JavaScript below:

….….compiles into JavaScript with return functions.

CoffeeScript, for some, is syntactical sugar. But it can make writing thousands of lines of JavaScript much easier for developers. Initially, it might take some time getting used, but the functionality gained in return makes it worth the time invested in mastering it.

Recommended Reading:

  1. A Little Reading
  2. Another Beginners Guide
Mayank Bhardwaj
Mayank writes on a wide variety of technology topics.
0
CoffeeScript

Comments