SlideShare a Scribd company logo
1 of 44
Download to read offline
JavaScript “bien hecho”
Yeray Darias
CoffeeScript
ydarias@gmail.com
developerscookbook.blogspot.com
ydarias
Antes de CoffeeScript
fue JavaScript
Un poco de historia reciente
Finales del año 1994 ...
En el año 1995 ...
Brendan Eich idea y programa
10Días
Mochaen apenas
Mocha
LiveScript
JavaScript
Allá por el año 1997 ...
A principios del 2000 ...
JavaScript tenía algunos amigos
pero noeramuypopular
En la actualidad ...
JavaScript está en todas partes
Javascript
¿Qué demonios es
CoffeeScript?
Pongamonos en situación
Es una idea que tuvo
“CoffeeScript it’s just
JavaScript”
CoffeeScript es
un lenguaje de programación
que “genera”
JavaScript
JavaScriptWTFs
Douglas Crockford
JavaScript
The good parts
Global variables
CoffeeScriptsolved!
var message = “hola”;!
!
function saluda() {!
return message;!
}
var message = “adios”;!
!
function despidete() {!
return message;!
}
Global variables
Si ambos ficheros están “cargados”,
¿Cuál es la salida esperada en cada
función?
Global variables
CoffeeScript no crea variables globales de
forma implícita
(function() {!
var message, saluda;!
!
message = "hola";!
!
saluda = function() {!
return message;!
};!
}).call(this);
message = "hola"!
!
saluda = () -> !
message
Scopes
Scopes
Todas las variables en una función se
declaran al principio
(function() {!
var message, saluda;!
!
message = "hola";!
!
saluda = function() {!
return message;!
};!
}).call(this);
message = "hola"!
!
saluda = () -> !
message
Semicolons
CoffeeScriptsolved!
Semicolons
CoffeeScript autocompleta los ;
(function() {!
var message, saluda;!
!
message = "hola";!
!
saluda = function() {!
return message;!
};!
}).call(this);
message = "hola"!
!
saluda = () -> !
message
Reserved words
CoffeeScriptsolved!
Reserved words
CoffeeScript escapa las palabras reservadas
automáticamente
var myObject;!
!
myObject = {!
"case": 'keyword',!
tutu: 'allowed name'!
};
myObject = !
case: 'keyword'!
tutu: 'allowed name'
typeof
Equality comparisons
CoffeeScriptsolved!
Equality comparisons
CoffeeScript siempre usa los operadores
como ===, !==, ...
var testFunction;!
!
testFunction =
function(input) {!
if (input === 'string') {!
'string';!
!
}!
if (input === 9) {!
return 'number nine';!
}!
};
testFunction = (input) -> !
if (input == 'string')!
'string'!
if (input == 9)!
'number nine'
eval()
continue
switch fall through
CoffeeScriptsolved!
switch fall through
Bond = (input) -> !
switch input!
when 'Sean Connery', 'Daniel Craig'!
'Fucking crack'!
when 'Roger Moore'!
'A bit boring'
var Bond;!
!
Bond = function(input) {!
switch (input) {!
case 'Sean Connery':!
case 'Daniel Craig':!
return 'Fucking crack';!
case 'Roger Moore':!
return 'A bit boring';!
}!
};!
Todas las opciones acaban con un return
Global variables
Scopes
Semicolons
Reserved words
typeof
Equality comparison
eval()
continue
Switch fall through
CoffeeScript“fabrica”
bloques JavaScript
Control de flujo
mood = greatlyImproved if singing!
!
if happy and knowsIt!
clapsHands()!
else!
showIt()!
!
date = if friday then sue else jill!
!
isToday = yes unless yesterday or tomorrow!
!
// -----------------------------------------------------!
!
cholesterol = 127!
!
healthy = 200 > cholesterol > 60!
Chained comparisons
Everything a expression
Control de flujo
Bond = (input) -> !
switch input!
when 'Sean Connery', 'Daniel Craig'!
'Fucking crack'!
when 'Roger Moore'!
'A bit boring'!
else!
'No comments'
Bucles
# Health conscious meal.!
foods = ['broccoli', 'spinach', 'chocolate']!
eat food for food in foods when food isnt 'chocolate'!
!
countdown = (num for num in [10..1])!
!
# Econ 101!
if this.studyingEconomics!
buy() while supply > demand!
sell() until supply > demand!
!
while age < 18!
canNotSmoke()!
canNotDrink()
Funciones
square = (x) -> x * x!
cube = (x) -> square(x) * x!
!
fill = (container, liquid = "coffee") ->!
"Filling the #{container} with #{liquid}..."!
!
// --------------------------------------------------!
!
awardMedals = (first, second, others...) ->!
gold = first!
silver = second!
rest = others!
!
!
Splats
String interpolation
Operators & aliases
CoffeeScript JavaScript
is ===
isnt !==
not !
and &&
or ||
true, yes, on true
false, no, off false
@, this this
of in
in no JS equivalent
‘The’ operator
?
es el operador existencial en
CoffeeScript
Clases
class Animal!
constructor: (@name) ->!
!
move: (meters) ->!
alert @name + " moved #{meters}m."!
!
class Snake extends Animal!
move: ->!
alert "Slithering..."!
super 5!
!
class Horse extends Animal!
move: ->!
alert "Galloping..."!
super 45
Clases
!
!
sam = new Snake "Sammy the Python"!
tom = new Horse "Tommy the Palomino"!
!
sam.move()!
tom.move()!
Function binding
Account = (customer, cart) ->!
@customer = customer!
@cart = cart!
!
$('.shopping_cart').bind 'click', (event) =>!
@customer.purchase @cart!
!
var Account;!
!
Account = function(customer, cart) {!
var _this = this;!
this.customer = customer;!
this.cart = cart;!
return $('.shopping_cart').bind('click', function(event) {!
return _this.customer.purchase(_this.cart);!
});!
};!
Ahoratocaprogramar

