Chapter 1Values, Types, and Operators
At the core, programming is just about following instructions. You, as the programmer, will write instructions that the computer will follow.
A simple program is:
1 + 2
Which tells the computer, as you were told when first learning arithmetic, to add the numbers 1 and 2 together. The result of this program is the number 3.
While this program evaluates to 3, we haven’t told the computer what to do with that value. So it won’t do anything, and we won’t see any result if we run the program above.
One of the most common things we want to do is print values to the
screen. This is helpful not only in figuring out if our programs are
(NOTE: This uses functionality from the TLC library code, but there is
a similar built in operator called
console.log), we can print a
value to the screen with the
print(1 + 2)
You put what you want to print out inside the parethesis that follow
f(x) or similar. We’ll see a lot of different
operations, and soon be writing our own!
If you want to print multiple expressions out, you can do that as well:
print(1 + 2); print(3 - 2);
; at the end of the line to indicate that we are doing
multiple things. Generally, you should do this after each line, though
You can also do other basic arithmetic, and you can write more complicated expressions:
print(1 + 2 * 3 - 4)
Like human languages, programming languages have a grammar, which
often allows certain expressions (or entire programs) to be embedded
within other programs, as we can see with our program
1 + 2 embedded
print() in the second example. As in arithmetic, sometimes a
program could be ambiguous. For example, in the previous example, if
we first evaluated
1 + 2 before multiplying by
3 we would get a
different answer. These kind of ambiguities are resolved in the same
way as arithmetic—with rules of "precedence" (what operations
"precede" others) and parenthesis to override them.
As an exercise, consider the following:
print((1 + 2) * 3 - 4)
This prints out
5 right now. Try adding parenthesis so that it
-3. Now try changing the parenthesis so that it prints
But programs aren’t all about numbers! Indeed, most programs deal with more interesting forms of data. "Strings" are used to represent text. They are written by enclosing their content in quotes.
"Patch my boat with chewing gum" 'Monkeys wave goodbye'
Both single and double quotes can be used to mark strings as long as the quotes at the start and the end of the string match.
You can also print out strings:
print("Patch my boat with chewing gum")
To make it possible to include
such characters in a string, the following notation is used: whenever
a backslash (
\) is found inside quoted text, it indicates that the
character after it has a special meaning. This is called escaping
the character. A quote that is preceded by a backslash will not end
the string but be part of it. When an
n character occurs after a
backslash, it is interpreted as a newline. Similarly, a
t after a
backslash means a tab character. Take the following string:
"This is the first line\nAnd this is the second"
The actual text contained is this:
This is the first line And this is the second
There are, of course, situations where you want a backslash in a
string to be just a backslash, not a special code. If two backslashes
follow each other, they will collapse together, and only one will be
left in the resulting string value. This is how the string “
character is written like "\n".” can be expressed:
"A newline character is written like \"\\n\"."
Strings cannot be divided,
multiplied, or subtracted, but the
+ operator can be used on them.
It does not add, but it concatenates—it glues two strings together.
The following line will produce the string
print("con" + "cat" + "e" + "nate")
We can also draw pictures. The TLC.js library adds a few basic functions
that create pictures, and ways of combining them to create new
pictures. One of the most basic ones is a circle. You can create a
small red circle by writing
circle(10, "red"), where 10 is the
radius and red indicates the color of the pixels.
We can also draw rectangles, which are created with a width, height, and color:
print(rectangle(80, 30, "black"))
But plain rectangles and circles are a little boring. Fortunately, we
can combine them together with the operator
overlay, which takes as
arguments two images, and places the first on the center of the
second. The resulting image will be the same size as the second one,
so if the first image is bigger, you may get strange (and
interesting!) results. For example:
print(overlay(rectangle(20, 20, "red"), rectangle(80, 30, "black")))
Of course, the result of
overlay-ing two images is another image, which means it too can be the input for another
What kind of pictures can you draw with this?
What are the limitations?
Here is one way to produce Boolean values:
print(3 > 2) // → true print(3 < 2) // → false
< signs are the traditional
symbols for “is greater than” and “is less than”, respectively. They
are binary operators. Applying them results in a Boolean value that
indicates whether they hold true in this case.
Strings can be compared in the same way.
print("Aardvark" < "Zoroaster") // → true
The way strings are ordered is more or less
alphabetic: uppercase letters are always “less” than lowercase ones,
"Z" < "a" is true, and non-alphabetic characters (!, -, and so on)
are also included in the ordering. The actual comparison is based on
the Unicode standard. This standard assigns a number to
virtually every character you would ever need, including characters
from Greek, Arabic, Japanese, Tamil, and so on. When comparing
numeric codes of the characters one by one.
Other similar operators are
than or equal to),
<= (less than or equal to),
=== (equal to), and
!== (not equal to).
print("Itchy" !== "Scratchy") // → true
that is not equal to itself, and that is
NaN, which stands for “not
print(NaN === NaN) // → false
NaN is supposed to denote the result of a nonsensical computation,
and as such, it isn’t equal to the result of any other nonsensical
&& operator represents logical
and. It is a binary operator, and its result is true only if both
the values given to it are true.
print(true && false) // → false print(true && true) // → true
|| operator denotes logical
or. It produces true if either of the values given to it is true.
print(false || true) // → true print(false || false) // → false
Not is written as an exclamation mark
!). It is a unary operator that flips the value given to it —
When mixing these Boolean operators with arithmetic
and other operators, it is not always obvious when parentheses are
needed. In practice, you can usually get by with knowing that of the
operators we have seen so far,
|| has the lowest precedence, then
&&, then the comparison operators (
===, and so on), and
then the rest. This order has been chosen such that, in typical
expressions like the following one, as few parentheses as possible are
1 + 1 === 2 && 10 * 10 > 50
But, to make your life easier, it is safer to just include parenthesis!
There are two special values, written
undefined, that are used to denote the absence of a meaningful
value. They are themselves values, but they carry no
Many operations in the language that don’t produce a meaningful value
(you’ll see some later) yield
undefined simply because they have to
yield some value.
The difference in meaning between
null is an accident
where you actually have to concern yourself with these values, we
recommend treating them as interchangeable (more on that in a moment).
Automatic type conversion
print(8 * null) // → 0 print("5" - 1) // → 4 print("5" + 1) // → 51 print("five" * 2) // → NaN
When an operator is applied to the “wrong” type of value,
a set of rules that often aren’t what you want or expect. This is
called type coercion. So the
null in the first expression becomes
0, and the
"5" in the second expression becomes
5 (from string
to number). Yet in the third expression,
+ tries string
concatenation before numeric addition, so the
1 is converted to
"1" (from number to string).
This can be really confusing and hard to figure out, so you should not depend on it in your programs.
Such values are created by typing in their name (
"abc"). You can combine and transform values with
operators. We saw binary operators for arithmetic (
%), string concatenation (
+), comparison (
>=), and logic (
As an exercise, try creating some interesting drawings.
For example, draw a cat!
Or a panda: