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.

npm install --global coffeescript

Coding In CoffeeScript

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

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"
const name = "Mar"
name = "Mary" //This will give a strict mode error.

CoffeeScript

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

name = "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!")
}

CoffeeScript

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

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.

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'}
}
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'
VIPList = [
'Mark Henderson'
'James Dean'
'Anna Banana'
'F
reddy Krueger']

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)
}
const sayHello = greeting => console.log(greeting) 

CoffeeScript

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

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.

Software Engineer focused on Full Stack development with MERN stack and Ruby experience. Interested in sharing my learning journey with aspiring developers.