More Related Content

Similar to Coffee Script

When Devs Do Ops
When Devs Do OpsWhen Devs Do Ops
When Devs Do OpsWooga
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to JavascriptKevin Ball
 
CoffeeScript, An Introduction for Nodejs developers
CoffeeScript, An Introduction for Nodejs developersCoffeeScript, An Introduction for Nodejs developers
CoffeeScript, An Introduction for Nodejs developersMehdi Valikhani
 
Desert Code Camp 2014: C#, the best programming language
Desert Code Camp 2014: C#, the best programming languageDesert Code Camp 2014: C#, the best programming language
Desert Code Camp 2014: C#, the best programming languageJames Montemagno
 
Functional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event SystemsFunctional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event SystemsLeonardo Borges
 
Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*The Wolff
 

Similar to Coffee Script (10)

Quick coffeescript
Quick coffeescriptQuick coffeescript
Quick coffeescript
 
When Devs Do Ops
When Devs Do OpsWhen Devs Do Ops
When Devs Do Ops
 
test
testtest
test
 
Intro to Javascript
Intro to JavascriptIntro to Javascript
Intro to Javascript
 
Coffee script throwdown
Coffee script throwdownCoffee script throwdown
Coffee script throwdown
 
CoffeeScript, An Introduction for Nodejs developers
CoffeeScript, An Introduction for Nodejs developersCoffeeScript, An Introduction for Nodejs developers
CoffeeScript, An Introduction for Nodejs developers
 
Desert Code Camp 2014: C#, the best programming language
Desert Code Camp 2014: C#, the best programming languageDesert Code Camp 2014: C#, the best programming language
Desert Code Camp 2014: C#, the best programming language
 
Functional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event SystemsFunctional Reactive Programming / Compositional Event Systems
Functional Reactive Programming / Compositional Event Systems
 
Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*Why I will never write JavaScript ever again*
Why I will never write JavaScript ever again*
 
Coffeescript slides
Coffeescript slidesCoffeescript slides
Coffeescript slides
 

More from Yeray Darias

Runnics at ProductHunt Madrid
Runnics at ProductHunt MadridRunnics at ProductHunt Madrid
Runnics at ProductHunt MadridYeray Darias
 
Otogami at Tetuan Valley
Otogami at Tetuan ValleyOtogami at Tetuan Valley
Otogami at Tetuan ValleyYeray Darias
 
Runnics en Betabeers Madrid
Runnics en Betabeers MadridRunnics en Betabeers Madrid
Runnics en Betabeers MadridYeray Darias
 
Introducción a la arquitectura software
Introducción a la arquitectura softwareIntroducción a la arquitectura software
Introducción a la arquitectura softwareYeray Darias
 
