Download - JavaScript, the good parts + syntactic sugar = CoffeeScript

Page 1: JavaScript, the good parts + syntactic sugar = CoffeeScript

Good/Bad PartsSyntactic Sugar

Classes

Co�eeScript

Vladimir Dobriakov, www.mobile-web-consulting.de

FrankfurtJS, 30th of October 2014

Vladimir Dobriakov, www.mobile-web-consulting.de Co�eeScript

Classes

JavaScript,

the good parts

+

syntactic sugar

=

Co�eeScript

Page 3: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Lexical Scoping, Globalsfor ownswitchExistential Operator

Lexical Scoping, Globals

(function() {

var items;

items = $("li");

$("#totals").text(items.length + " items found");

}).call(this);

Co�eeScript:

items = $("li")

$("totals").text(items.length + " items found")

Page 4: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

Page 5: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

Page 6: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

Page 7: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Iterate through Properties

var propertyName, value,

__hasProp = {}.hasOwnProperty;

for (propertyName in customer) {

if (!__hasProp.call(customer, propertyName)) continue;

value = customer[propertyName];

alert(propertName, value);

}

for own propertyName, value of customer # CoffeeScript

alert(propertName, value)

Page 8: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

}

Page 9: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

}

Page 10: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

switch

switch (day) { // JavaScript

case "Mon":

go(work);

break;

case "Tue":

go(iceFishing);

break;

default:

chill(24);

}

switch day # CoffeeScript

when "Mon" then go work

when "Tue" then go iceFishing

else chill 24

Page 11: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

switch

case "Mon":

go(work); break;

case "Tue":

go(iceFishing); break;

default:

chill(24);

}

else chill 24

Page 12: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

switch

case "Mon":

go(work); break;

case "Tue":

go(iceFishing); break;

default:

chill(24);

}

else chill 24

Page 13: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Check for Optional Parameter

if (defaultAmount)

if (defaultAmount != null)

if (typeof defaultAmount !== 'undefined' &&

defaultAmount != null)

Co�eeScript:

if defaultAmount?

Page 14: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Page 15: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Page 16: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Page 17: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

[optional] comparision

0 == ""

Use === instead

Page 18: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

[optional] comparision

0 == ""

Use === instead

Page 19: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

List ComprehensionsSplats, Destructuring AssignmentString Interpolation

List Comprehensions

shortNames = (name for name in list when name.length < 5)

cubes = (math.cube num for num in list)

Page 20: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Splats, Destructuring Assignment

awardMedals = (first, second, others...) ->

# TODO implementation

awardMedals 'CoffeeScript', 'JavaScript', 'Ruby', 'Python'

[city, temp, forecast] = weatherReport "Frankfurt"

Page 21: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

in/of

winner = yes if pick in

[47, 92, 13]

Page 22: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

String Interpolation

"Hello, #{name}"

html = """

Cup of CoffeeScript

</strong>

"""

Page 23: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

De�ne ClassesInitializerFat ArrowAccess Prototype

De�ne Classes

class Animal

constructor: (name) ->

@name = name

move: (meters) ->

alert "#{@name} moved #{meters}m."

class Snake extends Animal

move: ->

alert "Slithering..."

super 5

Page 24: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Initializer

class Animal

constructor: (@name) ->

(function() {

var Animal;

Animal = (function() {

function Animal(name) {

this.name = name;

}

return Animal;

})();

).call(this);

Page 25: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Fat Arrow replaces this+that

Account = (@customer, @cart) ->

$('.shopping_cart').bind 'click',

(event) =>

@customer.purchase @cart

Page 26: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

Access Prototype

String::dasherize = ->

this.replace /_/g, "-"

String.prototype.dasherize = function() {

return this.replace(/_/g, "-");

};

Page 27: JavaScript, the good parts + syntactic sugar = CoffeeScript

Classes

References

Douglas Crockford "JavaScript: The Good Parts"

http://co�eescript.org/