Beauty of CoffeeScript

Written by Rashmi Yadav on

As we are web developer we mostly write JavaScript day by day in our job. But as a Ruby developer when I look raw JavaScript code I don't like that. I want to write JavaScript in a beautiful way.

CoffeeScript is a beautiful programming language which allows us to write less code like Ruby, Python.

There are lot of great things which we can use in CoffeeScript to write beautiful code which turns into proper JavaScript.

I found some great tricks and useful syntax in CoffeeScript so thought to share them.

Use @ instead of this

Usually we write this to refer object/element

$('.account-link').click ->
  alert($(this).html())

We can use @

$('.account-link').click ->
  alert($(@).html())

Also to call a class instance method we can use @

class Calculation
  sum: (a, b)->
    @print_sum(a+b)

  print_sum: (total)
    console.log("Total is #{total}")

p = new Person
p.sum()

Some useful Operators

CoffeeScript provides operators alias very pretty it feels we are writing English sentence.

is and isnt

For example to check a boolean value

In JavaScript we do like

var a;

a = true;

if (a === true) {
  alert('rays');
}

But in CoffeeScript we can do

a = true
alert('Rays') if a is on

is is alias for === and on is for true. We can also use yes for true

a = true
alert('Rays') if a is yes

Like is there isnt for !== in JavaScript

a = false
alert('Rays') if a isnt yes

Chained Comparisons

If we need to compare a variable with two values what we do in JavaScript

a = 5
a > 1 && a > 4

In CoffeeScript

a = 5
1 < a > 4

As I got to know this is same as in Python

Existential operator ?

If we want to check for null and undefined

if (a!=null && typeof a!='undefine')
  alert('rays')

In CoffeeScript just do

alert('rays') if a?

And we also have to check that a should not be 0 then in JavaScript

if (a!=null && typeof a!== 'undefine' && a!=0)
  alert('rays')

In CoffeeScript

alert('rays') if(a?=0)

Or call a function on object if that exists

object?.sum()

It similar to try in Ruby

Splats ...

Splats ... which is useful to send variable number of arguments both at function calling an invocation.

For example

printAddress = (address1, address2...) ->
  alert("#{address1} #{address2.join(',')}")

printAddress('12', 'Mansarover', 'Jaipur')

Same we can do while invoking function

printAddress = (address1, address2..) ->
  alert("#{address1} #{address2.join(',')}")

printAddress(['12', 'Mansarover', 'Jaipur']...)

List comprehensions

Sometime we need to put a condition in loop fo example

for book in books
  alert(book.name) if book.price > 18

We can make it short using comprehension

alert((book.name) for book in books when book.price > 18

Isn't it look pretty now?

Fat arrow

In CoffeeScript we have arrow -> for function. It also has => Fat arrow which is helpful when used callback-based libraries like jQuery or Prototype. So if we need to call JavaScript event and want to use class instance variable then we need to use fat arrow =>

class Person
  constructor: () ->
    @name = 'rashmi'
  
  print_name: ->
    $('.show_name').click =>
      alert(@name)
  
p = new Person
p.print_name()

In the above example on click event we want to access instance variable @name which can only be access by Fat arrow =>

I am sure you also find these tricks useful while writing CoffeeScript

There are lot of resources where you can learn about CoffeeScript. You can find most of on CoffeeScript website