Variables: let, const & var

A variable is a name for a value

A variable is a name for a value. A value is one piece of data, like the number 0 or the text "Asha". When you write let score = 0;, JavaScript makes a variable named score and puts the number 0 in it. Later, your code can use the name score to get the number back.

You saw a small version of this in the Why JavaScript? lesson. A Like button kept its count in a variable called likes. It used = to store each new count, and console.log to print messages. This lesson goes through the same idea slowly, one rule at a time.

const userName = "Asha";
let teaCount = 1;
teaCount = teaCount + 1;
console.log(userName);
console.log(teaCount);

Line 1 uses const to make a variable named userName. It holds the text "Asha", and it will keep that value. Line 2 uses let to make a counter, teaCount, and starts it at 1. Line 3 works out teaCount + 1, which is 2, and puts 2 into teaCount. Lines 4 and 5 print Asha and 2.

Making a variable is called declaring it. You declare a variable with a keyword: a word that has a special job in JavaScript. This lesson covers three of these keywords:

• let and const are the modern ones. You will use them every day.
• var is the old one. You need to be able to read it in older code, but you should almost never write it.

To declare a variable, you pick a keyword and then a name. You can give it its first value on the same line. Giving a variable its first value is called initializing it.

• const appName = "CompleteFrontend"; makes a name that keeps the same value.
• let score = 0; makes a name that can get a new value later.

Giving a variable that already exists a new value is called reassignment. You do it with the = sign. Read a line with = from right to left:

1. First, JavaScript works out the right side.
2. Then it puts the result into the name on the left.

let message;
console.log(message);
message = "Ready";
console.log(message);

Line 1 makes message but gives it no value. So it starts as undefined, which is JavaScript's way of saying "no value yet". Line 2 prints undefined. Line 3 puts the text "Ready" into message, and line 4 prints Ready. A const must get its value on the same line, because it can never get one later.

1let score = 0;Run2score = 10;3score = score + 5;4console.log(score);

Step through the let version first. score starts at 0, then becomes 10, then becomes 15. Now switch to const. Line 1 still works. Line 2 throws a real TypeError, because a const name can't get a new value. An error is JavaScript's way of saying "I can't do this". It stops the program. A TypeError is one kind of error.

Some values hold other values inside them:

• An array is a list of values, like ["pen", "book"].
• An object holds values that each have a name, like { theme: "dark" }.

With arrays and objects, const surprises many people. That's because there are two different ways to change things:

• Reassignment gives the name a whole new value, like cart = ["book"]. const blocks this.
• Mutation changes what is inside the value the name already has, like cart.push("book"). const allows this. push adds an item to the end of an array.

So const keeps the name on the same array or object. It does not lock what is inside.

In the next replay, you choose what line 2 does. It can add an item to the array with push. Or it can try to give cart a whole new array. Guess which one const allows before you press Step.

1const cart = ["pen"];Run2cart.push("book");3console.log(cart);4const other = cart;5other.push("ink");6console.log(cart);

const settings = { theme: "dark" };
settings.theme = "light";
console.log(settings.theme);

The name settings stays on one object the whole time. Line 2 changes the theme value inside that object, so line 3 prints light. That is mutation, so const allows it. Giving settings a whole new object would be reassignment, and const would block it.

One more thing happens in the replay. Line 4, const other = cart;, does not copy the array. It gives the same array a second name. So when line 5 runs other.push("ink"), cart shows the ink too.

A variable's name is also called an identifier. A name can use:

• letters, including letters like é, so café is a real JavaScript name
• digits, but not as the first character
• the signs $ and _

A name can't have a space or a hyphen (-) in it.

1const userName = "Ada";2const firstName2 = "Grace";3const $price = 20;4const _count = 3;5const café = "coffee";6console.log(userName, firstName2, $price, _count, café);

const userName = "Asha";
const username = "Lin";
console.log(userName);
console.log(username);

userName and username differ by one capital letter. To JavaScript, they are two different names. So the example prints Asha and then Lin. Write each name the same way every time. If you change one capital letter, JavaScript looks for a different variable.

Allowed doesn't always mean good. $price is allowed, but many teams keep $ for special uses by their tools. In Stage 1 you met camelCase: words joined together, with a capital letter at the start of each new word. Use clear camelCase names like firstName, uploadCount, and totalAmount.

var is part of JavaScript, and older code uses it a lot. It can store values just fine. The problem is its rules. A block is the code between a pair of curly braces { }, like the body of an if. let and const stay inside their block. var doesn't, so its rules don't match the braces you see.

The table compares the three keywords. Each row asks one question. Each column gives the answer for one keyword.

