The document discusses some of the features of CoffeeScript that the author likes compared to JavaScript syntax. These include simplified function syntax using fat arrows, significant whitespace allowing indentation to show code structure, bare objects for cleaner object initialization, array comprehensions for compact loops, implicit function binding to maintain scope, and interpolated strings for cleaner string concatenation. The document provides examples of CoffeeScript code compared to equivalent JavaScript for each of these features.

1. Everybody
loves
coffee,
right?

2. Today,
Everybody
loves
JavaScript,
right?
• JavaScript
revival
• Node.js
• One-­‐Page
applica@ons
• Real@me
applica@ons

3. Some
things
I
like
about
CoffeeScript

4. 1.
FUNCTION
SYNTAX

5. function
greet(name)
{
return
”Hello
”
+
name
}
1.
FUNCTION
SYNTAX

6. greet
=
(name)
-­‐>
”Hello
”
+
name
1.
FUNCTION
SYNTAX

7. $(”a”).click(function(event)
{
$(this).addClass(”busy”);
});
1.
FUNCTION
SYNTAX

8. $(”a”).click
(event)
-­‐>
$(this).addClass
”busy”
1.
FUNCTION
SYNTAX

9. 2.
SIGNIFICANT
WHITESPACE

10. if(url)
{
$.get(url,
function(data)
{
return
$(”#result”).html(data);
});
}
else
{
$(”#error“).show();
}
2.
SIGNIFICANT
WHITESPACE

11. if
url
$.get
url,
(data)
-­‐>
$(”#result”).html
data
else
$(”#error“).show()
2.
SIGNIFICANT
WHITESPACE

12. if(url)
{
$.get(url,
function(data)
{
return
$(”#result”).html(data);
});
}
else
{
$(”#error“).show();
}
2.
SIGNIFICANT
WHITESPACE

13. var
response
=
function(callback)
{
return
$.get("/data.php",
function(data,
textStatus)
{
if(textStatus
==
200)
{
return
data.toUpperCase();
}
else
{
return
callback(data);
}
}
};
2.
SIGNIFICANT
WHITESPACE

14. response
=
(callback)
-­‐>
$.get
"/data.php",
(data,
textStatus)
-­‐>
if
textStatus
==
200
data.toUpperCase()
else
callback(data)
2.
SIGNIFICANT
WHITESPACE

15. var
student
=
{
name:
”Sebastian”,
age:
21,
hobbies:
[”drums”,
”programming”]
}
3.
BARE
OBJECTS

16. student
=
name:
”Sebastian”
age:
21
hobbies:
[”drums”,
”programming”]
3.
BARE
OBJECTS

17. var
squares
=
[]
for(var
i
=
0;
i
<
100;
i++)
{
squares.push(i
*
i);
}
4.
COMPREHENSIONS

18. squares
=
[]
for
i
in
[0..100]
squares.push
i
*
i
4.
COMPREHENSIONS

19. squares
=
(i
*
i
for
i
in
[0..100])
4.
COMPREHENSIONS

20. squares
=
(i
*
i
for
i
in
[0..100]
when
i
%
2
is
0)
4.
COMPREHENSIONS

21. var
i,
squares;
squares
=
(function()
{
var
_results;
_results
=
[];
for
(i
=
0;
i
<=
100;
i++)
{
if
(i
%
2
===
0)
{
_results.push(i
*
i);
}
}
return
_results;
})();
4.
COMPREHENSIONS

22. $(”a”).click(function()
{
$.get(”/data.php”,
(function(data,
responseText)
{
$(this).html(data);
}).bind(this));
});
5.
FUNCTION
BINDING

23. $(”a”).click
-­‐>
$.get
”/data.php”,
(data,
responseText)
=>
$(this).html
data
5.
FUNCTION
BINDING

24. $(”#elements”).append(
”<li
class=’entry’>”
+
data.name
+
”</li>”
);
6.
STRING
SYNTAX

25. $(”#elements”).append
”<li
class=’entry’>#{data.name}</li>”
6.
STRING
SYNTAX

26. render
(student)
-­‐>
”””
<div
class=”student”>
<a
href=”/student/#{student.id}”>
<span>#{student.name}</span>
</a>
</div>
”””
6.
STRING
SYNTAX

27. There
is
lots
more:
Classes,
existen@al
operator,
destructuring
assignment,
…
hHp://coffeescript.org
Sebas@an
Hoitz
-­‐
@sebas@anhoitz
–
hHp://suplify.me