CoffeeScript » Variables


Variables are something you’ll find in every programming language. They are like containers in which you can store a value, so you don’t have to type the same value more than once. You’ll use them a lot.

You can pick any name for your variable, and save a value in it using =, the assign operator.

A variable can contain a number, a Boolean value, or a text string. (Plus also arrays, objects, functions,… but we’ll look at those later.)


Numbers can be any size, can have decimals, and can be positive or negative.

temperatureOutside = -23
cupsOfCoffee = 3
spoonsOfSugar = 0.5
amountOfTimesChuckNorrisHasCried = 0
theAnswerToTheUltimateQuestionOfLifeTheUniverseAndEverything = 42

By the way, if the temperatures in these examples seem way too low for you, it’s because they’re in Celsius. (You can switch between Celsius and Fahrenheit in the ePub version of the book. 😉)

A few tips for naming your variables:

Try to use descriptive names (so no ‘variable1’, ‘variable2’, etc.), but don’t overdo it, the 42 example above is clearly too long.

It’s also good practice to start with a lowercase letter and use camel case (second and consecutive words have a capital).

Variable names can contain numbers, only not as the first character, e.g., not ‘1stVariable’.

Since variables are, well, variable, you can always change their content.

# Ah, the sun came out!
temperatureOutside = -22
# I had another coffee with half a spoon of sugar
cupsOfCoffee = cupsOfCoffee + 1
spoonsOfSugar = spoonsOfSugar + 0.5


A Boolean is like an on/off switch. It can only have one of two values: yes or no.

hasChuckNorrisCriedYet = no
didIHaveTooMuchCoffee = yes

Note: true and false are also allowed, as are on and off.


A string variable contains text. Strings always come in quotation marks.

sentence1 = "A user interface is like a joke."

In fact, anything you put in quotation marks will be considered a string.

cupsOfCoffee = "4"
didIHaveTooMuchCoffee = "yes"

This is important because it makes a difference when you do things with these variables, like use the + operator to concatenate them.

String concatenation

Earlier you learned that you could use the common add, subtract, multiply and divide operators ( + - * / ) on numbers. You can also use + on strings to join them together.

sentence1 = "A user interface is like a joke."
sentence2 = "If you have to explain it, it’s not that good."
print sentence1 + " " + sentence2
» "A user interface is like a joke. If you have to explain it, it’s not that good."

Note: The print command will output something to Framer’s console. Lines starting with » in these examples indicate the text that should appear in the console.

Try this:

cupsOfCoffee = 3
cupsOfCoffee = cupsOfCoffee + 1
print "Before lunch, I already had " + cupsOfCoffee + " cups of coffee."
» "Before lunch, I already had 4 cups of coffee."
Download Framer project

Remember what I said about anything in quotation marks being considered a string? This is why that’s so important:

cupsOfCoffee = "4"
cupsOfCoffee = cupsOfCoffee + 1
print "Yesterday I drank " + cupsOfCoffee + " cups of coffee."
» "Yesterday I drank 41 cups of coffee."
Download Framer project

String interpolation

There’s one more way of combining strings in CoffeeScript: string interpolation. Using #{nameVariable} you can insert variables in the text.

temperature = -23
activity = "drinking coffee"
temperatureFahrenheit = (temperature * 1.8) + 32
# Math.round() turns the result (-9.399…)
# into a whole number
temperatureFahrenheit = Math.round temperatureFahrenheit
print "The current temperature in Kyiv is #{temperature}°C; that’s #{temperatureFahrenheit}°F. Fortunately, I’m inside #{activity}."
» "The current temperature in Kyiv is -23°C; that’s -9°F. Fortunately, I’m inside drinking coffee."
Download Framer project