What do the key words var
, let
and const
do?
These key words are used to declare variables in JavaScript.
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
Both let
and var
can have their values changed after declaration and can be initialized without a value. Variables declared with const
cannot change, and a value must be assigned when the variable is declared.
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
firstName = 'John'; // Runs without issue
lastName = 'Smith'; // Runs without issue
age = 80; // Causes TypeError: Assignment to constant variable.
// Variables declared without assigning a value
let firstName; //Runs without issue
var lastName; // Runs without issue
const age; // Causes SyntaxError: Missing initializer in const declaration
A few things to note about const
- If the variable is an Object, the object attribute values can be changed and additional attributes can also be added. The variable cannot be reassigned.
- If the variable is an Array, the values in the array can change, but the variable cannot be reassigned.
- You will sometimes see
const
variables written in all capsconst PORT = 8080
. This is a stylistic choice.
// Objects
const obj = {
firstName: 'Bob',
};
obj.firstName = 'John'; // Runs without issue
obj.lastName = 'Bobson'; // Runs without issue
delete obj.firstName; // Runs without issue
obj = {}; // Causes TypeError: Assignment to constant variable.
// Arrays
const arr = [1, 2, 3];
arr.push(4); // Runs without issue
arr = []; // Causes TypeError: Assignment to constant variable.
Understanding scope
There are three types of scope in JavaScript. The scope of a variable determines which other parts of the program can access it.
- Function Scope
- Block Scope
- Global Scope
Function Scope
Variables declared within a function will have functional scope. Whether you declare a variable as either var
, let
or const
, it will only be accessible within the function it was declared in.
// Function Scope
function doSomething() {
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
}
doSomething();
console.log(firstName);
console.log(lastName);
console.log(age);
// The three variables are not accessible outside of
// the function so they cause a ReferenceError
Block Scope
You can create block scope by wrapping your code in {}
. Both let
and const
are not accessible outside of the block they were defined in. On the other hand, var
is accessible outside of the block it is defined in.
// Block Scope
{
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
}
console.log(firstName); // Will run
console.log(lastName); // Causes ReferenceError: lastName is not defined
console.log(age); // Causes ReferenceError: age is not defined
Block Scoping can also be seen in for-loops
.
for (var x = 0; x < 10; x++) {
console.log(x);
}
console.log(x);
// Runs without issues
for (let x = 0; x < 10; x++) {
console.log(x);
}
console.log(x);
// Causes ReferenceError: x is not defined
Global Scope
These are variables declared outside of the functional scope and block scope. They can be accessed globally in the JavaScript program. It is advisable to declare a limited number of variables like this. Having many global variables in a JavaScript program can often lead to unforeseen bugs as the program becomes more complex.
var firstName = 'Bob';
let lastName = 'Bobson';
const age = 20;
// Function Scope
function doSomething() {
console.log(firstName);
console.log(lastName);
console.log(age);
}
doSomething();
// Block Scope
{
console.log(firstName);
console.log(lastName);
console.log(age);
}
// Prints the variables without any errors
Key Takeaways
- Do not use
var
, uselet
andconst
instead. Sincevar
is not block scoping, it can lead to unforeseen bugs in your program. - Use
const
when you know the value will not change. Uselet
when the value will change
More info can be found on the MDN docs:
Leave a comment if you have any questions or feedback.
Top comments (0)