Storing a Value with const

Welcome back to Writing and Running Your First JavaScript Programs! This is the last lesson of the course, and it is a big one.

Up to now, every value in our programs has been typed straight into a console.log. That works for a greeting, but imagine a receipt that mentions the customer's name four times. Typing "Alex" four times is tedious, and if the customer turns out to be Sam, we have four places to fix.

In this lesson, we will learn how to:

• Store a value under a name of our choosing, using const.
• Read that value back by name wherever we need it.
• Choose names that make our programs easy to read.

By the end, we will have a small program that remembers a customer and a price and uses them in several lines of output.

Programs become useful the moment they can remember things. A name typed once and used many times, a price that appears on every line of a receipt, a count that we check later on - all of these need somewhere to live while the program runs.

That "somewhere" is a variable: a named place that holds a value. We pick the name; JavaScript keeps the value under it. Whenever we write the name later, JavaScript quietly swaps in the value it is holding.

To create a variable, we write the word const, then the name we want, then an equals sign, then the value:

const customerName = "Alex";

Let's take this apart:

• const tells JavaScript that we are creating a new variable. The word is short for constant, and it means the value will stay the same for the rest of the program.
• customerName is the name we chose.
• The = is not a mathematical "equals". It means store the value on the right under the name on the left. Read it as "becomes" or "is set to".
• "Alex" is the value being stored - a piece of text, so it has quotation marks.

Nothing appears on the screen when this line runs. Storing a value is a quiet action; only console.log makes anything visible.

We can store a number the same way, without quotation marks:

const drinkPrice = 4.5;

Now JavaScript is holding two values for us, each under its own name.

Once a value has a name, we use the name in place of the value. Here we print the customer's name:

console.log(customerName);

JavaScript looks up what is stored under customerName and shows that:

Alex

Notice that customerName has no quotation marks around it. That is deliberate. If we wrote console.log("customerName");, JavaScript would treat it as text and print the word customerName itself. Without the quotation marks, JavaScript recognises it as a name, looks up the value stored under it, and prints that instead.

This is the one rule to hold onto: text in quotation marks is printed as written; a name without quotation marks is looked up.

JavaScript would happily let us call a variable x. Our future self would not be so happy. A variable's name is the only clue a reader has about what it holds, so we make the name say what the value is: customerName, drinkPrice, cupsOrdered.

A few rules and one convention:

• For this course we stick to letters and digits. A name cannot start with a digit and cannot contain spaces. JavaScript allows a few more characters, but we do not need them yet.
• Names are case-sensitive: drinkPrice and drinkprice are two different variables.
• The convention in JavaScript is camelCase: start with a lowercase letter, and when the name has several words, capitalise the first letter of each word after the first. customerName, not customer_name or CustomerName.

Following the convention is not required by JavaScript, but nearly every JavaScript project uses it, so our code will look right to anyone who reads it. When we join a project later on, we follow whatever convention it already has.

Here is where storing a value pays off. Once customerName holds "Alex", we can use it as many times as we like:

const customerName = "Alex";

console.log(customerName);
console.log("Thanks for visiting,", customerName);

When we click Run, the name appears in both lines, even though we typed it only once:

Alex
Thanks for visiting, Alex

The second console.log mixes a piece of text and a variable, separated by a comma, exactly as we mixed text and a number in the first lesson. JavaScript looks up the variable, puts a space between the two values, and prints the line. If the customer's name changes, we edit one line - the const - and every line that uses it changes with it.

Let's put both variables to work in our complete example:

// Store values under descriptive names
const customerName = "Alex";
const drinkPrice = 4.5;

// Reuse a stored value by name, as often as needed
console.log(customerName);
console.log("Customer:", customerName);
console.log("Price:", drinkPrice);
console.log("Thanks for visiting,", customerName);

Clicking Run gives us four lines, each using one of the two stored values:

Alex
Customer: Alex
Price: 4.5
Thanks for visiting, Alex

Two stored values, four lines of output, and the name Alex typed exactly once. Read the code from the top: the comments say what each group is for, the names say what each value is, and each console.log reads almost like a sentence. That is what readable code looks like.

One thing we will not do in this course is change a value once it is stored. const means constant, and JavaScript will refuse to let us reassign it. The next course introduces let, which is for values that need to change while the program runs. For now, const is our default way to store anything.

Fantastic work! In this lesson, we learned that a variable is a named place that holds a value, that we create one with const, a name, =, and the value, and that we read the value back simply by writing its name without quotation marks. We saw why descriptive camelCase names matter, and how storing a value once lets us use it in as many lines as we like.

That also wraps up the whole course. We can now print output, leave clear comments, read and repair an error, and store a value under a name - four skills we will use constantly from here on. Up next are the last practice tasks of this course, and after that, a new course where our stored values start to change and do arithmetic. Let's finish strong!