The document discusses the history and evolution of JavaScript from its origins in 1995 as a scripting language for web browsers called Mocha, to becoming JavaScript and being rewritten in a week to be more like Java, to its use today with features like classes and arrow functions. It provides an example of a LCMCalculator class written in modern JavaScript syntax to calculate the lowest common multiple of two numbers.

1. COFFEESCRIPT
aka AwesomeSauce
@markbates
Friday, June 7, 13

2. Distributed
Programmin
g with
Ruby
Addison-Wesley
2009
http://
books.markbates.com
Friday, June 7, 13

3. Programmi
ng
in
CoffeeScrip
Addison-Wesley
2012
http://
books.markbates.com
Friday, June 7, 13

4. Friday, June 7, 13

5. FLUENT13
first month free
www.metacasts.tv
Friday, June 7, 13

6. A (BRIEF) HISTORY
LESSON
Friday, June 7, 13

7. Friday, June 7, 13

8. “I need to come up with a scripting language
for web browsers.
I know! I'll make it cool and Lispy!”
Dramatic Re-enactment (1995)
Friday, June 7, 13

9. Friday, June 7, 13

10. “Yeah, So... Java is getting really popular.
So we're going to need you to rewrite your
language into something a bit more Java-
esque and name it something like JavaScript.
Yeah, and we're going to need it in a week.
Thanks, that'd be great.”
Dramatic Re-enactment (1995)
Friday, June 7, 13

