CoffeeScript is a structured programming language that is compiled to JavaScript and has become very popular within the Node.js and Rails community . Basically it’s a JavaScript syntax rewrite . The syntax CoffeeScript uses is very similar to Ruby or Python . The code in .coffee files is not interpreted as JavaScript, but is compiled into .js files. This language inspired by Ruby, Python and HaskellIt improves the brevity and readability of JavaScript, and adds more sophisticated features such as list comprehension and pattern matching. CoffeeScript predictably compiles to JavaScript, and programs can generally be written in 1/3 fewer lines of code with no effect on performance or runtime.
Summary
[ hide ]
- 1 Story
- 2 Advantages of using CoffeeScript
- 3 Ways of Working
- 4 Syntax
- 5 Compilation
- 6 Code Examples
- 7 References
History
Jeremy Ashkenas started the CoffeeScript project on December 13, 2009 with a mysterious and intriguing comment on his first GitHub commit “initial commit of the mystery language”. He started creating the compiler in Ruby but in just 3 months he changed his mind and made the compiler to be written with his own language, CoffeeScript. On December 24, he made the first labeled and documented release, 0.1.0. On February 21, 2010 , he released version 0.5, which replaced the Ruby compiler with one written in pure CoffeeScript. The project was soon followed by a multitude of developers on GitHub, where both Jeremy and the other taxpayers added new features every month. On December 24, 2010, Ashkenas announced the release of stable 1.0.0 on Hacker News, the site where the project was first announced. The language had a boost in the web scene again, when in April 2011 David Heinemeier Hansson confirmed the rumors that CoffeeScript was going to be included in version 3.1 of Ruby on Rails .
Advantages of using CoffeeScript
- Just as CSSpreprocessors help us write CSS more simply, CoffeeScript allows us to work more easily with JavaScript code.
- We can write less code, knowing that we will also be following good practices and our project will be more readable.
- It is a good idea to read the compiled result of our code, since as CoffeeScript follows established patterns, we can learn several new things.
- Provides various forms of work.
Ways of Working
- REPL: If we write the coffee command in the console without parameters, an interactive shell similar to Ruby’s IRB will open. It is a good tool for quick experiments.
- On-demand compilation: We can tell CoffeeScript that we want to compile all the files in one directory and put the result in another directory. To do this, we have to run the following command:
coffee -o output directory / -c input directory /
- On-the-fly compilation: In the above way, every time we make a change and want it to compile, we have to execute the command. If instead we want CoffeScript to be watching for changes and automatically compile, we can run this command:
coffee -w -o outputDirectory / -c inputDirectory /
- Compilation into a single file: The above options will produce one JavaScript file for each CoffeeScript file. Many JavaScript files increase the amount of HTTP requests from the browser. To avoid this, we can make all the files compile into one:
coffee -j output directory / file.js -c input directory / *. coffee
Syntax
Many JavaScript statements can be used as expressions in CoffeeScript, for example if, switch and for. These control statements also have Postfix versions . A general principle is that many of the parentheses are unnecessary and can be omitted since indentation can be used instead of curly braces to denote code blocks, function calls are implicit (the parentheses required for a function call in JavaScript can be omitted), object literals are often automatically detected, and so on.
Compilation
The CoffeeScript compiler has been written in CoffeeScript since version 0.5 and is available as a Node.js utility, however the compiler kernel is not based on Node.js and can be run like any JavaScript. An alternative to the Node.js utility is the Coffee Maven Plugin, a plugin for the popular Apache Maven build system . The plugin uses the Rhino JavaScript engine, which is written in Java . The official site CoffeeScript.orgIt has a section called “Try CoffeeScript” in the menu bar, clicking on it opens a modal window where users can enter CoffeeScript code, view the output in JavaScript, and run it directly in the browser. The js2coffee site offers bi-directional translation.
Code Examples
- Variables: In CoffeeScript, variables do not require the var keyword. We only indicate your name and the value it will have.
name = “Myname”
age = 25
With strings, we can use the # symbol followed by curly braces, to add the content of one variable to another:
// will show my Last Name
surname = “# {name} surname”
- Functions: Functions are defined as follows.
…
The word return is not indicated, since the result of the last line of code is always returned.
greet = ->
“Hello World”
greeting = (name) ->
“Hello # {name}”
Functions can be called using the parentheses or not:
greeting “My name”
- Arrays: Arrays can be initialized in different ways.
// 1 – a single line
fix = [“Hello”, “how”, “are you?”]
// 2 – multi line
arrangement = [
“Hello”,
“how”,
“is it so?”
]
// 3 – no commas
arrangement = [
“Hello”
“how”
“is it so?”
]
// 4 – mix
arrangement = [
“Hi how”,
“is it so?”
]
- Objects: When creating JSON objects, we can avoid commas and curly braces.
Object =
member:
name: “Gene Simmons”,
instrument: “bass”
member:
name: “Paul Stanley”,
instrument: “guitar”
member:
name: “Ace Frehley”,
instrument: “guitar”
member:
name: “Peter Criss”,
instrument: “drums”
- Ranges: Ranges are not a standard JavaScript structure, so they are compiled as arrays. They are created by indicating two integers separated by a colon between square brackets.
days = [1..7]
- Classes: Classes are created by indicating the word class together with its name. The methods that this has, are indicated with two points followed by the operator ->.
The attributes of the class are indicated with an at sign.
// form 1
class Auto
constructor: (brand) ->
@mark = brand
// form 2 – indicating the property in the argument list
class Auto
constructor: (@marca) ->
To create an instance of the class use the new operator.
myAuto = new Auto
- Equivalences: CoffeeScript provides us with aliases for JavaScript operators, which helps to make our code more readable.
COFFEESCRIPT JAVASCRIPT
is ===
isnt! ==
not!
and &&
or ||
yes, on true
no off false
Or end
For example:
// CoffeeScript
show () if light is on
// JavaScript
if (light === true) {
to show();
}
Furthermore, it provides us with a new operator called “existential operator”; which is a question mark? This operator returns true unless the variable is null or undefined.
// CoffeeScript
volume = 5 if music?
// JavaScript
if (typeof music! == “undefined” && music! == null) {
volume = 5;
