CoffeeScript Application Development: What JavaScript user wouldn't want to be able to dramatically reduce application development time? This book will teach you the clean, elegant CoffeeScript language and show you how to build stunning applications.

I implore you to open up a console as you read this chapter and try out the examples for yourself. You don't strictly have to; I'll show you any important output from the example code. However, following along will make you more comfortable with the command-line tools, give you a chance to write some CoffeeScript yourself, and most importantly, will give you an opportunity to experiment. Try changing the examples in small ways to see what happens. If you're confused about a piece of code, playing around and looking at the outcome will often help you understand what's really going on.

The easiest way to follow along is to simply open up a CoffeeScript console. Remember how we did that in the previous chapter? Just run this from the command line to get an interactive console:

coffee

If you'd like to save all your code to return to later, or if you wish to work on something more complicated, you can create files instead and run those. Give your files the .coffee...

Let's get started! We'll begin with something simple:

x = 1 + 1

You can probably guess what JavaScript this will compile to:

var x;
x = 1 + 1;

x = 1\
  + 1

"foo"
  .concat("barbaz")
  .replace("foobar", "fubar")

x = 1; y = 2

Function invocation can look very familiar in CoffeeScript:

console.log("Hello, planet!")

Other than the missing semicolon, that's exactly like JavaScript, right? But function invocation can also look different:

console.log "Hello, planet!"

Whoa! Now we're in unfamiliar ground. This will work exactly the same as the previous example, though. Any time you call a function with arguments, the parentheses are optional. This also works with more than one argument:

Math.pow 2, 3

While you might be a little nervous writing this way at first, I encourage you to try it and give yourself time to become comfortable with it. Idiomatic CoffeeScript style eliminates parentheses whenever it's sensible to do so. What do I mean by "sensible"? Well, imagine you're reading your code for the first time, and ask yourself which style makes it easiest to comprehend. Usually it's most readable without parentheses, but there are some occasions when your code is complex enough that judicious use of parentheses...

Control structures (such as if, else, and so on) in CoffeeScript share a foundation with JavaScript. We'll start out with some constructions that will feel familiar except some slightly different syntax. However, we'll then build on those basics and explore some new ways to express control flow.

So far, most of the CoffeeScript syntax we have covered has been somewhat superficial. Less punctuation makes code more readable (and prettier!), but CoffeeScript promises more than that. As we work through these control structures, you'll get a taste of some improvements that make CoffeeScript a more expressive language. Code isn't just machine instructions, it's also a form of communication. Good code not only works as intended, but communicates to other humans about what it is doing and how it is doing that. In this section we'll see some ways that CoffeeScript helps you communicate more effectively.

Now that we know how to use these control structures, let's learn about some comparison operators we can use to test the truthfulness of useful questions. There's one big surprise in here, so let's get that out of the way. == and != in CoffeeScript don't compile to their equivalents in JavaScript.

1 == 2
3 != 4

becomes:

1 === 2;
3 !== 4;

Other than that surprise, the other common JavaScript operators are all present and work as you might expect.

if 1 < 2 && 3 >= 2
  if false || true
    if !false
      console.log "All is well."

However...

Arrays, at their most simple, look very similar to JavaScript.

languages = [ "english", "spanish", "french" ]
console.log languages[1]

You may use a trailing comma and it will be compiled away:

languages = [
  "english",
  "spanish",
  "french",
]

becomes:

var languages;
languages = ["english", "spanish", "french"];

Many people prefer this style, as it makes it easier to change the contents of an array or object. And you'll be thankful for this safeguard if you've ever left a trailing comma in a JavaScript array, only to discover (always at a very inconvenient time) that it causes an execution-halting error in one particular browser. The browser in question will remain unnamed for the sake of our collective blood pressure. I want this book to be a book about nice things. Happy things.

If you're feeling daring, you can eschew commas altogether. That's right! When the members of your array are declared on separate lines, you may omit the commas and CoffeeScript will still know what to do.

languages...

You have no doubt spent a lot of time working with objects in JavaScript. They are the most versatile data structure in the language, and JavaScript encourages heavy use of them. CoffeeScript keeps all that great support for objects, and adds a few helpful features for dealing with them.

Declaring an object looks very familiar. Let's record a few biographical details:

author = { name: "Ian", age: 26 }

We can still access object properties like we do in JavaScript:

author.name
author["age"]
author.favoriteLanguage = "CoffeeScript"

Just like CoffeeScript arrays, if we declare the object properties on different lines, we can optionally omit the commas.

authorsBicycle = {
  color: "black"
  fenders: true
  gears: 24
}

That's not all! We can also omit the curly braces. This is possible on both the single-line and multi-line versions.

author = name: "Ian", age: 26, favoriteLanguage: "CoffeeScript"
authorsBicycle =
  color: "black"
  fenders: true
  gears: 24

This even works with nested objects...

We've covered a lot of ground in this chapter. We learned:

Not only did we learn about all those things, but we made sure to avoid a few common mistakes, and learned why it was possible to make those mistakes. We've compared many of the CoffeeScript statements to the compiled JavaScript, so hopefully you're developing a good mental map of how CoffeeScript translates to JavaScript.

Now that we've got a solid handle on the basics, we're ready to start building our application. In the next chapter, we'll begin development of a small web application to help manage a pet shop. We'll need all of the skills we learned in this chapter, and we'll be learning a few more as we work!