Oh yeah, Coffeescript (Redux)

List Comprehensions

In my previous post on Coffeescript I stated that during my initial impression I noted that there were some "structural changes" to the ways loops were formatted.  That's not really the best way to state it.  In Coffeescript most loops are actually List Comprehesions.

List comprehensions are based on the mathmatical set builder notation, check the Wikipedia article for the specifics but the basics are

result = (func x for x in [0..20] where x%2 == 0)

That basically breaks down to give me the result of calling func x on the set, x is 0 to 20 where x mod 2 is even.  Seemed a bit complicated to me at first but it's really quite a powerful tool.

First all loops are based on this so a simple loop from 0 to x is


for i in [0..x]

Pretty simple, it also helps clear up the forEach on objects or lack there of in current javascript

output = ""

obj = 
 prop1: "hello ", 
 prop2: "world"

for i, prop of obj 
 output += prop 

console.log(output) ## hello world

Note here the use of the "of" keyword this is used to signal that we are iterating over an object and not an array.  You can also avoid any properties that may be inherited from the prototype by added the "own" keyword


obj = 
 prop1: "hello ", 
 prop2: "world"

for own i, prop of obj
 output += prop 

console.log(output) ## hello world


Here's an excellent example of the usefulness of list comprehensions:

square = (x) -> x * x 
results = (square x for x in [0..20] when x%2 == 0) 
console.log(results) ##[0, 4, 16, 36, 64, 100, 144, 196, 256, 324, 400]

Wasn't that super useful!  Ok, not so much, but what you should take away is that this basically gives you native forEach(as stated earlier), map, filter/select functionality which is really convenient when dealing with data or even the DOM.

Source Maps

In my first post about Coffeescript I mentioned that when I first approached the language the fact that it compiled down to javascript that would have to be debugged was a big drawback in my eyes.  The thought being that having to determine what javascript was associated with what Coffeescript was simply an annoying extra step in debugging.  This isn't really the case in practice and now not an issue at all because of Source Maps.

Source Maps are available in Chrome, hopefully Firefox soon and someday Internet Explorer.  They are not a feature specifically of Coffeescript.  The idea is that a source map is used to map output javascript back to the compiled language in this case Coffeescript.  So opening your dev tools you would be able to see the original Coffeescript, set breakpoints and have errors that would point back to the line in the original Coffeescript.  Pretty cool eh.  As I said this isn't a feature of the Coffeescript language but the browser or other dev tools.  JQuery as of v.1.9 have source maps available from the minified version back to development version.  Source maps for the main Coffeescript project are currently kind of up in the air but... Coffeescript Redux a re-write of the original compiler which aims to maintain the language structure but add some optimizations, have added support for source maps to Coffeescript.

Source maps can help remove a layer of complexity some people may see with Coffeescript development.  For more on source maps check it here.

Update: Source maps are now available in Coffeescript, please see this post for more information.