Introducción a jQuery
Introducción a jQueryIntroducción a jQuery
Introducción a jQueryYeray Darias
 
Integración Continua - TLP+i 2K10
Integración Continua - TLP+i 2K10Integración Continua - TLP+i 2K10
Integración Continua - TLP+i 2K10Yeray Darias
 

More from Yeray Darias (9)

Runnics at ProductHunt Madrid
Runnics at ProductHunt MadridRunnics at ProductHunt Madrid
Runnics at ProductHunt Madrid
 
Otogami at Tetuan Valley
Otogami at Tetuan ValleyOtogami at Tetuan Valley
Otogami at Tetuan Valley
 
Runnics en Betabeers Madrid
Runnics en Betabeers MadridRunnics en Betabeers Madrid
Runnics en Betabeers Madrid
 
Agile and Scrum
Agile and ScrumAgile and Scrum
Agile and Scrum
 
Introducción a la arquitectura software
Introducción a la arquitectura softwareIntroducción a la arquitectura software
Introducción a la arquitectura software
 
Scrum
ScrumScrum
Scrum
 
SOLID principles
SOLID principlesSOLID principles
SOLID principles
 
Introducción a jQuery
Introducción a jQueryIntroducción a jQuery
Introducción a jQuery
 
Integración Continua - TLP+i 2K10
Integración Continua - TLP+i 2K10Integración Continua - TLP+i 2K10
Integración Continua - TLP+i 2K10
 

Recently uploaded

DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about usDynamic Netsoft
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataBradBedford3
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfPower Karaoke
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdfWave PLM
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackVICTOR MAESTRE RAMIREZ
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - InfographicHr365.us smith
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsAlberto González Trastoy
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxbodapatigopi8531
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...MyIntelliSource, Inc.
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comFatema Valibhai
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio, Inc.
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantAxelRicardoTrocheRiq
 
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝soniya singh
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...OnePlan Solutions
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfkalichargn70th171
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...gurkirankumar98700
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...stazi3110
 
cybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningcybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningVitsRangannavar
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyFrank van der Linden
 

Recently uploaded (20)

DNT_Corporate presentation know about us
DNT_Corporate presentation know about usDNT_Corporate presentation know about us
DNT_Corporate presentation know about us
 
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer DataAdobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
Adobe Marketo Engage Deep Dives: Using Webhooks to Transfer Data
 
The Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdfThe Evolution of Karaoke From Analog to App.pdf
The Evolution of Karaoke From Analog to App.pdf
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
Cloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStackCloud Management Software Platforms: OpenStack
Cloud Management Software Platforms: OpenStack
 
Asset Management Software - Infographic
Asset Management Software - InfographicAsset Management Software - Infographic
Asset Management Software - Infographic
 
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time ApplicationsUnveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
Unveiling the Tech Salsa of LAMs with Janus in Real-Time Applications
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed DataAlluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
Alluxio Monthly Webinar | Cloud-Native Model Training on Distributed Data
 
Salesforce Certified Field Service Consultant
Salesforce Certified Field Service ConsultantSalesforce Certified Field Service Consultant
Salesforce Certified Field Service Consultant
 
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
Call Girls in Naraina Delhi 💯Call Us 🔝8264348440🔝
 
Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...Advancing Engineering with AI through the Next Generation of Strategic Projec...
Advancing Engineering with AI through the Next Generation of Strategic Projec...
 
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdfThe Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
The Essentials of Digital Experience Monitoring_ A Comprehensive Guide.pdf
 
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
(Genuine) Escort Service Lucknow | Starting ₹,5K To @25k with A/C 🧑🏽‍❤️‍🧑🏻 89...
 
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
Building a General PDE Solving Framework with Symbolic-Numeric Scientific Mac...
 
cybersecurity notes for mca students for learning
cybersecurity notes for mca students for learningcybersecurity notes for mca students for learning
cybersecurity notes for mca students for learning
 
Engage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The UglyEngage Usergroup 2024 - The Good The Bad_The Ugly
Engage Usergroup 2024 - The Good The Bad_The Ugly
 
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...Call Girls In Mukherjee Nagar 📱  9999965857  🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
Call Girls In Mukherjee Nagar 📱 9999965857 🤩 Delhi 🫦 HOT AND SEXY VVIP 🍎 SE...
 

Coffee Script