11. function
LCMCalculator(x,
y)
{
var
checkInt
=
function(x)
{
if
(x
%
1
!==
0)
{
throw
new
TypeError(x
+
"
is
not
an
integer");
}
return
x;
};
this.a
=
checkInt(x)
this.b
=
checkInt(y);
}
LCMCalculator.prototype
=
{
constructor:
LCMCalculator,
gcd:
function()
{
var
a
=
Math.abs(this.a),
b
=
Math.abs(this.b),
t;
if
(a
<
b)
{
t
=
b;
b
=
a;
a
=
t;
}
while
(b
!==
0)
{
t
=
b;
b
=
a
%
b;
a
=
t;
}
this['gcd']
=
function()
{
return
a;
};
return
a;
},
"lcm":
function()
{
var
lcm
=
this.a
/
this.gcd()
*
this.b;
this.lcm
=
function()
{
return
lcm;
};
return
lcm;
},
toString:
function()
{
return
"LCMCalculator:
a
=
"
+
this.a
+
",
b
=
"
+
this.b;
}
};
function
output(x)
{
document.body.appendChild(document.createTextNode(x));
document.body.appendChild(document.createElement('br'));
}
[
[25,
55],
[21,
56],
[22,
58],
[28,
56]
].map(function(pair)
{
return
new
LCMCalculator(pair[0],
pair[1]);
}).sort(function(a,
b)
{
return
a.lcm()
-­‐
b.lcm();
}).forEach(function(obj)
{
output(obj
+
",
gcd
=
"
+
obj.gcd()
+
",
lcm
=
"
+
obj.lcm());
});
Friday, June 7, 13

12. FAST FORWARD
About 15 Years
Friday, June 7, 13

13. Friday, June 7, 13

14. function
LCMCalculator(x,
y)
{
var
checkInt
=
function(x)
{
if
(x
%
1
!==
0)
{
throw
new
TypeError(x
+
"
is
not
an
integer");
}
return
x;
};
this.a
=
checkInt(x)
this.b
=
checkInt(y);
}
LCMCalculator.prototype
=
{
constructor:
LCMCalculator,
gcd:
function()
{
var
a
=
Math.abs(this.a),
b
=
Math.abs(this.b),
t;
if
(a
<
b)
{
t
=
b;
b
=
a;
a
=
t;
}
while
(b
!==
0)
{
t
=
b;
b
=
a
%
b;
a
=
t;
}
this['gcd']
=
function()
{
return
a;
};
return
a;
},
"lcm":
function()
{
var
lcm
=
this.a
/
this.gcd()
*
this.b;
this.lcm
=
function()
{
return
lcm;
};
return
lcm;
},
toString:
function()
{
return
"LCMCalculator:
a
=
"
+
this.a
+
",
b
=
"
+
this.b;
}
};
function
output(x)
{
document.body.appendChild(document.createTextNode(x));
document.body.appendChild(document.createElement('br'));
}
[
[25,
55],
[21,
56],
[22,
58],
[28,
56]
].map(function(pair)
{
return
new
LCMCalculator(pair[0],
pair[1]);
}).sort(function(a,
b)
{
return
a.lcm()
-­‐
b.lcm();
}).forEach(function(obj)
{
output(obj
+
",
gcd
=
"
+
obj.gcd()
+
",
lcm
=
"
+
obj.lcm());
});
Friday, June 7, 13

15. class
LCMCalculator
constructor:
(x,
y)
-­‐>
checkInt
=
(x)
-­‐>
if
x
%
1
isnt
0
throw
new
TypeError(x
+
"
is
not
an
integer")
return
x
@a
=
checkInt(x)
@b
=
checkInt(y)
gcd:
-­‐>
a
=
Math.abs(@a)
b
=
Math.abs(@b)
t
=
undefined
if
a
<
b
t
=
b
b
=
a
a
=
t
while
b
isnt
0
t
=
b
b
=
a
%
b
a
=
t
this["gcd"]
=
-­‐>
a
return
a
lcm:
-­‐>
lcm
=
@a
/
@gcd()
*
@b
@lcm
=
-­‐>
lcm
return
lcm
toString:
-­‐>
"LCMCalculator:
a
=
#{@a},
b
=
#{@b}"
output
=
(x)
-­‐>
document.body.appendChild
document.createTextNode(x)
document.body.appendChild
document.createElement("br")
[[25,
55],
[21,
56],
[22,
58],
[28,
56]].map((pair)
-­‐>
new
LCMCalculator(pair[0],
pair[1])
).sort((a,
b)
-­‐>
a.lcm()
-­‐
b.lcm()
).forEach
(obj)
-­‐>
output
"obj
#{gcd}
=
#{obj.gcd()},
lcm
=
#{obj.lcm()}"
Friday, June 7, 13

16. WHAT IS COFFEESCRIPT?
Friday, June 7, 13

17. What is CoffeeScript?
Friday, June 7, 13

18. “A little language that compiles into JavaScript.”
What is CoffeeScript?
Friday, June 7, 13

19. “A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript
What is CoffeeScript?
Friday, June 7, 13

20. “A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript
Easier to read, write, maintain, refactor, etc...
What is CoffeeScript?
Friday, June 7, 13

21. “A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript
Easier to read, write, maintain, refactor, etc...
A Hybrid languages like Ruby and Python.
What is CoffeeScript?
Friday, June 7, 13

22. “A little language that compiles into JavaScript.”
Easily integrates with your current JavaScript
Easier to read, write, maintain, refactor, etc...
A Hybrid languages like Ruby and Python.
Helpful.
What is CoffeeScript?
Friday, June 7, 13

23. Not Magic!
Limited by what JavaScript can already do
What CoffeeScript Is
Not?
Friday, June 7, 13

24. “I’m happy writing JavaScript.
I don’t need to learn another language.”
Friday, June 7, 13

25. FINE WITH ME
Friday, June 7, 13

26. BUT...
Friday, June 7, 13

27. ANOTHER (BRIEF)
HISTORY LESSON
Friday, June 7, 13

28. .MODEL SMALL
.STACK 64
.DATA
VAL1 DB 01H
VAL2 DB 01H
LP DB 00H
V1 DB 00H
V2 DB 00H
NL DB 0DH,0AH,'$'
.CODE
MAIN PROC
MOV AX,@DATA
MOV DS,AX
MOV AH,01H
INT 21H
MOV CL,AL
SUB CL,30H
SUB CL,2
MOV AH,02H
MOV DL,VAL1
ADD DL,30H
INT 21H
MOV AH,09H
LEA DX,NL
INT 21H
MOV AH,02H
MOV DL,VAL2
ADD DL,30H
INT 21H
MOV AH,09H
LEA DX,NL
INT 21H
DISP:
MOV BL,VAL1
ADD BL,VAL2
MOV AH,00H
MOV AL,BL
MOV LP,CL
MOV CL,10
DIV CL
MOV CL,LP
MOV V1,AL
MOV V2,AH
MOV DL,V1
ADD DL,30H
MOV AH,02H
INT 21H
MOV DL,V2
ADD DL,30H
MOV AH,02H
INT 21H
MOV DL,VAL2
MOV VAL1,DL
MOV VAL2,BL
MOV AH,09H
LEA DX,NL
INT 21H
LOOP DISP
MOV AH,4CH
INT 21H
MAIN ENDP
END MAIN
Friday, June 7, 13

29. .MODEL SMALL
.STACK 64
.DATA
VAL1 DB 01H
VAL2 DB 01H
LP DB 00H
V1 DB 00H
V2 DB 00H
NL DB 0DH,0AH,'$'
.CODE
MAIN PROC
MOV AX,@DATA
MOV DS,AX
MOV AH,01H
INT 21H
MOV CL,AL
SUB CL,30H
SUB CL,2
MOV AH,02H
MOV DL,VAL1
ADD DL,30H
INT 21H
MOV AH,09H
LEA DX,NL
INT 21H
MOV AH,02H
MOV DL,VAL2
ADD DL,30H
INT 21H
MOV AH,09H
LEA DX,NL
INT 21H
DISP:
MOV BL,VAL1
ADD BL,VAL2
MOV AH,00H
MOV AL,BL
MOV LP,CL
MOV CL,10
DIV CL
MOV CL,LP
MOV V1,AL
MOV V2,AH
MOV DL,V1
ADD DL,30H
MOV AH,02H
INT 21H
MOV DL,V2
ADD DL,30H
MOV AH,02H
INT 21H
MOV DL,VAL2
MOV VAL1,DL
MOV VAL2,BL
MOV AH,09H
LEA DX,NL
INT 21H
LOOP DISP
MOV AH,4CH
INT 21H
MAIN ENDP
END MAIN
Assembly
Friday, June 7, 13

30. #include <stdio.h>
int fibonacci()
{
int n = 100;
int a = 0;
int b = 1;
int sum;
int i;
for (i = 0; i < n; i++)
{
printf("%dn", a);
sum = a + b;
a = b;
b = sum;
}
return 0;
}
C
Friday, June 7, 13

31. public static void fibonacci() {
int n = 100;
int a = 0;
int b = 1;
for (int i = 0; i < n; i++) {
System.out.println(a);
a = a + b;
b = a - b;
}
}
Java
Friday, June 7, 13

32. def fibonacci
a = 0
b = 1
100.times do
printf("%dn", a)
a, b = b, a + b
end
end
Ruby
Friday, June 7, 13

33. “I can write an app just as well in Java
as I can in Ruby, but damn it if Ruby
isn’t nicer to read and write!”
Friday, June 7, 13

34. SAME GOES FOR
COFFEESCRIPT
Friday, June 7, 13

35. SYNTAX
Friday, June 7, 13

36. $(function() {
success = function(data) {
if (data.errors != null) {
alert("There was an error!");
} else {
$("#content").text(data.message);
}
};
$.get('/users', success, 'json');
});
$ ->
success = (data) ->
if data.errors?
alert "There was an error!"
else
$("#content").text(data.message)
$.get('/users', success, 'json')
JavaScript CoffeeScript
Friday, June 7, 13

37. Syntax Rules
No semi-colons (ever!)
No curly braces*
No ‘function’ keyword
Relaxed parentheses
Whitespace significant formatting
Friday, June 7, 13

38. # Not required without arguments:
noArg1 = ->
# do something
# Not required without arguments:
noArg2 = () ->
# do something
# Required with Arguments:
withArg = (arg) ->
# do something
Parentheses Rules
# Required without arguments:
noArg1()
noArg2()
# Not required with
arguments:
withArg("bar")
withArg "bar"
Friday, June 7, 13

39. # Bad:
$ "#some_id" .text()
# $("#some_id".text());
# Good:
$("#some_id").text()
# $("#some_id").text();
Parentheses Rules
Friday, June 7, 13

40. Whitespace
Friday, June 7, 13

41. Whitespace
$(function() {
success = function(data) {
if (data.errors != null) {
alert("There was an error!");
} else {
$("#content").text(data.message);
}
};
$.get('/users', success, 'json');
});
Friday, June 7, 13

42. Whitespace
$(function() {
success = function(data) {
if (data.errors != null) {
alert("There was an error!");
} else {
$("#content").text(data.message);
}
};
$.get('/users', success, 'json');
});
Friday, June 7, 13

43. Whitespace
$ ->
success = (data) ->
if data.errors?
alert "There was an error!"
else
$("#content").text(data.message)
$.get('/users', success, 'json')
Friday, June 7, 13

44. Conditionals
doSomething() if true
doSomething() unless true
if true
doSomething()
unless true
doSomething()
if true
doSomething()
else
doSomethingElse()
Friday, June 7, 13

45. Objects/Hashes
someObject = {conf: "FluentConf", talk: "CoffeeScript"}
someObject =
conf: "FluentConf"
talk: "CoffeeScript"
someFunction(conf: "FluentConf", talk: "CoffeeScript")
Friday, June 7, 13

46. Objects/Hashes
var someObject;
someObject = {
conf: "FluentConf",
talk: "CoffeeScript"
};
someObject = {
conf: "FluentConf",
talk: "CoffeeScript"
};
someFunction({
conf: "FluentConf",
talk: "CoffeeScript"
});
Friday, June 7, 13

47. String Interpolation
name = "FluentConf 2013"
console.log "Hello #{name}"
# Hello FluentConf 2013
console.log 'Hello #{name}'
# Hello #{name}
Friday, June 7, 13

48. String Interpolation
name = "FluentConf 2013"
console.log "Hello #{name}"
# Hello FluentConf 2013
console.log 'Hello #{name}'
# Hello #{name}
var name;
name = "FluentConf 2013";
console.log("Hello " + name);
console.log('Hello #{name}');
Friday, June 7, 13

49. Heredocs
html = """
<div class="comment" id="tweet-#{tweet.id_str}">
<hr>
<div class='tweet'>
<span class="imgr"><img
src="#{tweet.profile_image_url}"></span>
<span class="txtr">
<h5><a href="http://twitter.com/#{tweet.from_user}"
target="_blank">@#{tweet.from_user}</a></h5>
<p>#{tweet.text}</p>
<p class="comment-posted-on">#{tweet.created_at}</p>
</span>
</div>
</div>
"""
Friday, June 7, 13

50. Heredocs
var html;
html = "<div class="comment" id="tweet-" + tweet.id_str
+ "">n <hr>n <div class='tweet'>n <span class=
"imgr"><img src="" + tweet.profile_image_url + ""></
span>n <span class="txtr">n <h5><a href=
"http://twitter.com/" + tweet.from_user + "" target=
"_blank">@" + tweet.from_user + "</a></h5>n <p>" +
tweet.text + "</p>n <p class="comment-posted-on">"
+ tweet.created_at + "</p>n </span>n </div>n</div>";
Friday, June 7, 13

51. Functions
p = (name) ->
console.log "Hello #{name}"
p('FluentConf 2013')
Friday, June 7, 13

52. Functions
var p;
p = function(name) {
return console.log("Hello " + name);
};
p('FluentConf 2013');
Friday, June 7, 13

53. Loops &
Comprehensions
for someName in someArray
console.log someName
for key, value of someObject
console.log "#{key}: #{value}"
Friday, June 7, 13

54. Loops &
Comprehensions
var key, someName, value, _i, _len;
for (_i = 0, _len = someArray.length; _i < _len; _i++) {
someName = someArray[_i];
console.log(someName);
}
for (key in someObject) {
value = someObject[key];
console.log("" + key + ": " + value);
}
Friday, June 7, 13

55. Loops &
Comprehensions
numbers = [1..5]
console.log number for number in numbers
Friday, June 7, 13

56. Loops &
Comprehensions
var number, numbers, _i, _len;
numbers = [1, 2, 3, 4, 5];
for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
console.log(number);
}
Friday, June 7, 13

57. Loops &
Comprehensions
numbers = [1..5]
console.log number for number in numbers when number <= 3
Friday, June 7, 13

58. Loops &
Comprehensions
var number, numbers, _i, _len;
numbers = [1, 2, 3, 4, 5];
for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
if (number <= 3) {
console.log(number);
}
}
Friday, June 7, 13

59. Loops &
Comprehensions
numbers = [1, 2, 3, 4, 5]
low_numbers = (number * 2 for number in numbers when number <= 3)
console.log low_numbers # [ 2, 4, 6 ]
Friday, June 7, 13

60. Loops &
Comprehensions
var low_numbers, number, numbers;
numbers = [1, 2, 3, 4, 5];
low_numbers = (function() {
var _i, _len, _results;
_results = [];
for (_i = 0, _len = numbers.length; _i < _len; _i++) {
number = numbers[_i];
if (number <= 3) {
_results.push(number * 2);
}
}
return _results;
})();
console.log(low_numbers);
Friday, June 7, 13

61. Classes
class Employee
emp = new Employee()
emp.firstName = "Mark"
Friday, June 7, 13

62. Classes
var Employee, emp;
Employee = (function() {
Employee.name = 'Employee';
function Employee() {}
return Employee;
})();
emp = new Employee();
emp.firstName = "Mark";
Friday, June 7, 13

63. Classes
class Employee
constructor: (@options = {}) ->
salary: ->
@options.salary ?= "$250,000"
emp = new Employee()
console.log emp.salary() # "$250,000"
emp = new Employee(salary: "$100,000")
console.log emp.salary() # "$100,000"
Friday, June 7, 13

64. Classes
var Employee, emp;
Employee = (function() {
Employee.name = 'Employee';
function Employee(options) {
this.options = options != null ? options : {};
}
Employee.prototype.salary = function() {
var _base, _ref;
return (_ref = (_base = this.options).salary) != null ? _ref : _base.salary = "$250,000";
};
return Employee;
})();
emp = new Employee();
console.log(emp.salary());
emp = new Employee({
salary: "$100,000"
});
console.log(emp.salary());
Friday, June 7, 13

65. Extending Classes
class Manager extends Employee
salary: ->
"#{super} w/ $10k Bonus"
manager = new Manager()
console.log manager.salary() # "$250,000 w/ $10k Bonus"
Friday, June 7, 13

66. Extending Classes
var Manager, manager,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; }
function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ =
parent.prototype; return child; };
Manager = (function(_super) {
__extends(Manager, _super);
Manager.name = 'Manager';
function Manager() {
var _base;
Manager.__super__.constructor.apply(this, arguments);
}
Manager.prototype.salary = function() {
return "" + Manager.__super__.salary.apply(this, arguments) + " w/ $10k Bonus";
};
return Manager;
})(Employee);
manager = new Manager();
console.log(manager.salary());
Friday, June 7, 13

