The last chapter ended with the following, in the console:
> console.log("Hello, World!"); //--> Hello, World!
Note that I have included the
> prompt in this example, along with the how
There’s a lot going on in just this one example, but, briefly,
something.1 Before we get too carried away with writing
The fourth episode of the BBC show Connections draws a line to computer programming that begins with the Roman era Barbegal aqueduct and mill. Sadly, James Burke concludes his wry take on advances in technology with punch cards, but he was also filming Connections in 1978. Nevertheless, Burke sees that the key to how computers work is related to how they organize information. How to organize information is, not coincidentally, the first part of programming that we will learn in this chapter.
- The people who should be the first to recognize the value of an innovation (like programmers) are often the last.
- Obsolete technologies fade away slowly.
Basic data types
We hear the word “data” every day, but what, precisely, does it mean? If you had to draw a picture of “data,” what would it look like? We can say “data is information,” but doesn’t that just pass the buck, because now we have to ask what “information” means?
It maybe helps to remember that the word “data” is the plural version of the Latin word “datum.” A datum is a single piece of information, abstract as that sounds. It can be a number. It can be string of letters. It can be the answer to the question “true or false?” It can also be the lack of information.
Data can also be more complex. A datum can be a list or collection of other pieces of data, or it can be a process that takes some data and generates new data based on that data.
> 9; //--> 9 > 1.5; //--> 1.5 > console.log(9); //--> 9
Your console may look a bit different in what it returns (including
console.log(9);), but we can ignore that for now.
But note also that I type a
not very picky with semicolons, but it’s better to include them as a matter of
habit. The semicolon comes at the end of a “statement,” which is a single
instruction given to the console.
9; just means “the number 9.”
console.log(9); means “log the number 9 to the console.”
Strings are a bit trickier than numbers at first glance. They are any string
of characters enclosed by double quotes.3 Have you used a string
already in this course? Yes,
"Hello, World!" is a string containing the
Hello, World!. We can issue statements with strings in much the
same way we did with numbers:
> "Hello, World!"; //--> "Hello, World!" > console.log("Hello, World!"); //--> Hello, World! > "World, I just wanted to say \"Hi!\" 9 times!"; //--> "World, I just wanted to say \"Hi!\" 9 times!" > console.log("World, I just wanted to say \"Hi!\" 9 times!"); //--> World, I just wanted to say "Hi!" 9 times!
Notice how strings can have double quotes inside of them, as long as you use a
\ (backslash) beforehand. What do you type if you want a backslash in the
string? Notice also that when we use
console.log(), the result does not
have surrounding double quotes or the backslashes.
A boolean is a value that is either
false. They are named after
George Boole, an English
mathematician, and they are astonishingly useful in programming, because they
allow programs to make decisions based on values, much like you might make a
decision on where to get dinner based on a series of truth values. For
example, say you eat burritos every day for dinner except Fridays, when there is
a deal on falafel. You ask yourself the question, “Is today Friday?” If the
answer is “yes” (
true), then you go to the falafel joint. If the answer is
false), you get a burrito.
> true; //--> true > false; //--> false > 9 === 9; //--> true > 9 === "Hello, World!"; //--> false
false do not have double quotes around them. What
would happen if they did? I have also introduced you to
=== in this code
snippet. That is the “strict equal” comparison operator, and it is a way of
asking the console a question.4
9 === 9; is the same as “Is the number nine
the same thing as the number nine?” Because the answer is “yes,” the console
true. In the next example, we’re asking the question, “Is the number
nine the same thing as the string ‘Hello, World!’?” Since the answer is “no,”
the console responds
Sometimes we deal with a lack of information, instead of information we
lack, through an object called
null and a data type called
null is an object that indicates the lack of information. Say you’re filling
out a questionnaire online and you left the last few questions unanswered but
still pressed “Submit.” The answered questions would be strings or numbers,
probably. But how should the computer understand the unanswered questions? The number zero doesn’t
seem right. Nor does a blank string. In this case, it makes sense to register
that lack of answers with
undefined, on the other hand, is for information that we do not yet have.
Using the questionnaire example again, all of the answers are
until you press “Submit” and send them to the computer, where it can then
decide what to do with them, by turning them into strings, numbers, or just
You learned a comparison operator in the previous section,
===, and you’ll
learn a few more in this section. You’ll also learn all five arithmetic
operators. In fact, let’s start with them:
> 2 + 3; //--> 5 > 2 - 3; //--> -1 > 2 * 3; //--> 6 > 2 / 3; //--> 0.6666666666666666
As you can see, the arithmetic operators give numbers as answers. The
comparison operators, like
===, respond with
> 2 + 3 * 6 === (2 + 3) * 6; //--> false > 2 + 3 * 6 < (2 + 3) * 6; //--> true > 2 > 2; //--> false > 2 >= 2; //--> true > 2 < 2; //--> false > 2 <= 2; //--> true
Programmers have figured out nifty ways to get around the difficulty of typing ≥ and ≤!
Strings also have an operator
+. It comes in very handy in web development:
> "I had a thought, but… " + "Oh yeah, I remember. Falafel on Fridays!"; //--> "I had a thought, but… Oh yeah, I remember. Falafel on Fridays!"
What happens when you add a string to a number? How about a number to a string? Why?
What if the calculator understood variables?
Everything we have been doing above is fun for about three seconds. It is interesting to test edge cases (what happens when you multiply a number with a boolean?), of course, as that is a good way to understand the assumptions the language is making. But we’re building websites, not calculators.
Nevertheless, getting a bit of flexibility with the console is useful. Let’s
expand on that, then, with the
let statement, which lets us define
variables. Type along in the console.
> let burrito; > burrito = "Basically the best food around."; > console.log(burrito); //--> Basically the best food around.
In the first line, you defined a variable,
burrito. In the second, you
assigned to the variable the string, “Basically the best food around.”5
Then you tell the console to log the variable burrito, and it logs its value,
Basically the best food around.
Any of the data types you have learned about already you can assign to a variable, and we can define multiple variables at once. It’s generally good practice to define all your variables at the top, so you know what you will be working with in the future.
> let magicNumber, secretNumber; > magicNumber = 9; > secretNumber = 10; > secretNumber + magicNumber; //--> 19 > secretNumber === magicNumber; //--> false > secretNumber > magicNumber; //--> true > secretNumber = secretNumber + 1; //--> 11 > console.log(secretNumber); //--> 11
These variables persist only for the duration of the console. If you close the
console, then you’ll lose them. But the variables are also mutable,
as you can see.
secretNumber starts out assigned to the number 10, but
then it becomes assigned to the number 11.
Let’s play a bit more with assigning variables:
> let tipRate, bill, billPlusTip; > tipRate = 0.20; > bill = 10.00; > billPlusTip = bill + (tipRate * bill); > console.log(billPlusTip); //--> 12 > let question, burritos, answer; > question = "What is the best food around?\n"; > burritos = "Delicious burritos"; > answer = burritos + " are clearly the best!"; > console.log(question, answer); //--> What is the best food around? //--> Delicious burritos are clearly the best!
There are two new things in this example:
\n can be used to make a new line
to make a new line, and now you see that
console.log() can take multiple
values in the parentheses, separated by commas.
Finally, this discussion of variables allows me to introduce one more
typeof operator. If you get a variable, sometimes you don’t know
what kind of data type it is. Yet as we have seen with
+, it behaves
differently depending on the data. Continuing with the variables in the
> typeof question; //--> "string" > typeof magicNumber; //--> "number" > typeof 2; //--> "number" > let isItTrue; > isItTrue = 1 === 1; > typeof isItTrue; //--> "boolean" > typeof badTastingBurrito; //--> "undefined"
As you can see, this example makes use of variables defined in earlier exercises, but it also refers to variable that has not yet been assigned (or even defined).
console.log()to log a string that includes a backslash.
What happens when you surround
falsewith double quotes? Are they still booleans?
What happens when you add a string to a number? What about the reverse? Why?
Use the statements to find
billPlusTipabove but have the response from
console.log()be “You should pay $12 because the service was good.”
document, as we’ll see later) that refers to the console you have opened in your browser.
.log()is a “method” specific to the
consoleobject that outputs whatever is in sent as a parameter (or, inside the
()). In our example, we sent the console a snippet of text,
"Hello, World!", and it returned it to us. ↩
Uncaught SyntaxError: Unexpected identifier, then you have one of those older consoles. The solution is, luckily, straightforward. For the duration of this course, where I instruct you to use
let, you can use
var, instead. ↩