Variables

The very first building block we will encounter in JavaScript is something called a variable. This is also one of the most useful building blocks we will ever use in our coding. As we unpack what a variable is, we will have our first encounters with several new ideas, such as new syntax, things called "keywords", processes called "declaration". As you proceed, at the same time you practice writing in this new language, pay attention to what you notice by way of patterns. This noticing of patterns will help us as we move forward.

When we write code, we will often want to functionalize whatever it is that we are trying to create through values that can be moved around and dynamically modified to different effects. For example, when we draw things with D3 and SVG, we may want to draw new shapes relative to the position of other shapes, without having to rely on explicit and absolute values for x- and y-pixel locations. This kind of dynamic coding is the purpose of variables.

A variable is like a container that holds a single value, such that we can store that value for later reference (or to change it later). To create a variable, we need two things: a value to be stored, and a name in which to store it. We call this process of storing a value in a name variable declaration.

In JavaScript, there are multiple kinds of variables we can declare. In any variable declaration, we begin with a JavaScript reserved keyword that tells the browser "I am about to declare a variable." This keyword can be one of three words: const, let, or var. Each keyword has different properties that determine where a variable can be used in our code and if its value can be changed.

For now, we will only care about the keywords const and let. The const keyword is used to declare a variable whose value cannot change; if we try to change a const variable's value later in our code, we will get an error message saying we can't do that. Conversely, the let keyword is used to declare a variable whose value is allowed to change. In either case, the general pattern for declaring a variable will be the same:

const NAME = VALUE;
let NAME = VALUE;

In the demonstration to the right, we are using the const keyword to declare a variable whose name is myName, and inside of that name, we are storing the value of "Steven" (including the quotation marks!). Every single piece of this line of code is important and serves a functional purpose in constructing the instruction we are giving to the browser. To end the instruction, we place a semicolon (;) at the end of the line. This semicolon indicates the end of a statement in JavaScript, or a single instruction.

When declaring variables, we can give the variable any name we want – within limits. There are a few rules that restrict what can be a valid variable name. For example, we can't start a variable name with a number, such as 123myVariable; we can use numbers inside of variable names, as long as they don't start the name (e.g., myVariable123 is allowed). If we want to use special symbols inside of a name, we are limited to the symbols $ and _ (e.g., $myVariable2 and _myVariable2 are allowed). We also can't use reserved keywords as names of variables, such as var. As long as we follow these rules, then we can decide what we want to name a variable, and from that point forward, we will refer to that exact name to retrieve its value.

Type the example at the right, and replace the value inside the quotation marks ("Steven") with your own name. Do not change the name of the variable itself (i.e., myName should stay as myName). Make sure to include the quotation marks in the variable value.

Congratulations, you've written your first JavaScript!

Data types

With this, we have created our first variable. Importantly, we have noted that the value of this specific variable must include quotation marks. The reason for this is that we have not simply declared a new variable; we have also stored in that variable a specific type of value.

In JavaScript, we call this specific "type" of value a data type. In this language, there are a few fundamental data types we need to know. A data type is a variety of a value that determines what we can do with it.

The basic data types in JavaScript include Number, String, and Boolean values. In our example above, our variable myName stores a value of the String type. A String is any mixed sequence of letters, numbers, or symbols. Most often, Strings will include values that are words, or sentences, or paragraphs, such as a name of a person or description of a product. It can also be more abstract things, such as the ID number of a product in a catalogue that might be encoded as a mixture of both letters and numbers. More generally, a String is simply a value that can't undergo any mathematical operations like addition or subtraction; its value is what it is. We represent String values by placing them inside of quotation marks. It doesn't matter at this point if we use single or double quotation marks, but whatever we choose, we must have matching quotation marks before and after a String value is given.

A Number type is any numerical value; these could be positive or negative numbers, integers, or decimal values. They can be expressed using decimal notation, or using scientific notation and exponentiation. Whenever we want to interact with a variable as a number, we must declare it as a Number type. Numbers can undergo numerical computations like addition or subtraction. To declare a Number type, we simply give a numerical value; we don't need to use any quotation marks.