67. Bound Functions
class User
constructor: (@name) ->
sayHi: ->
console.log "Hello #{@name}"
bob = new User('bob')
mary = new User('mary')
log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"
log(bob.sayHi)
log(mary.sayHi)
Friday, June 7, 13

68. Bound Functions
about to execute callback...
Hello undefined
...executed callback
about to execute callback...
Hello undefined
...executed callback
Friday, June 7, 13

69. class User
constructor: (@name) ->
sayHi: ->
console.log "Hello #{@name}"
bob = new User('bob')
mary = new User('mary')
log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"
log(bob.sayHi)
log(mary.sayHi)
Bound Functions
Friday, June 7, 13

70. class User
constructor: (@name) ->
sayHi: ->
console.log "Hello #{@name}"
bob = new User('bob')
mary = new User('mary')
log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"
log(bob.sayHi)
log(mary.sayHi)
Bound Functions
Friday, June 7, 13

71. class User
constructor: (@name) ->
sayHi: =>
console.log "Hello #{@name}"
bob = new User('bob')
mary = new User('mary')
log = (callback)->
console.log "about to execute callback..."
callback()
console.log "...executed callback"
log(bob.sayHi)
log(mary.sayHi)
Bound Functions
Friday, June 7, 13

72. Bound Functions
about to execute callback...
Hello bob
...executed callback
about to execute callback...
Hello mary
...executed callback
Friday, June 7, 13

