Remove Duplicates from Array in CoffeeScript


You have an array in CoffeeScript, which contains equal elements multiple times such as:


You would like to have only unique values in the array. Thus, transform it into:



You can use the following method to accomplish such:

removeDuplicates = (ar) ->
  if ar.length == 0
    return []  
  res = {}
  res[ar[key]] = ar[key] for key in []
  value for key, value of res



This solution is based on this approach (with a few minor issues fixed).

CoffeeScript Fat Arrow (=>) explained

Anyone who has worked with JavaScript for anything but a very short time will have come across the problem that the meaning of ‘this’ is often ambiguous at best. CoffeeScript attempts to mitigate this problem somewhat by introducing the Fat Arrow operator (=>). This operator can be used as a replacement for the thin arrow operator (->) used extensively in CoffeeScript for defining functions.

Unfortunately, it is not easy to understand what the fat arrow operator does.I hope the following rules provide some guidance on how to use this operator in CoffeeScript:

Rule 1: You Don’t Need the Fat Arrow If You Don’t Use: class, this, and @

If you are a beginner in JavaScript and/or CoffeeScript, I would recommend keeping your hands of the language constructs ‘this’, ‘class’ and ‘@’. You can implement any application you like without having to use these constructs and it will make your applications more robust and bug free.

Rule 2: Use the Fat Arrow when You Use @ in a Callback Definition in a Method

If you use classes in your code and you want to create a new anonymous function to be passed as a callback (such as to listen to an onclick event or to defined setTimeout function), define this function with the fat arrow operator. This will assure that you still have access to the methods and properties of the class you are working with.

The fat arrow will ‘override’ the default meaning of the @ operator as follows, to assure that ‘this’ refers to what we would expect it:


delayedAction = =>  

setTimeout(delayedAction, 100);


delayedAction = (function(_this) {
  return function() {
    return alert(_this.messsage);

setTimeout(delayedAction, 100);

Rule 3: Don’t Use Methods as Callbacks and Avoid the Fat Arrow Operator in All Other Circumstances

There is one more use case for the Fat Arrow operator, which is that it has a special meaning when used for the definition of class methods. This is useful when the methods of a class are to be passed as a callback. I personally don’t think that’s a very useful feature and it’s better to define an anonymous function to handle a callback and then call a method of your class/object from within this callback. Following this rule enables us not having to worry about whether to define a method with a thin or fat arrow – which is otherwise tricky since the right choice here is external to the class we are writing.

More Reading

Karl Seguin – Ten Features I Like About CoffeeScript

Michael Kramer – The Simplified Fat Arrow Guide for CoffeeScript

Azat Mardanov – Understanding Fat Arrows (=>) in CoffeeScript

Giang Nguyen – Coffeescript: Fat arrow vs thin arrow

Render HTML from Object with CoffeeKup

CoffeeKup allows to render HTML from multiple sources:

  • A String containing valid CoffeeScript code
  • A JavaScript/CoffeeScript object arranged according to CoffeeKup rules

To render HTML from a String is quite straightforward and documented on the CoffeeeScript reference: you can use the methods .compile and .render as documented there.

However, to render HTML from a JavaScript/CoffeeScript object can also come in handy, to create a tight link between your logic and markup. The .render method is not only able to process a String but is also able to process a certain kind of Object as well.

Here find two examples of how to render JavaScript and CoffeeScript objects into HTML:

JavaScript Object

CoffeeKup.render(function() {

  return div({ class: 'mydiv' }, 'Hello World');


which results in:

"<div class='mydiv'>Hello World</div>"

CoffeeScript Object

CoffeeKup.render(div 'mydiv', ->'Hello World'<span style="line-height: 1.5em;">);

resulting in the same HTML as above.

CoffeeKup: Add Class to Elements

CoffeeKup is a very succinct and flexible templating engine to define HTML documents in a less verbose manner. It is based on CoffeeScript.

Unfortunately, the documentation of CoffeeKup I could find was not very clear on how to perform one of the most basic tasks in creating HTML documents:

How do I assign a class to an element?

And here is the answer:

div class: 'myclass', ->

  div class: 'nested'

Which will result in the HTML document:

<div class='myclass'>

  <div class='nested'></div>


Or in more succinct form:

div 'myclass', ->

  div 'nested', ->

Please note the ‘->’ after the declaration of the class for the second div. Without it, CoffeeKup would render ‘nested’ as text and not as element.


CoffeeKup Reference

CoffeeKup Login Example