CoffeeScript — The Easier Javascript

Introduction

Getting Started With CoffeeScript

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

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

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

name = "Mar"

Calling the variable name here will return “Mar”.

Conditional Operations

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 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

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

     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'
'F
reddy Krueger']

This implementation method eliminates separation by commas.

Functions

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

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store