73. Bound Functions
class User
constructor: (@name) ->
sayHi: =>
console.log "Hello #{@name}"
Friday, June 7, 13

74. Bound Functions
var User,
__bind = function(fn, me){ return function(){ return fn.apply(me,
arguments); }; };
User = (function() {
User.name = 'User';
function User(name) {
this.name = name;
this.sayHi = __bind(this.sayHi, this);
}
User.prototype.sayHi = function() {
return console.log("Hello " + this.name);
};
return User;
})();
Friday, June 7, 13

75. FINALLY
One of my favorite features
Friday, June 7, 13

76. Existential Operator
if foo?
console.log "foo"
Friday, June 7, 13

77. Existential Operator
if (typeof foo !== "undefined" && foo !== null) {
console.log("foo");
}
Friday, June 7, 13

78. BUT WAIT! THERE’S
MORE!
Friday, June 7, 13

79. Existential Operator
console?.log "foo"
Friday, June 7, 13

80. Existential Operator
console?.log "foo"
if (typeof console !== "undefined" && console !== null) {
console.log("foo");
}
Friday, June 7, 13

81. Existential Operator
if currentUser?.firstName?
console.log currentUser.firstName
Friday, June 7, 13

82. Existential Operator
if currentUser?.firstName?
console.log currentUser.firstName
if ((typeof currentUser !== "undefined" && currentUser !==
null ? currentUser.firstName : void 0) != null) {
console.log(currentUser.firstName);
}
Friday, June 7, 13

