Variables are containers for storing data values. In JavaScript, you can declare variables using let, const, or the legacy var keyword.
Historically, JavaScript only had the var keyword for declaring variables. ES6 (ECMAScript 2015) introduced let and const to solve several issues with var, primarily related to how variables are scoped.
let KeywordThe let keyword allows you to declare variables that are block-scoped. This means the variable only exists within the nearest set of curly braces {}.
let x = 1;
x = 2; // You can reassign let variables
console.log(x);2
const KeywordThe const keyword is also block-scoped, but it is used for variables that should not be reassigned. You must initialize a const variable at the time of declaration.
const y = 3;
y = 4; // This will throw an errorTypeError
Note that const only prevents reassignment of the variable identifier. If the value is an object or array, its contents can still be modified.
var KeywordVariables declared with var are function-scoped or globally-scoped, not block-scoped. This can lead to unexpected behavior if you are not careful.
if (true) {
var z = 5;
}
console.log(z); // z is accessible outside the block!5
Here is a visual representation of how scope works differently for let/const versus var:
In JavaScript, variable declarations are processed before any code is executed. This behavior is called hoisting.
var declarations are hoisted to the top of their scope and initialized with undefined. This means you can appear to use a var variable before it is declared.
Read the code. What exactly will it print? Commit to an answer before you look.
console.log(myVar);
var myVar = 10;undefined
Because of hoisting, the declaration var myVar is moved to the top of the scope, but its initialization (= 10) is not. Therefore, when console.log(myVar) executes, the variable exists but its value is undefined.
let and const declarations are also hoisted, but they are NOT initialized to undefined. They remain in a “Temporal Dead Zone” from the start of the block until the execution reaches the line where they are declared. Accessing them in the TDZ throws a ReferenceError.
console.log(myLet);
let myLet = 20;ReferenceError
Does the `const` keyword make the value itself immutable?
No, const only prevents reassignment of the variable identifier. If the value is an object, its properties can still be modified. — const only prevents reassignment of the variable identifier. If the value is an object or array, its contents can still be modified.
How does `var` behave when declared inside a block like an `if` statement?
It ignores the block scope and is hoisted to the nearest enclosing function or global scope. — var ignores block scope and is still hoisted to the nearest enclosing function or global scope.
Can `let` variables be modified after they are declared?
Yes, let variables can be reassigned freely. — let variables can be reassigned freely; only const prevents reassignment.
Which of the following is considered modern best practice for declaring variables in JavaScript?
Use let and const, as var is a legacy feature. — var is a legacy feature. ES6 introduced let and const, which are now the standard.
Fix the bug! This code tries to calculate a total, but it throws an error because the variable was declared with the wrong keyword.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
Variables declared with const cannot be reassigned. Use let instead.
let total = 0;
total = total + 10;
total = total + 5;
console.log(total);Fix the bug! This code tries to access a variable before it is initialized, resulting in a ReferenceError due to the Temporal Dead Zone. Reorder the code so it works.
This code runs. It just does the wrong thing. Read it, find the defect, fix it — the tests below decide when you are right.
You must declare and initialize a let variable before trying to use it.
let greeting = "Hello, World!";
console.log(greeting);