SlideShare a Scribd company logo
CoffeeScript
JavaScript in a simple way


    Open Tech Talk – 22 Jan 2011
         @HackerSpacePP
           @lchanmann
CoffeeScript
●
    One-to-one with JavaScript
●
    Better functional syntax
●
    Compiles to the good parts
Why CoffeeScript?
●
    Less code
●
    Readability
●
    Easy to understand, and maintain
●
    But … you should know how JavaScript's
    concept work
JavaScript
CoffeeScript
JavaScript
Coffee
JavaScript
CoffeeScript
Functions



square = (x) -> x * x

area = (x, y) -> x * y

cube = (x) -> x * square x
Objects


                        kids = {
                           brother: {
kids =
                              name: "Max",
  brother:

                   >>
                              age: 11
    name: "Max"
                           },
    age: 11
                           sister: {
  sister:
                              name: "Ida",
    name: "Ida"
                              age: 9
    age: 9
                           }
                        };
Lexical Scoping / Variable Safety


                        (function() {
                          var change, inner, outer;
                          outer = 1;
outer = 1

                   >>
                          change = function() {
change = ->
                             var inner;
  inner = -1
                             inner = -1;
  outer = 10
                             return (outer = 10);
inner = change()
                          };
                          inner = change();
                        }).call(this);
Splats...



gold = silver = rest = "unknown"

awardMedals = (first, second, others...) ->
  gold   = first
  silver = second
  rest   = others
OOP

class Animal
  constructor: (@name) ->

 move: (meters) ->
   alert @name + " moved " + meters + "m."

class Snake extends Animal
  move: ->
    alert "Slithering..."
    super 5

sam = new Snake "Sammy the Python"
sam.move()
The Rest...
✔   Existential operator
✔   Pattern matching with object literals
✔   Switch/When/Else
✔   Chained comparison
✔   Array comprehension
✔   Array slicing and splicing with ranges
✔   Everything is an expression; always a return value
✔   Function binding syntactical sugar
✔   String and RegExp Interpolation
✔   Multiline Strings, Heredocs, and Block Comments
✔   "text/coffeescript" script tags with extras/coffee-script.js
✔   It's just JavaScript
Last but not lease
●
    http://ryan.mcgeary.org/talks/2010/10/21/coffeescript-novarug/
●
    http://www.slideshare.net/mtaberski/coffee-script-6089214


●
    http://jashkenas.github.com/coffee-script/
Lim Chanmann


http://chanmannlim.wordpress.com/
           @lchanmann
      chanmannlim@gmail.com




           InSTEDD

More Related Content

Similar to CoffeeScript - JavaScript in a simple way (20)

PDF
CoffeeScript
Ryan McGeary
 
PDF
CoffeeScript
Scott Leberknight
 
PDF
CoffeeScript
None
 
PDF
Damn Fine CoffeeScript
niklal
 
PDF
CoffeeScript
Eddie Kao
 
PDF
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
KEY
JavaScript Neednt Hurt - JavaBin talk
Thomas Kjeldahl Nilsson
 
PDF
Javascript, Do you speak it!
Victor Porof
 
PPT
Wakanday JS201 Best Practices
Juergen Fesslmeier
 
PPSX
Javascript variables and datatypes
Varun C M
 
PPTX
Introduction to Client-Side Javascript
Julie Iskander
 
PDF
Modern Application Foundations: Underscore and Twitter Bootstrap
Howard Lewis Ship
 
PDF
Coffee Script
Michal Taberski
 
PPTX
Coding 101: A hands-on introduction
Bohyun Kim
 
PDF
FITC CoffeeScript 101
Faisal Abid
 
KEY
CoffeeScript - A Rubyist's Love Affair
Mark
 
PDF
An Introduction to JavaScript: Week One
Event Handler
 
