CoffeeScript:

The Great Parts

(abridged)

An introduction to my two favorite CoffeeScript features:

Destructuring Assignment
Comprehensions

But first...

A Brief Intro to CoffeeScript

In 11 days, a guy wrote the worst.language.ever

Years later, another guy was like: "Dude, SO NOT the worst language ever. I wrote a book."

And most people were like:

...still the worst.

...but this guy.  He was really like: "OMG.  That totes IS a cool story, bro."

So, he wrote CoffeeScript

...and this is what it does

You write CoffeeScript


  class Person


and CoffeeScript writes JavaScript that

the "I wrote a book" guy would have


  var Person;

  Person = (function() {
    function Person() {}

    return Person;

  })();


To learn more


http://coffeescript.org/

So, Comprehensions and Destructuring Assignment...


Big words

My Goal:

To give you simple definitions of these terms and give you enough info that you can (somewhat painlessly) read the docs

Destructuring Assignment


Easy in. Easy out.

Let's start


  food = 'toast'
    aFood = food
  console.log aFood  # 'toast'

What about arrays?


  foods = ['toast', 'cheese', 'wine']
     theFood = foods
  console.log theFood  # ['toast', 'cheese', 'wine']

...and if i want contents?


  foods = ['toast', 'cheese', 'wine']
    first = foods[0]
  console.log first  # 'toast'

Let's try CoffeeScript


  foods = ['toast', 'cheese', 'wine']
      first = foods[0]
  console.log first  # 'toast'

Strip the accessor on `foods`


  foods = ['toast', 'cheese', 'wine']
    first = foods
  console.log first  # ['toast', 'cheese', 'wine']

and put it on you `first`


  foods = ['toast', 'cheese', 'wine']
    [first] = foods
  console.log first  # 'toast'

Let's grab the rest


  foods = ['toast', 'cheese', 'wine']
    [first, second, third] = foods   console.log first, second, third   # toast cheese wine

Let's try and object


  foods = {carb: 'toast', fat: 'cheese', beverage: 'wine'}
    carb = foods.carb
  console.log carb   # 'toast'

Lose the message to food


  foods = {carb: 'toast', fat: 'cheese', beverage: 'wine'}
    carb = foods
  console.log carb  # {carb: 'toast', fat: 'cheese', beverage: 'wine'}

wrap our `carb` in {}


  foods = {carb: 'toast', fat: 'cheese', beverage: 'wine'}
    {carb} = foods
  console.log carb   # 'toast'

Let's get the rest...


  foods = {carb: 'toast', fat: 'cheese', beverage: 'wine'}
    {carb, fat, beverage} = foods
  console.log carb, fat, beverage  # 'toast cheese wine'

...and nesting works!


  foods = {carb: 'toast', fat: 'cheese', beverage: ['wine', 'coffee']}
    {carb, fat, beverage:[firstBev, lastBev]} = foods
  console.log carb, fat, firstBev, lastBev  # 'toast cheese wine coffee'


Comprehensions


Smart loops

Let's start


  for(var i = 1; i <= 10; i++) {
    log(i);  }  // The same for loop we've had for 40 years

(), {} — get out of here!


  for var i = 1; i <= 10; i++       log i ;

var, ; — see ya!


  for     i = 1  i <= 10  i++    log i

strip out the extra i's


  for     i = 1    <= 10        log i

make 1-10 a range


  for     i       [1..10]    log i

...and tell our loop to use it


  for     i  in   [1..10]    log i

Boom, CoffeeScriptin'

   for i in [1..10]    log i

again... Javascript


  for(var i = 1; i <= 10; i++) {    log(i);  }

CoffeeScript


  for i in [1..10]    log i

Let's play with food again...


  foods = ['toast', 'cheese', 'wine'] 
  for food in  foods     eat food

We can remove our action


  foods = ['toast', 'cheese', 'wine'] 
  for food in  foods     eat food

and put if before our loop.


  foods = ['toast', 'cheese', 'wine']
  eat food for food in  foods

and put if before our loop.


  foods = ['toast', 'cheese', 'wine']
  eat food for food in  foods

What about conditionals?


  foods = ['toast', 'cheese', 'wine']
  eat food for food in  foods

Append them to your loop


  foods = ['toast', 'cheese', 'wine']
  eat food for food in  foods  when food isnt 'wine'

Append them to your loop


  foods = ['toast', 'cheese', 'wine']
  eat food for food in  foods  when food isnt 'wine'

How does assignment work?


  foods = ['toast', 'cheese', 'wine']
  aFood = food for food in  foods  when food isnt 'wine'
  # ?

How does assignment work?


  foods = ['toast', 'cheese', 'wine']
  aFood = food for food in  foods  when food isnt 'wine'
  # aFood = 'cheese'

Add parens to collect()


  foods = ['toast', 'cheese', 'wine']
  aFood = (food for food in  foods  when food isnt 'wine')   # ?

Add parens to collect()


  foods = ['toast', 'cheese', 'wine']
  aFood = (food for food in  foods  when food isnt 'wine')   # aFood = ['toast', 'cheese']

The hardest part to comprehensions is the syntax.


How would Xzibit remember...

Peep mo'


http://coffeescript.org/#destructuring

@chantastic

CoffeeScript: The Great Parts

By Michael Chan

Made with Slides.com

CoffeeScript: The Great Parts

  • 2,277

More from Michael Chan