What is CoffeeScript? - CoffeeScript Tutorial

Before we get started working with CoffeeScript, let's take a minute to talk about what it is and why you may want to try it. CoffeeScript is a programming language that tries to help you write better JavaScript. It's a little like using Sass or LESS for CSS. You write CoffeeScript in a shorthand form that then converts directly to JavaScript. When working with CoffeeScript, you'll be spending less time on punctuation and more time thinking about solving problems. CoffeeScript helps you by providing something programmers call Syntactic Sugar. It means that the language adds features that make it easier to take care of common tasks and takes away things that are unnecessary to expressing problems with JavaScript. Let's see how this works. Let's say we're trying to do something really simple with JavaScript. We want to insert some text into an h1 tag when a page finishes loading. And, let's assume we're also using jQuery. Now, you probably think to yourself, well, you have to use a function that automatically loads when our script is called, and then use querySelector, or if you have jQuery, you can use the dollar sign variable. You might even think of the anonymous closure pattern, and the code looks something like this. Now, this is just the type of thing that I have to look up all the time or have a macro for. Now, look at how much punctuation is in there. There are ten parentheses in there, and what are they really doing in terms of expressing your code? Well, absolutely nothing. Neither are the curly braces or the semi-colons. Let's see how we would do this in CoffeeScript. In CoffeeScript, we would type in the dollar sign and then use the special notation, which means function. Then I'm going to add in another tab on a new line and use that dollar sign variable to target the h1, just like you would in jQuery. Then I'm going to use a regular jQuery command, append. And then in quotes, I'll type in a word that I want to append. So I'm going to save this, and you can see that CoffeeScript converted it to pretty much what we had before. Now, even if you don't know anything about CoffeeScript, you can see that writing with CoffeeScript is a lot easier. Most of it makes sense. You're doing something with the dollar sign variable and then pretty much just expressing your intentions. Now, think about how many times you've spent hours chasing a badly placed semicolon or a curly brace. That's what it's like programming with CoffeeScript. More doing and less typing, and it makes a lot of sense. So, let's talk about some of the key features we're seeing here. The first thing you'll probably notice is that a lot of JavaScript's syntax elements are going to be gone. There's no semicolons or curly braces, and there's no var keywords either. CoffeeScript is really smart about adding those for you. Most parentheses can be omitted, except when they make some syntactic sense. And you don't need to use return statements either. One of the ways that CoffeeScript accomplishes its goals is to make whitespace relevant to your coding. It copies this from Ruby or Python. So you use tabs and space to define statement blocks. Another of CoffeeScript's goals is to help you write better JavaScript. And so, the translation tries to write code that utilizes best practices, like moving your variables up to the top of the closest scope. Or for example, if you declare a variable but you forget to use it, it'll just be ignored. Now, I'm a fairly pragmatic person. I don't like to learn things unless I know they're going to make my life easier and more productive. I've never been one to mind JavaScript's punctuation too much. You can clearly see there's an advantage to writing things in CoffeeScript. So far though, I've only shown you the tip of the iceberg.