JavaScript Declaring Variables Guide

Declaring variables is a fundamental skill in JavaScript. It allows you to store data and reuse it later. This guide covers everything you need to know about declaring variables in JavaScript.

We will explore the three main keywords: var, let, and const. Each has unique rules and use cases. By the end, you will know which one to use and when.

What is a Variable?

A variable is a container for storing data values. Think of it as a labeled box where you can put information. JavaScript uses variables to hold numbers, text, objects, and more.

To create a variable, you must declare it first. Declaration tells JavaScript to reserve memory for the variable. Then you can assign a value to it.

For a deeper look at how variables work, see our JavaScript Variables Guide.

The var Keyword

The var keyword is the oldest way to declare a variable in JavaScript. It was used before ES6 (2015). Today, it is less common but still valid.

Variables declared with var have function scope. This means they are accessible within the function where they are declared. If declared outside a function, they become global.

Here is an example of declaring a variable with var:

 
// Declaring a variable with var
var name = "Alice";
console.log(name); // Output: Alice

Important:var allows redeclaration. You can declare the same variable twice without an error. This can lead to bugs in large projects.

 
// Redeclaring with var is allowed
var age = 25;
var age = 30; // No error
console.log(age); // Output: 30

Because of these issues, modern JavaScript developers prefer let and const.

The let Keyword

The let keyword was introduced in ES6. It solves many problems of var. Variables declared with let have block scope. This means they exist only inside the block where they are defined.

Blocks are defined by curly braces {}. For example, inside an if statement or a loop.

Here is how to use let:

 
// Declaring a variable with let
let city = "Paris";
console.log(city); // Output: Paris

Important:let cannot be redeclared in the same scope. This prevents accidental overwrites.

 
// Redeclaring let in same scope causes error
let country = "France";
let country = "Italy"; // SyntaxError: Identifier 'country' has already been declared

Use let when you need to change the variable's value later. It is perfect for counters, accumulators, and temporary data.

Learn more about different variable types in our Types of JavaScript Variables article.

The const Keyword

The const keyword stands for constant. It is also block-scoped like let. The key difference is that const cannot be reassigned after declaration.

You must assign a value when you declare a const variable. Otherwise, you get a syntax error.

Example of const:

 
// Declaring a constant with const
const pi = 3.14159;
console.log(pi); // Output: 3.14159

Important:const does not make the value immutable. If the value is an object or array, you can still modify its properties or elements. Only the binding to the variable is constant.

 
// const with an object
const person = { name: "Bob" };
person.name = "Charlie"; // Allowed
console.log(person.name); // Output: Charlie

// But cannot reassign person
person = { name: "Dave" }; // TypeError: Assignment to constant variable.

Use const by default. It makes your code safer and easier to understand. Only use let when you know the value needs to change.

Scope and Hoisting

Scope determines where a variable is accessible. JavaScript has three types of scope: global, function, and block.

Global variables are declared outside any function or block. They are accessible everywhere. Function-scoped variables (with var) are only inside their function. Block-scoped variables (let and const) are only inside their block.

Hoisting is a JavaScript behavior where declarations are moved to the top of their scope. However, only var is hoisted with an initial value of undefined. let and const are hoisted but not initialized. Accessing them before declaration results in a ReferenceError.

 
// Hoisting example
console.log(a); // Output: undefined (var hoisted)
var a = 5;

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;

For a detailed explanation of scope, check out our JavaScript Variable Scope Explained guide.

Best Practices for Declaring Variables

Follow these simple rules to write clean and error-free code:

• Use const as your default choice.
• Use let only when you need to reassign the value.
• Avoid var in modern projects.
• Declare variables at the top of their scope.
• Use meaningful variable names.
• Always initialize variables when declaring them.

These habits prevent bugs and make your code easier to read.

Common Mistakes to Avoid

Beginners often make these errors. Here is how to avoid them:

1. Using undeclared variables. JavaScript creates global variables automatically if you assign a value without declaring it. Always use let or const.

 
// Bad practice
x = 10; // Creates global variable 'x'

// Good practice
let x = 10;

2. Redeclaring let or const in same scope. This causes a syntax error. Use different names for different variables.

3. Forgetting to initialize const. Always assign a value when declaring const.

For more examples of JavaScript variables, see our JavaScript Variables Examples page.

Conclusion

Declaring variables correctly is essential for every JavaScript developer. Use const by default for safety. Switch to let when you need to change values. Avoid var in new code.

Remember the rules of scope and hoisting. They affect how your variables behave. With practice, you will master variable declaration and write better JavaScript.

Start using these concepts today. Your code will be cleaner, more predictable, and easier to debug.