Variables are at the heart of any programming language. What is a variable exactly? In its simplest form, a variable is simply an arbitrary name given to some memory on our computer. Variables may be get or they may be set, meaning that we can either assign a value to that arbitarily-named area of memory, or we can retrieve the value that is contained within.
Here is a basic example:
let x
x = 5
let y = 14
console.log(x) // writes the number 5 to the JavaScript console
console.log(y) // writes the number 14 to the console
let z = x + y
console.log(z) // writes the number 19 to the console
x = 11
console.log(x) // writes the number 11 to the console
console.log(z) // writes the number 19 to the console
We can name variables whatever we want; just think of a variable as giving a name in memory for a container holding something we'd like to store away for later. In this example, we are using the let keyword to create the arbitarily-named variable x, and on the next line, storing the number 5 inside. Likewise, we're taking the number14, and putting it inside a variable that we're naming y – we're declaring the variable and storing its value on the same line this time.
On lines 5 and 6, we are opening the containers named x and y, retrieving the values inside, and writing those values to the JavaScript console.
On line 8, we are, once again, retrieving the values of x and yfrom memory – only this time, we're using those values to create a brand-new variable in memory called z. This variable contains the sum of the values contained within x and y at the moment it was created. An important thing to note is that JavaScript only uses the values contained within x and y, and not references to these variables in memory. This is made more clear as we redefine the value of x in line 12. Changes to x only affect the value of x, not the value of z.
Side note: The // characters we're using here denote code comments. These comments won't be evaluated, but serve as a simple way for us to jot down notes or hints about our code's functionality, embedded in the code itself.
So what can we store inside a variable? So far, we've only stored Numbers, but JavaScript (and all other programming languages) support several different types. We can also store non-numeric values (String), and true/false values (Boolean). Let's briefly look at these 3 basic types:
let quantity = 5 // Number
let food = `tacos` // String
let withSalsa = true // Boolean
Note that Strings are defined with either backticks or quotes, whereas Numbers and Booleans are without backticks/quotes. Advanced note for the curious: JavaScript is a dynamically-typed language, which means that a variable's type (e.g. Number, String, Boolean) is inferred when defined. This is in contrast to typed or "statically-typed" languages like Java or C, where a variable's type must be declared when defined.
As we can see, on line 8 in our first code example above, we can perform arithmetic operations on values when defining variables. As we'd expect, something like x + y simply adds two numbers together. We can also do something a little less obvious – we can + two Strings, or even Numbers and Strings together:
let quantity = 5 // Number
let food = `tacos` // String
let order = quantity + ` ` + food // => `5 tacos`
Concatenating strings together is an extremely common task in web development; we will be doing this often. While using the + sign works well, using it to build complex strings again and again tends to get very cumbersome. Instead, we`ll use something called template literals instead. An example:
let quantity = 5 // Number
let food = `tacos` // String
let order = `I would like ${quantity} ${tacos}, please` // => `I would like 5 tacos, please`
The output of a template literal is a String, and we must use the backtick (`) character to define it. And, we use the dollar-sign-curly-braces (${}) as placeholders for variables or any other JavaScript code we'd like to insert into the newly created String.