| Interactive Media Design

JavaScript Variables

This Scrimba screencast was created by Dylan C. Israel.

One of the most basic components of any programming language is a variable. A variable serves as a container that stores data. Each variable is given an identifier, which is used to recall the data stored in variable. In most cases, the value of the variable can change, while the identifier will stay the same.

Declaring a Variable

In JavaScript, a variable must be declared before it can be used. A variable is declared by using a declaration statement followed by the variable identifier. The identifier is the variable's name. You learn more about naming a variable below.

A value can be assigned to a variable using the equal sign ( = ). This is known as the assignment operator. When a variable has been assigned a value, that value can be retrieved by calling the variable's identifier.

var employeeName // Declaring without assignment
let employeeTitle = 'Professor' // Declaring with assignment
const pi = 3.14159 // Declaring a constant


console.log(employeeName) // null - because this variable will not be assigned a value
console.log(employeeTitle) // 'Professor'
console.log(pi) // 3.14159

Naming a Variable

All JavaScript variables must be identified with a unique name. These unique names are often referred to as identifiers. When creating identifiers for the variables there are some general rules to follow:

  • Names can contain letters, digits, underscores (_), and dollar signs ($)
  • Names must begin with a letter, $, or _
  • Names are case sensitive (name, Name, and NAME are all different variables)
  • Reserved wordsopen in new window cannot be used as names

Beyond these general rules, there are some best practices conventions when comes to naming variables.

Variable names should be descriptive

A variable name should be descriptive and related to the value the variable is or will be holding.

const n = 'Ed' // Bad!
const name = 'Red' // Bad!

const studentName = 'Ted' // Good!

Descriptive variable names make a program easier to read and understand.

Variable names should be concise

While it is important for a variable name to be descriptive, it is also important for variable names to be concise.

for (const studentFromStudentsArray of students) {...} // Bad!

for (const student of students) {...} // Good!

Shorter and more concise variable names, keeps them easier to write and less error-prone. However, it is more important that names be descriptive over concise.

Avoid one-letter variable names

While one-letter variable names are very concise, they are not descriptive. It can be difficult to remember what a variable is for when it is only one-letter and not very descriptive. The exception to this rule is when working with loops or small functions.

const i = [] // Bad!

for (let i = 0; i < 10; i++) {...} // Good!

Use camelCase for variable names

When a variable name contains more than one word, it is common practice to capitalize all words after the first word. This is known as camelcase.

const student_name = 'Ed' // Bad!
const StudentName = 'Red' // Bad!

const studentName = 'Ted' // Good!

See Also