83. FINALLY
Friday, June 7, 13

84. The Raven
Friday, June 7, 13

85. Once upon a mignight dreary while I pondered, weak and weary,
Over many quaint and curious volume of forgotten lore -
While I nodded, nearly napping, suddenly there came a tapping,
As of some one gently rapping, rapping at my chamber door
"'Tis some visiter". I muttered, "tapping at my chamber door" -
"only this and nothing more."
Ah distinctly I remember it was in the bleak December;
And each separate dying ember wrought its ghost upon the floor.
Eagerly I wished the morrow - vainly I had sought to borrow,
From my books surcease of sorrow - sorrow For the lost Lenore -
For the rare and radiant maiden whom the angels name Lenore -
Nameless here For evermore
The Raven
Friday, June 7, 13

86. The Raven
var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length;
i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
while (I(pondered, weak && weary, Over(many(quaint && curious(volume in
forgotten(lore - While(I(nodded, nearly(napping, suddenly(there(came(a(tapping,
As in some(one(gently(rapping, rapping(at(my(chamber(door)))))))))))))))))))) {
Once(upon(a(mignight(dreary))));
}
"'Tis some visiter".I(muttered, "tapping at my chamber door" - "only this and
nothing more.");
Ah(distinctly(I(remember(it(__indexOf.call(the(bleak(December)), was) >= 0)))));
And(each(separate(dying(ember(wrought(its(ghost(upon(the(floor.Eagerly(I(wished(
the(morrow - vainly(I(had(sought(to(borrow, From(my(books(surcease in sorrow -
sorrow(For(the(lost(Lenore - For(the(rare &&
radiant(maiden(whom(the(angels(name(Lenore -
Nameless(here(For(evermore)))))))))))))))))))))))))))))))))))));
Friday, June 7, 13

87. What Didn’t I Cover?
Default Arguments
Ranges
Splatted Arguments
Scoping
Security
Strict Mode
Fixes common
‘mistakes’
Operators
The `do` keyword
Source Maps
Plenty more!
Friday, June 7, 13

88. Thank you!
Friday, June 7, 13

89. Thank you!
myName = "Mark Bates"
you.should buyBook("Programming in CoffeeScript")
.at("http://books.markbates.com")
you.should follow(@markbates)
Friday, June 7, 13