The document discusses some of the features and benefits of CoffeeScript, a programming language that compiles to JavaScript. It covers how CoffeeScript works by compiling CoffeeScript files to JavaScript, its easier syntax compared to JavaScript, built-in protections from common JavaScript issues, and how it results in less code. Specific features highlighted include object definitions, functions, operators, string interpolation, conditionals, scoping, and pattern matching.
11. Object Definition
var myPresentation = {
title: "CoffeeScript",
when: {
day: "8 May 2012",
time: "6:30pm"
}
};
Tuesday, 8 May 12
12. Object Definition
var myPresentation = {
title: "CoffeeScript",
when: {
day: "8 May 2012",
time: "6:30pm"
}
};
myPresentation =
subject: "CoffeeScript”
when:
day: "8 May 2012"
time: "6:30pm"
Tuesday, 8 May 12
13. Object Definition
var myPresentation = {
title: "CoffeeScript",
when: {
day: "8 May 2012",
time: "6:30pm"
}
};
myPresentation =
subject: "CoffeeScript”
when:
day: "8 May 2012"
time: "6:30pm"
Tuesday, 8 May 12
14. Function Definition
function startPresentation(subject) {
alert("A presentation about " + subject + " is now
starting!");
}
var startPresentation = function(subject) {
alert("A presentation about " + subject + " is now
starting!");
};
startPresentation("JavaScript");
Tuesday, 8 May 12
15. Function Definition
function startPresentation(subject) {
alert("A presentation about " + subject + " is now
starting!");
}
var startPresentation = function(subject) {
alert("A presentation about " + subject + " is now
starting!");
};
startPresentation("JavaScript");
startPresentation = (subject) ->
alert "A presentation about " + subject + " is now
starting!"
startPresentation "CoffeeScript"
Tuesday, 8 May 12
16. Function Definition
function startPresentation(subject) {
alert("A presentation about " + subject + " is now
starting!");
}
var startPresentation = function(subject) {
alert("A presentation about " + subject + " is now
starting!");
};
startPresentation("JavaScript");
startPresentation = (subject) ->
alert "A presentation about " + subject + " is now
starting!"
startPresentation "CoffeeScript"
Tuesday, 8 May 12
17. Operators
CoffeeScript
JavaScript
is ===
isnt !==
not !
and &&
or ||
of in
Tuesday, 8 May 12
19. String Interpolation
var description = "This is a talk about " +
myPresentation.subject + " by " + myPresentation.presenter
+ ". It will start at " + myPresentation.startTime + " and
finish by " + myPresentation.endTime;
Tuesday, 8 May 12
20. String Interpolation
var description = "This is a talk about " +
myPresentation.subject + " by " + myPresentation.presenter
+ ". It will start at " + myPresentation.startTime + " and
finish by " + myPresentation.endTime;
description = "This is a talk about
#{myPresentation.subject} by #{myPresentation.presenter}.
It will start at #{myPresentation.startTime} and finish
by #{myPresentation.endTime}"
Tuesday, 8 May 12
21. String Interpolation
var description = "This is a talk about " +
myPresentation.subject + " by " + myPresentation.presenter
+ ". It will start at " + myPresentation.startTime + " and
finish by " + myPresentation.endTime;
description = "This is a talk about
#{myPresentation.subject} by #{myPresentation.presenter}.
It will start at #{myPresentation.startTime} and finish
by #{myPresentation.endTime}"
Tuesday, 8 May 12
22. @ replaces this
var Presentation = function(title, presenter) {
this.getHeadline = function() {
return title + " by " + presenter;
};
this.showHeadline = function() {
alert(this.getHeadline());
};
};
Tuesday, 8 May 12
23. @ replaces this
var Presentation = function(title, presenter) {
this.getHeadline = function() {
return title + " by " + presenter;
};
this.showHeadline = function() {
alert(this.getHeadline());
};
};
class Presentation
constructor: (@title, @presenter) ->
getHeadline: ->
"#{@title} by #{@presenter}"
showHeadline: ->
alert(@getHeadline())
Tuesday, 8 May 12
24. @ replaces this
var Presentation = function(title, presenter) {
this.getHeadline = function() {
return title + " by " + presenter;
};
this.showHeadline = function() {
alert(this.getHeadline());
};
};
class Presentation
constructor: (@title, @presenter) ->
getHeadline: ->
"#{@title} by #{@presenter}"
showHeadline: ->
alert(@getHeadline())
Tuesday, 8 May 12
25. functions return the last value
function add(x, y) {
return x + y;
}
Tuesday, 8 May 12
26. functions return the last value
function add(x, y) {
return x + y;
}
add = (x, y) ->
x + y
Tuesday, 8 May 12
27. functions return the last value
function add(x, y) {
return x + y;
}
add = (x, y) ->
x + y
Tuesday, 8 May 12
28. Conditionals return automatically
var textColor;
if (result === "failed") {
textColor = "red";
} else if (result === "not run") {
textColor = "yellow";
} else {
textColor = "green";
}
Tuesday, 8 May 12
29. Conditionals return automatically
var textColor;
if (result === "failed") {
textColor = "red";
} else if (result === "not run") {
textColor = "yellow";
} else {
textColor = "green";
}
textColor =
if result is "failed"
"red"
else if result is "not run"
"yellow"
else
"green"
Tuesday, 8 May 12
30. Conditionals return automatically
var textColor;
if (result === "failed") {
textColor = "red";
} else if (result === "not run") {
textColor = "yellow";
} else {
textColor = "green";
}
textColor =
if result is "failed"
"red"
else if result is "not run"
"yellow"
else
"green"
Tuesday, 8 May 12
32. In JavaScript, variables are global by default
var tonightsPresentations = [ "CoffeeScript", "i18n",
"Rails Conf"];
var whoopsie = function() {
tonightsPresentations = [];
return tonightsPresentations;
}
Tuesday, 8 May 12
33. In CoffeeScript, they are automatically scoped
var tonightsPresentations = [ "CoffeeScript", "i18n",
"Rails Conf"];
var whoopsie = function() {
teamHugPresentationList = [];
return teamHugPresentationList;
}
tonightsPresentations = [ "CoffeeScript", "i18n", "Rails
Conf"]
whoopsie = ->
! tonightsPresentations = []
! tonightsPresentations
Tuesday, 8 May 12
34. WTF ...
0 == "" and 0 =="0" are both TRUE ...
but "" == "0" is NOT!
false == "0" is TRUE ...
but false == "false" is NOT!
Tuesday, 8 May 12
35. WTF ...
0 == "" and 0 =="0" are both TRUE ...
but "" == "0" is NOT!
false == "0" is TRUE ...
but false == "false" is NOT!
is => ===
isnt => !==
== -> ===
Tuesday, 8 May 12
36. ✗
With
✗;
✗
Reserved Keywords
Tuesday, 8 May 12
38. Example 1
var Presentation = function(title, presenter) {
return {
getHeadline: function() {
return title + " by " + presenter;
}
}
};
var myPresentation = Presentation("CoffeeScript", "Jo
Cranford");
Tuesday, 8 May 12
39. Example 2
var Presentation = function(title, presenter) {
this.getHeadline = function() {
return title + " by " + presenter;
};
};
var myPresentation = new Presentation("CoffeeScript", "Jo
Cranford");
Tuesday, 8 May 12
40. Example 3
var Presentation = function(title, presenter) {
this.title = title;
this.presenter = presenter;
};
Presentation.prototype.getHeadline = function() {
return this.title + " by " + this.presenter;
};
var myPresentation = new Presentation("CoffeeScript", "Jo
Cranford");
Tuesday, 8 May 12
41. CoffeeScript
class Presentation
constructor: (@title, @presenter) ->
getHeadline: ->
@title + " " + @presenter
Tuesday, 8 May 12
43. Average Lines Of Code
40
1.8X
30
20
10
0
JavaScript
CoffeeScript
Tuesday, 8 May 12
44. For Loop
var i, weatherInCities;
weatherInCities = [];
for(i = 0; i < listOfCities.length; i++) {
! var city = listOfCities[i];
! weatherInCities.push(city.name + ":" + city.weather);
}
Tuesday, 8 May 12
45. For Loop
var i, weatherInCities;
weatherInCities = [];
for(i = 0; i < listOfCities.length; i++) {
! var city = listOfCities[i];
! weatherInCities.push(city.name + ":" + city.weather);
}
weatherInCities =
(("#{city.name}: #{city.weather}") for city in listOfCities)
Tuesday, 8 May 12
46. For Loop
var i, weatherInCities;
weatherInCities = [];
for(i = 0; i < listOfCities.length; i++) {
! var city = listOfCities[i];
! weatherInCities.push(city.name + ":" + city.weather);
}
weatherInCities =
(("#{city.name}: #{city.weather}") for city in listOfCities)
Tuesday, 8 May 12
47. For “Own” Loop
var objectToString = function (obj) {
! var key, val, _results;
! _results = [];
! for (key in obj) {
! ! if (!obj.hasOwnProperty(key)) continue;
! ! val = obj[key];
! ! if (val !== null) _results.push(key + ":" + val);
! }
! return _results.join(",");
};
Tuesday, 8 May 12
48. For “Own” Loop
var objectToString = function (obj) {
! var key, val, _results;
! _results = [];
! for (key in obj) {
! ! if (!obj.hasOwnProperty(key)) continue;
! ! val = obj[key];
! ! if (val !== null) _results.push(key + ":" + val);
! }
! return _results.join(",");
};
objectToString = (obj) ->
! ("#{key}:#{val}" for own key, val of obj when val isnt
null).join(“,")
Tuesday, 8 May 12
49. For “Own” Loop
var objectToString = function (obj) {
! var key, val, _results;
! _results = [];
! for (key in obj) {
! ! if (!obj.hasOwnProperty(key)) continue;
! ! val = obj[key];
! ! if (val !== null) _results.push(key + ":" + val);
! }
! return _results.join(",");
};
objectToString = (obj) ->
! ("#{key}:#{val}" for own key, val of obj when val isnt
null).join(“,")
Tuesday, 8 May 12
50. Constructor - JavaScript
var Region = function(states) {
! this.states = states;
};
Region.prototype.findStatesBeginningWith = function(letter) {
! var matchingStates = [];
for (var i = 0;i < this.states.length; i++) {
! ! state = this.states[i];
! ! if (state.substr(0,1) === letter) {
! ! ! matchingStates.push(state)
! ! }
! }
! return matchingStates;
};
Tuesday, 8 May 12
51. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
Tuesday, 8 May 12
52. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
Tuesday, 8 May 12
53. this and that
var Clickable = function (baseElement) {
! var that = this;
! this.displayAlert = function() {
! ! alert("You just clicked me!");
! };
! $(baseElement).click(that.displayAlert);
};
Tuesday, 8 May 12
54. this and that
var Clickable = function (baseElement) {
! var that = this;
! this.displayAlert = function() {
! ! alert("You just clicked me!");
! };
! $(baseElement).click(that.displayAlert);
};
Tuesday, 8 May 12
55. this and that
var Clickable = function (baseElement) {
! var that = this;
! this.displayAlert = function() {
! ! alert("You just clicked me!");
! };
! $(baseElement).click(that.displayAlert);
};
class window.Clickable
constructor: (@baseElement) ->
$(@baseElement).click(@displayAlert)
displayAlert: =>
window.alert("You just clicked me!")
Tuesday, 8 May 12
56. this and that
var Clickable = function (baseElement) {
! var that = this;
! this.displayAlert = function() {
! ! alert("You just clicked me!");
! };
! $(baseElement).click(that.displayAlert);
};
class window.Clickable
constructor: (@baseElement) ->
$(@baseElement).click(@displayAlert)
displayAlert: =>
window.alert("You just clicked me!")
Tuesday, 8 May 12
57. Pattern Matching – Reading an Object
var london = {
lat: 51.5171,
lng: 0.1062
};
var lat = london.lat;
var lng = london.lng;
Tuesday, 8 May 12
58. Pattern Matching – Reading an Object
var london = {
lat: 51.5171,
lng: 0.1062
};
var lat = london.lat;
var lng = london.lng;
london =
lat: 51.5171
lng: 0.1062
{lat,lng} = london
Tuesday, 8 May 12
59. Pattern Matching
var london = {
lat: 51.5171,
lng: 0.1062
};
var lat = london.lat;
var lng = london.lng;
london =
lat: 51.5171
lng: 0.1062
{lat,lng} = london
Tuesday, 8 May 12
60. Pattern Matching
doSomethingWithPoint = ({lat,lng}) ->
console.log(lat, lng);
doSomethingWithPoint london
createPoint = (lat, lng) ->
{ lat, lng }
Tuesday, 8 May 12
66. Jasmine Test
describe("The Game Object", function() {
it("should have a score of 0 if I knock down no
skittles", function() {
var game = new Game();
game.roll(0);
var score = game.score();
expect(score).toBe(0);
});
});
Tuesday, 8 May 12
67. Jasmine Test
describe("The Game Object", function() {
it("should have a score of 0 if I knock down no
skittles", function() {
var game = new Game();
game.roll(0);
var score = game.score();
expect(score).toBe(0);
});
});
describe "The Game Object", ->
it "should have a score of 0 if I knock down no skittles", -
>
game = new Game()
game.roll(0)
score = game.score()
expect(score).toBe 0
Tuesday, 8 May 12
73. It IS an additional step
Debugging
Shouldn't we just write good
JavaScript?
Should we even be writing object
oriented JavaScript?
Tuesday, 8 May 12