If we do place what we think is a number inside of quotation marks, it no longer behaves like a Number type – instead, it turns into a String type! In the example at the right, the value of "3" we are storing in the variable otherNumber looks like a number, but when the browser sees this, it thinks it is a String because we have placed it in quotation marks. This distinction may seem incredibly subtle, arbitrary, and irrelevant, but in reality, it can mean a world of difference between our code working as expected and it breaking apart completely. In short, data types matter a lot in JavaScript.

The last data type shown here is a Boolean type. The possible values of a Boolean data type are true or false. In fact, these two "words" are keywords in JavaScript, and they are interpreted in a way that is similar to Number types. Just like Numbers, we don't need to put these values in quotation marks (and if we do put them in quotation marks, we change how the browser understands what to do with them). Also importantly, the capitalization matters: these values must be all lowercase to be interpreted correctly.

Practice writing the variables demonstrated on the right; swap in different values of your choice.

console.log(): Our new best friend

So far, all we've done is store some values inside of some variables. While these variables now exist in the browser's memory, they are just kind of sitting there, waiting for us to do something with them.

Variables are really only useful if we actually do things with them. One simple thing we can do with them is report their value back to us. Why would we want to do this? By reporting the value of a variable back to us, we can confirm or examine the lifecycle of a variable through a longer and more complex script. In our case, we will report the values of the variables we created above, to confirm that we have successfully declared them.

JavaScript has a built-in code pattern to help with this reporting: console.log(). We can place this pattern anywhere in our code, on its own line, to see what's going on with a variable. In the parentheses, we will place the name of a variable that we have already declared (i.e., it needs to be something that the browser knows exists already!). In the examples at the right, we are using this pattern to report all of the values of our variables from the previous section. Note that the name of each variable appears within its own console.log() pattern, in the parentheses of each command. Also note that each console.log() is on its own line, followed by a semicolon at the end of each line. Type all of the commands you see at the right in your template document.

When we put something inside the parentheses of this pattern, it gets printed out in the JavaScript console. We can access the console in the same place we access the element inspector, inside the web browser. To open the console, first open the web inspector, and then click the Console tab button, next to the Elements tab button, in the pane that opens up.

If everything goes well, you should see a series of values printed in the console, line by line. Notice that these values exactly correspond to the values of the variables we reported out in our code. At the right-hand end of each line in the console, you'll also see a filename, followed by a colon, followed by a number: this number that you see tells you exactly which line of code in which file is causing the browser to print out the value you see. Cross-check one of these numbers with the corresponding line number in your template file to confirm that these numbers match. (Note that your numbers may be slightly different from the ones shown here.)

The console.log() pattern is extremely useful for debugging, which is the process of finding and correcting errors in code. Sometimes, we'll encounter errors that are related directly to specific variables, and we can use the console.log() pattern to double-check the value of those variables to confirm that what we think its value is matches what the browser thinks its value is. We will use this pattern a lot moving forward.

Changing variable values

After we declare a variable, we may want to change its value to something else – either manually and directly by reassigning a new value to it, or indirectly through other things we might do in our code. When we have a variable that already exists and want to change its value, we can do that by simply naming the variable again, without the const or let keyword, and assigning a new value to it with the equals sign.

In the example at right, we change the value of the variable lovesToCode, which was originally true, to a new value of false. If we use console.log() to report the value of lovesToCode after doing this, we will see that the new value has indeed been assigned to this variable.

However, there's something we must be careful about. While we are allowed to change the value of any variable declared with let, we cannot change the value of a variable declared with const. The reason for this is that the const keyword is intended for values that are constants, or unchanging values. If we try to change the value of myNumber to a new value, we will see a red and angry error message in the console that tells us we are not allowed to do this because we declared this variable using the const keyword. Importantly, this error stops everything else afterwards from working – it's as though the browser encounters this problem and refuses to go any further until we fix the error.

Using comments

In this case, we can easily fix the error simply by removing the offending part of the code. We can certainly just delete that line of code, which will just cause it to vanish from the browser's memory. Alternatively, we can comment this line of code as a way of reminding us that this doesn't work. When we comment some code in JavaScript, we will still be able to see it in our source code, but the browser will ignore it and make no attempt to interpret it.

We have two options for writing comments in JavaScript. One way has already been demonstrated for you in your template: placing text to be commented between /* */. This approach is useful for creating multi-line comments, or comments that extend over multiple lines. A second approach uses two forward-slashes in sequence: //. This only creates a comment that persists over a single line of code; when we place it at the beginning of a line, any and all code that appears on that line turns into a comment. (We can also put comments like these at the end of a line, after existing code; in that case, the existing code will still be run, but anything that comes after the // will be turned into a comment.)