Here are the traps one by one. Each var example comes with a matching let example, and each shows the real result.

1if (true) {2  var mood = "visible outside";3}4console.log(mood);

1if (true) {2  let mood = "hidden outside";3}4console.log(mood);

1console.log(score);2var score = 5;

1console.log(score);2let score = 5;

1var count = 1;2var count = 2;3console.log(count);

1let count = 1;2let count = 2;3console.log(count);

• A var made inside an if block can still be used after the block ends. The let version throws a ReferenceError after the block. A ReferenceError means JavaScript can't find that name.
• Reading a var before its line runs prints undefined. That's because JavaScript makes every var name early, before the code runs, and gives it undefined. This is called hoisting. Reading a let before its line runs throws a ReferenceError instead. The time before the line runs is called the temporal dead zone.
• var lets you declare the same name twice in one place. let and const don't. They throw a SyntaxError, which means the code is written in a way JavaScript doesn't accept.

1var oldGlobal = "window property";2let modernGlobal = "not a window property";3console.log(window.oldGlobal);4console.log(window.modernGlobal);

A classic script is a plain <script> tag on a web page. window is the object that stands for the browser page. In a classic script, a var at the top level, outside every function and block, also becomes a property of window. So line 3 prints window property. A top-level let or const doesn't do this, so line 4 prints undefined. Modules, a newer kind of script file, have their own rules. Either way, the advice is the same: don't write var in new code.

Scope means the part of your code where a name can be used. Scope, hoisting, and the temporal dead zone each get a full lesson in Stage 4. The Closures lesson shows why old loops written with var caused famous bugs.

Real apps use variables to keep track of things. Variables give names to the parts that change or matter, like:

• counters, like the number of photos uploaded
• settings, like a light or dark theme
• messages to show the user
• the item a user picked
• results you work out on the way, which make long code easier to read

Further down, a playground lets you change the number of tea packs in a cart. In it, price stays the same, so it is a const. total gets a new value after the multiplication, so it is a let. A running total in a checkout, or a counter on a page, works the same way.

const quantityText = "2";
const price = 3;
console.log(typeof quantityText);
const total = Number(quantityText) * price;
console.log(total);

A form field is a box on a web page where the user types, like a quantity box. The browser gives you what was typed as text, even in a box made for numbers. Line 1 stands in for that: the quantity is the text "2". Line 3 uses typeof, which tells you what kind of value something is. It prints string, JavaScript's word for text. Line 4 uses Number(quantityText) to turn the text into the number 2, then multiplies it by the price. Line 5 prints 6. The Numbers lesson explains this kind of change in more detail.

1const price = 3;2const quantity = 2;3let total = price;4total = total * quantity;5console.log(total);

1const appName = "PhotoBox";2let uploadCount = 0;3 4uploadCount = uploadCount + 1;5 6const settings = { theme: "dark" };7settings.theme = "light";8 9console.log(appName, uploadCount, settings.theme);

appName never changes, so it is a const. uploadCount goes up each time the user uploads a photo, so it is a let. settings stays the same object the whole time, so it can be a const, even though the theme inside it changes.

Common mix-ups

Try each task before you open the hints. The answer check doesn't mind capital letters or extra spaces. JavaScript itself is stricter, so the code has to be exactly right.

let coins = 1;
coins = coins + 4;
const wallet = ["card"];
wallet.push("receipt");
console.log(coins);
console.log(wallet.length);

const total = 0;
total = total + 5;
console.log(total);

let total = 0;
total = total + 5;
console.log(total);

const appName = "PhotoBox";
let uploadCount = 0;
uploadCount = uploadCount + 1;
const settings = { theme: "dark" };
settings.theme = "light";
console.log(appName, uploadCount, settings.theme);

const fastCar = true;
const totalAmount = 42;
const lessonClass = "variables";
console.log(fastCar, totalAmount, lessonClass);

if (true) {
  var status = "draft";
}
console.log(status);

let status = "published";
if (true) {
  let status = "draft";
  console.log(status);
}
console.log(status);

Your first try counts. Every answer explains why it is right or wrong. For code questions, go through the code line by line before you choose.

Key takeaways

• A variable is a name for a value.
• const stops the name from getting a new value. It does not lock what is inside an object or array.
• Use let for names that need a new value later, like counters and running totals.
• Names can use letters, $, _, and digits after the first character. They can't have spaces or hyphens, start with a digit, or be a reserved word.
• Don't use var in new code. It leaks out of blocks, exists before its line runs, allows the same name twice, and can add to window.

Up next: Data types. You'll meet the kinds of values a variable can hold.