Slides from my lightning talk at Web Directions in Sydney, 23 February 2012. I wanted to demonstrate some of the ways CoffeeScript makes my life easier as a developer, by making my JavaScript code much faster and easier to read.
4. For Loop
var i, weatherInCities;
weatherInCities = [];
for(i = 0; i < listOfCities.length; i++) {
var city = listOfCities[i];
weatherInCities.push(city.name + ":" + city.weather);
}
5. 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)
6. 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)
7. 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)
8. 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(",");
};
9. 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(“,")
10. 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(“,")
11. 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(“,")
12. 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(“,")
13. 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;
};
14. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
15. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
16. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
17. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
18. Constructor - CoffeeScript
class Region
constructor: (@states) ->
findStatesBeginningWith: (letter) ->
state for state in @states when state.substr(0,1) is letter
19. this and that
var Clickable = function (baseElement) {
var that = this;
this.displayAlert = function() {
alert("You just clicked me!");
};
$(baseElement).click(that.displayAlert);
};
20. this and that
var Clickable = function (baseElement) {
var that = this;
this.displayAlert = function() {
alert("You just clicked me!");
};
$(baseElement).click(that.displayAlert);
};
21. 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!")
22. 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!")