To demonstrate this, turn the myNumber reassignment line into a commented line by putting the two forward slashes at the very beginning of the line, as shown at right.

Expressions and operators

Reporting values of variables back to ourselves can be fun, but the novelty wears off quickly. A much more useful thing we'll want to do with variables is use them as part of other calculations and expressions.

Return to the JavaScript console in Chrome. Below the values reported using console.log(), you'll see a line at the bottom that has two right-pointing angle brackets at the start of the line. This part of the console is an interactive console, meaning we can type regular JavaScript on this line, press Return, and then see what value the expression we typed evaluates to.

To test this out, type 2 + 2 on this line and press Return. You should see that the console returns a value of 4.

The thing we just typed (2 + 2) is called an expression. An expression is a combination of values and operators that evaluate (i.e., compute) to a new value. In this example, we say that the expression 2 + 2 evaluates to 4. The plus sign (+) is called an operator in JavaScript. It operates on two values, does something with them, and returns the result of that operation. In this case, the plus sign means "add these two numbers together."

There are other operators for other kinds of calculations, as demonstrated below:

The plus and minus signs should be self-explanatory (+ addition and - subtraction), but the others may not be as intuitive. The forward slash / divides one number by another; the asterisk * multiplies one number by another. The last example, %, is called the modulo operator. It returns the remainder after division.

Let's see these examples using some values stored in variables. Return to your template code file and declare the variables named a, b, and c shown at the right. Notice that the value of the variable c is the result of adding the values of variables a and b together. In the subsequent lines, we use console.log() to report out the resulting value of several different expressions using these variables, with different operators. After writing these statements, save your template file and refresh the page in the browser. Examine the values reported out in the console, and confirm that these values match the code on the lines indicated.

The variable d shown at the right demonstrates how to combine multiple operators in a single expression. We can chain together as many different values and operators as we want. However, we need to be careful about the order of operations, which determines the order of precedence for combining values that could be operated on by multiple operators. To disambiguate expressions where the order of operations doesn't match the order we want our values to be calculated, we can use parentheses to group subsets of calculations together.

Boolean negation

In addition to the mathematical operators demonstrated above, there's another special kind of operator we can use: the Boolean negation operator. When we put an exclamation point (!) immediately in front of a value or a variable, we negate its Boolean value. This means that if the value is true, or evaluates to true, the ! turns that value into false; if the value is false or evaluates to false, the ! turns that value into true.

This is demonstrated in the code at the right. In the first example, the value of true is negated. In the second example, the variable lovesToCode is negated; since we defined this variable as having a value of false, this negation makes this value true. However, we haven't modified the value of the original variable! In this example, we are using the exclamation point in an expression that we've placed inside the console.log() statement. We haven't done anything to actually store a changed value of lovesToCode. You can confirm this for yourself by using console.log() to check again what the value of lovesToCode is, after using the negation operator.

Built-in functions

Variables represent one of the most atomic kinds of building blocks in JavaScript: we can create them, change them, and move them around as isolated units. But the power of JavaScript comes not from these elementary pieces but from larger patterns that can do more complex things for us. In particular, much of this power comes from functions, and JavaScript has many functions built into the language already that we can take advantage of.

A function is a named pattern of code that does a task for us. That task can be anything, such as generating a random number, or rounding a value, or changing the capitalization of letters in a String – anything you could imagine. Typically, these functions accept an input value, do something with that input value (e.g., modify its value), and then return a new value. Other functions don't accept any inputs and don't return any outputs but rather do something else behind the scenes. We will learn more about functions in depth next week, but for now, we will see some examples of built-in named functions that can do convenient things for us.

The first example uses Math.random(). This function returns a random number between 0 and 1. If we invoke this function by name, it gets a random number for us. Importantly, if we want to then do anything with that value later in our code, then we must capture it in a variable. Here, we are running the function Math.random(), receiving the random number it returns back to us, and then storing it in a name of a variable (randomNumber) we created with const. Note that this function does not accept an input value; it only gives us back a value.

