CoffeeScript — The Easier Javascript

Introduction

This guide is designed for individuals looking to get into programming but has little to no coding experience. Although CoffeeScript is considered a “dead” language, I’ve selected it as the core topic of this article due to its easy-to-read and easily transferrable syntax. Another bonus of CoffeeScript is, according to the CoffeScript website, it's just javascript! That means it can be utilized with almost any javascript library and compiles directly into JS. What that essentially means is- it can be used in place of Javascript and will serve as an easier way of implementing code for beginner programmers.

Getting Started With CoffeeScript

Reference to the CoffeeScript documentation can be found here.

In order to get started with CoffeeScript, we will need to download the Javascript compiler to the CLI. To ensure that this works, you will need to ensure that we have an up to date version of Node.js. Once verified, run the following command to enable the compilers:

npm install --global coffeescript

This will allow us to compile our .coffee files into Javascript utilizing the Coffee command. Here is one of the few examples listed on the CoffeeScript documentation website:

• Compile a directory tree of .coffee files in src into a parallel tree of .js files in lib:
  coffee --compile --output lib/ src/

For more examples on getting started check this out.

Coding In CoffeeScript

This tutorial will touch base on basic syntactical concepts of Javascript and the CoffeeScript equivalent.

The main distinction that is drawn when analyzing CoffeScript code is the lack of variable declaration. Let’s declare a “name” variable in both Javascript and CoffeeScript:

Javascript

There are many ways of declaring a variable in Javascript based on whether or not the variable will be reassigned. Under the ES6 Javascript syntax, the const keyword denotes a variable that cannot be reassigned and the let keyword allows us to reassign the variable at any given point.

let name = "Mar"
name = "Mary"

Calling the variable name here will return “Mary”.

const name = "Mar"
name = "Mary" //This will give a strict mode error.

Calling the variable name here will return “Mar”.

CoffeeScript

The syntax here is nice and easy- just simply state the name with no declaration.

name = "Mar"

Calling the variable name here will return “Mar”.

Conditional Operations

An integral part of programming is the use of conditional operators. These operators will run/return different outputs given criteria. For Example, if we were using conditional logic to check if a variable is true and output a message, we would run the following line of code in Javascript:

Javascript

let check = true;
if (check === true) {
alert("The condition is met!")
}

We first declared a variable and set the value to true, following that we utilized an “if” statement to check the value of our variable and alert a message if the value is true.

CoffeeScript

check = true;
alert("The condition is met!") if check

Same logic here with differing syntax. Additionally, we can utilize CoffeeScript’s syntax to check if a variable exists through the use of a “?” at the end of our conditional:

alert("name is declared") if name?

This will only alert the user if the name variable has been declared, otherwise, it will skip over this line of code.

Creating Objects and Arrays

An Object is an abstract data type that will allow us to include multiple properties into a single variable. Let’s create a contact book object utilizing Javascript and CoffeeScript.

An Array is a data structure that allows for storing a collection of elements. We will create an exclusive VIP list with attendee’s names.

Javascript

Object Implementation:

const addressBook = { contact1: {name: 'mark', email: 'mark@example.com', phone: '000-000-0000'}, contact2: {name: 'mary', email: 'mary@example.com', phone: '111-111-1111'}
}

The nested object above has two contacts within in, their names, emails, and phone numbers. This syntax may be hard to read and decipher for beginner programmers.

Array Implementation:

const VIPList = ['Mark Henderson', 'James Dean', 'Anna Banana', 'Freddy Krueger']

CoffeeScript

Object Implementation:

     addressBook = 
                   contact1: 
                     name: 'mark'
                     email: 'mark@example.com'
                     phone: '000-000-0000'
                   contact2: 
                     name: 'mary'
                     email: 'mary@example.com'
                     phone: '111-111-1111'

CoffeeScript allows us to make an easier-to-read object through the utilization of indentation.

Array Implementation:

VIPList = [
'Mark Henderson'
'James Dean'
'Anna Banana'
'Freddy Krueger']

This implementation method eliminates separation by commas.

Functions

Functions are self-contained blocks of code that execute certain functions of applications. Prior to the arrow function notation brought about by ES6, CoffeeScript created the first arrow-function utilizing a single arrow symbol.

Javascript

const sayHello = function(greeting) {
        console.log(greeting) 
}

ES6 Implementation:

const sayHello = greeting => console.log(greeting) 

Once this function is called, it will log the greeting to the console.

sayHello(‘Hello!’) #=> “Hello!”

CoffeeScript

sayHello = (greeting) -> console.log(greeting)

This is quite similar to the ES6 Javascript implementation of arrow functions.

Just like that, we have the basic concepts of CoffeeScript down and can start utilizing it.

Summary

The constant improvements and evolution of the Javascript platform have resulted in the depreciation of the CoffeeScript framework. That being said, I believe that CoffeeScript has significant value to programmers who are just getting started. The framework allows for the utilization of Javascript in a more readable and easy-to-understand manner. Javascript’s ES6 implementation has adopted various CoffeeScript operations (such as the arrow function discussed above). This makes CoffeeScript syntax easily transferable once prepared to delve deeper into Javascript.