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

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")

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

Classes

(function() {

var items;

items = $("li");

}).call(this);

Co�eeScript:

items = $("li")

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)

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

Classes

switch

case "Mon":

go(work); break;

case "Tue":

go(iceFishing); break;

default:

chill(24);

else chill 24

Classes

switch

case "Mon":

go(work); break;

case "Tue":

go(iceFishing); break;

default:

chill(24);

else chill 24

Classes

Check for Optional Parameter

if (defaultAmount)

if (defaultAmount != null)

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

defaultAmount != null)

Co�eeScript:

if defaultAmount?

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Classes

if (defaultAmount)

Co�eeScript:

if defaultAmount?

Classes

[optional] comparision

0 == ""

Use === instead

Classes

[optional] comparision

0 == ""

Use === instead

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)

Classes

Splats, Destructuring Assignment

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

# TODO implementation

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

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

Classes

winner = yes if pick in

[47, 92, 13]

Classes

String Interpolation

"Hello, #{name}"

html = """

Cup of CoffeeScript

</strong>

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

Classes

Initializer

class Animal

constructor: (@name) ->

(function() {

var Animal;

Animal = (function() {

function Animal(name) {

this.name = name;

return Animal;

).call(this);

Classes

Fat Arrow replaces this+that

Account = (@customer, @cart) ->

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

(event) =>

@customer.purchase @cart

Classes

Access Prototype

String::dasherize = ->

this.replace /_/g, "-"

String.prototype.dasherize = function() {

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

Classes

References

Douglas Crockford "JavaScript: The Good Parts"

http://co�eescript.org/

JavaScript, the good parts + syntactic sugar = CoffeeScript

Software

Transcript of JavaScript, the good parts + syntactic sugar = CoffeeScript