The next three functions are convenient ways of manipulating numeric values in common ways. The function Math.round() accepts an input Number value (which we place in the parentheses) and returns back to us the rounded value of that input. This function follows standard rounding conventions, meaning that a value is rounded up when the decimal value is greater than or equal to 0.5. When we want to round a decimal value up to the next largest integer regardless of rounding conventions (i.e., even if the decimal value is less than 0.5), then we can use the function Math.ceil(). (The "ceil" part refers to the ceiling of a numeric decimal value.) Conversely, when we want to round a decimal value down to the next smallest integer regardless of rounding conventions (i.e., even if the decimal value is greater than or equal to 0.5), we can use the function Math.floor(). In these examples, you should see that for a value of 12.2, Math.ceil() returns the value 13 and Math.floor() returns the value 12. If you're curious, you can see other mathematical functions here.

Such functions aren't limited to working only with numbers! Another extremely common thing we will want to do is to manipulate String values. Conveniently, JavaScript has several other built-in functions designed specifically for working with Strings. In the examples at the right, these functions are named toUpperCase() and toLowerCase(). Notice however that the way we use these functions is different from the way we used the mathematical functions above. In these examples, we invoke these functions on an existing String value. Here, we are invoking these functions on a variable named myName, which holds a String value. The dot (.) between the name of the variable and the name of the function tells the browser to run the desired function on the desired value. The toUpperCase() function takes a String value and capitalizes all the letters; the toLowerCase() function takes a String value and makes all the letters lowercase. In these cases, both functions accept an input (our String value), but the way we indicate this input is by connecting the input with the function through a dot. Note that this is different from our mathematical fuctions above, in which we passed our inputs into the parentheses.

The reason for this difference will become clearer in the coming weeks. For now, it's important just to note that there are different ways that we can pass an input into a function.

There are many different built-in functions for manipulating Strings, which you can explore more on your own here.

Constructing complex Strings

There is one more fundamental pattern in JavaScript we will pay attention to before completing this demonstration: constructing complex String values by joining together individual String values.

When we declared our variable myName, we created a singular atomic String value. But singular String values like this are often much more useful when we can use them to construct larger String values. This is a common task we will need to perform; we will have some content, and most of the content will be template text, but some of the content will need to be dynamically updated with non-template text (e.g., content stored in variables). Here, we will demonstrate two different ways of doing this kind of task.

The first of these is called String concatenation, and we accomplish this using the plus (+) operator. Recall from before that we used the + operator to add Number values together. It turns out we can also use this operator to "add" String values together, but instead of getting back a numeric value as the result of adding two numbers together, what we get back with "adding" String values is a single larger String that is a mashup of the two smaller Strings we provided. We can use this behavior to our advantage, as in the demonstration at the right. Notice that we have a mixture of literal String values (for example, "Hello, ") and String values stored in named variables (for example, myName). Also notice that these values are being concatenated together using the + operator. The end result is a complete sentence that is the combination of the literal String values and the variables: "Hello, Steven! You are destined to have 15 cats."

String concatenation works fine for simple Strings – when we aren't concatenating together too many different values. However, as you might imagine, this String construction business can get very messy very quickly. With even just a couple more String pieces to concatenate together, our code can quickly become very difficult to read. To simplify this, we can use a second way of constructing complex Strings: using template literals.

A template literal is created by using backticks (`), located on the same key as the tilde (~). Inside the backticks, any literal String value will be interpreted as a normal String. However, if we place ${ } inside the backticks, then anything we place inside the curly braces of the ${ } are evaluated first before being inserted at the same position. In this example, we are using ${ } to insert the values of the variables myName and rounded into the given location of the template literal. With this structure, it's easier to see what the final String will look like, cleaning up our code and making it more legible to ourselves and others.

Try typing the code you see at the right in your template file. What happens with the output in the console? Note: although what you see here may be displayed as broken up into multiple lines, this is just a consequence of the long line of code wrapping to the next line, based on the size of your screen. Each of these instructions here represents a single line of code, so for example the String concatenation code should all be part of one line, without any manual line breaks.

You might have noticed something odd about all of this concatenation business, however. In our String construction, we have a value that is definitely not a String: the value of the variable rounded (which is a Number). Technically, we are inserting a Number value into a String value, which would ordinarily cause a data type conflict. But what happens in the process is that the Number value gets turned into a String value specifically so that it can be inserted into another String value. We call this process type coercion, meaning we are coercing one data type to be another; we will see this more in the weeks to come.