PDF
The Future of JavaScript (Ajax Exp '07)
jeresig
 
PDF
JavaScript 101
ygv2000
 
PDF
Coffee script
timourian
 
CoffeeScript
Ryan McGeary
 
CoffeeScript
Scott Leberknight
 
CoffeeScript
None
 
Damn Fine CoffeeScript
niklal
 
CoffeeScript
Eddie Kao
 
Rails-like JavaScript Using CoffeeScript, Backbone.js and Jasmine
Raimonds Simanovskis
 
JavaScript Neednt Hurt - JavaBin talk
Thomas Kjeldahl Nilsson
 
Javascript, Do you speak it!
Victor Porof
 
Wakanday JS201 Best Practices
Juergen Fesslmeier
 
Javascript variables and datatypes
Varun C M
 
Introduction to Client-Side Javascript
Julie Iskander
 
Modern Application Foundations: Underscore and Twitter Bootstrap
Howard Lewis Ship
 
Coffee Script
Michal Taberski
 
Coding 101: A hands-on introduction
Bohyun Kim
 
FITC CoffeeScript 101
Faisal Abid
 
CoffeeScript - A Rubyist's Love Affair
Mark
 
An Introduction to JavaScript: Week One
Event Handler
 
The Future of JavaScript (Ajax Exp '07)
jeresig
 
JavaScript 101
ygv2000
 
Coffee script
timourian
 

Recently uploaded (20)

PDF
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
PPTX
Digital Circuits, important subject in CS
contactparinay1
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PPTX
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PPTX
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PPTX
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PDF
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
The 2025 InfraRed Report - Redpoint Ventures
Razin Mustafiz
 
Digital Circuits, important subject in CS
contactparinay1
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
COMPARISON OF RASTER ANALYSIS TOOLS OF QGIS AND ARCGIS
Sharanya Sarkar
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
Agentforce World Tour Toronto '25 - Supercharge MuleSoft Development with Mod...
Alexandra N. Martinez
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
“Computer Vision at Sea: Automated Fish Tracking for Sustainable Fishing,” a ...
Edge AI and Vision Alliance
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
Kit-Works Team Study_20250627_한달만에만든사내서비스키링(양다윗).pdf
Wonjun Hwang
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
Mastering ODC + Okta Configuration - Chennai OSUG
HathiMaryA
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
SIZING YOUR AIR CONDITIONER---A PRACTICAL GUIDE.pdf
Muhammad Rizwan Akram
 
Ad

CoffeeScript - JavaScript in a simple way

  • 1. CoffeeScript JavaScript in a simple way Open Tech Talk – 22 Jan 2011 @HackerSpacePP @lchanmann
  • 2. CoffeeScript ● One-to-one with JavaScript ● Better functional syntax ● Compiles to the good parts
  • 3. Why CoffeeScript? ● Less code ● Readability ● Easy to understand, and maintain ● But … you should know how JavaScript's concept work
  • 10. Functions square = (x) -> x * x area = (x, y) -> x * y cube = (x) -> x * square x
  • 11. Objects kids = { brother: { kids = name: "Max", brother: >> age: 11 name: "Max" }, age: 11 sister: { sister: name: "Ida", name: "Ida" age: 9 age: 9 } };
  • 12. Lexical Scoping / Variable Safety (function() { var change, inner, outer; outer = 1; outer = 1 >> change = function() { change = -> var inner; inner = -1 inner = -1; outer = 10 return (outer = 10); inner = change() }; inner = change(); }).call(this);
  • 13. Splats... gold = silver = rest = "unknown" awardMedals = (first, second, others...) -> gold = first silver = second rest = others
  • 14. OOP class Animal constructor: (@name) -> move: (meters) -> alert @name + " moved " + meters + "m." class Snake extends Animal move: -> alert "Slithering..." super 5 sam = new Snake "Sammy the Python" sam.move()
  • 15. The Rest... ✔ Existential operator ✔ Pattern matching with object literals ✔ Switch/When/Else ✔ Chained comparison ✔ Array comprehension ✔ Array slicing and splicing with ranges ✔ Everything is an expression; always a return value ✔ Function binding syntactical sugar ✔ String and RegExp Interpolation ✔ Multiline Strings, Heredocs, and Block Comments ✔ "text/coffeescript" script tags with extras/coffee-script.js ✔ It's just JavaScript
  • 16. Last but not lease ● http://ryan.mcgeary.org/talks/2010/10/21/coffeescript-novarug/ ● http://www.slideshare.net/mtaberski/coffee-script-6089214 ● http://jashkenas.github.com/coffee-script/