Declaring and Assigning Variables
Learn how to store values using let and const, and why you should avoid the older var keyword.
The Essentials
- Variables Remember Values: Use variables so you do not have to repeat the same values or complex expressions over and over.
- Declaration vs. Assignment: Declaring a variable (
let myVar;) creates it. Assigning it (myVar = 10;) gives it a value. You can do both at once:let myVar = 10;. letvsconst: Useletif the value will change later. Useconstif the value should never change.- Avoid
var:varis the old way of declaring variables. Stick toletandconst. - Naming: Use
camelCasefor variable names. They cannot start with a number or contain spaces or special characters (except underscores and dollar signs).
So far, I have been working with values in isolation. Every time I wanted to use a string or a number, I had to type it out. When I selected an element from the DOM with document.querySelector('#board'), I had to type that whole long spell out again if I wanted to use it a second time.
Wouldn't it be nice if I could just ask JavaScript to remember a value for me, so I can use it later just by calling its name? That is exactly what variables do.
Creating a Variable
To create a variable, you need to use a special keyword. In modern JavaScript, the most common way to do this is with let.
let remember = "September 21";There is a lot happening in this tiny line of code:
letis the keyword that tells JavaScript, "Hey, I want to create a new variable."rememberis the variable name I chose.=is the assignment operator. It tells JavaScript to assign the value on the right to the variable on the left."September 21"is the value being remembered.;(semicolon) tells JavaScript, "I am done with this statement."
Declaration vs. Assignment
You do not actually have to do all of this on one line. You can split it into two distinct steps: declaration and assignment.
let bankruptcy; // 1. Declaration
bankruptcy = "I declare bankruptcy!"; // 2. AssignmentWhen you write let bankruptcy;, you are just declaring the variable. You are telling JavaScript to create the variable, but you have not given it a value yet.
If you ask JavaScript what the value of bankruptcy is before you assign it, it will return undefined. undefined literally means "I created the variable, but I have no definition for its value yet."
If you specifically want a variable to represent "nothingness", you should assign it the value null:
let myBankBalance = null;null is a deliberate emptiness. undefined means "I forgot to give it a value" or "it does not have a value yet."
const and var
let is not the only way to create a variable. There are two other keywords you will see: const and var.
const (Constant)
If you have a value that should never change, you use const.
const myName = "Durgesh";With let, I can change the value of the variable later (e.g., remember = "October 31";). With const, I cannot. If I try to reassign a const variable, JavaScript will throw an error. Furthermore, you must assign a value to a const variable at the exact moment you declare it. You cannot just write const myName;.
var (The Old Way)
You will see var in a lot of older code on the internet. It was the original way to declare variables in JavaScript. In 2015, JavaScript got a major update (ES6) that introduced let and const because var has some confusing rules about how it is scoped (which I will cover later).
For now, the rule is simple: Do not use var. Stick to let and const.
Naming Conventions
You can name your variables almost anything, but there are a few rules and strong cultural conventions.
- No spaces:
let my variableis invalid. - Cannot start with a number:
let 1stPlacewill throw an error. - No weird characters: You cannot use emojis or symbols like
!or@.
The community standard in JavaScript is camelCase. You start with a lowercase letter, and every subsequent word is capitalized, like the humps of a camel:
let combinedParentsAge = 47;
let theBestVariableEver = true;Further Reading and Watching
- MDN: let
- FrontendMasters: JavaScript First Steps - The source course for this foundational concept.
Keep reading