What is a JavaScript Variable?
Define JavaScript Variable
JavaScript variables are containers that store data values in memory so you can reference and reuse them. Creating a variable is called "declaring" a variable. A variable name must be unique, and you can assign a value when declaring it or before using it.
JavaScript Variable Declaration
In JavaScript, there are 3 reserved keywords used to declare a variable:
var
Function or global scope
let
Block scope
const
Block scope, immutable
Note: JavaScript is a dynamically typed language. A variable can hold values of any data type.
Important Points About JavaScript Variables
1. Cannot Access Before Definition
You cannot access a JavaScript variable before you define it:
<script>
console.log(myName); //Uncaught ReferenceError: myName is not defined
const myName = 'Ankaj Gupta';
</script>Output:
ReferenceError: can't access lexical declaration `myName` before initialization
2. Dynamic Typing
Variables can change from one data type to another:
<script>
var myName = 'Ankaj Gupta'; // String
myName = 100; // Number
myName = true; // Boolean
</script>In this example: The variable changes from string to number to boolean.
3. Whitespace and Line Breaks
JavaScript allows multiple line breaks and whitespace when declaring variables with var:
<script>
var
one
=
1,
two
=
"two"
</script>Note: Semicolons are optional in JavaScript, but recommended for code clarity.
4. Loosely Typed Variables
JavaScript variables are loosely typed, meaning you can assign any data type to a variable without declaring the type:
<script>
var one = 1; // Numeric value
one = 'one'; // String value
one = 1.1; // Decimal value
one = null; // null value
one = true; // Boolean value
</script>Example: The same variable one can hold different data types.
Understanding var, let, and const
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function/Global | Block | Block |
| Re-declaration | ✅ Allowed | ❌ Not allowed | ❌ Not allowed |
| Re-assignment | ✅ Allowed | ✅ Allowed | ❌ Not allowed |
| Hoisting | Yes (undefined) | Yes (TDZ) | Yes (TDZ) |
| Use Case | Legacy code | Variables | Constants |
When to Use var, let, or const?
Use var when:
- • Working with legacy code
- • Need function-scoped variables
- • Supporting older browsers
Recommendation: Avoid in modern JavaScript
Use let when:
- • Variable will be reassigned
- • Need block-scoped variables
- • Loop counters or temporary values
Recommendation: Default choice for variables
Use const when:
- • Value won't be reassigned
- • Need immutable references
- • Objects or arrays that shouldn't change
Recommendation: Prefer const by default
Best Practices
- Use const by default: If the value won't change, use const
- Use let for reassignments: If you need to reassign, use let
- Avoid var: Don't use var in modern JavaScript due to hoisting and scope issues
- Declare at the top: Declare variables at the top of their scope for clarity
- Use meaningful names: Choose descriptive variable names that explain their purpose
Summary
JavaScript variables are dynamic, loosely typed containers that can hold any data type. Use const for constants, let for variables that need reassignment, and avoid var in modern code.
Understanding variable scope, hoisting, and type behavior is crucial for writing effective JavaScript code.