Introduction
In JavaScript, the var
key phrase is used to declare a variable. It has been part of JavaScript for the reason that language’s inception and continues to be an necessary a part of it, regardless of the introduction of let
and const
in ECMAScript 6.
On this Byte, we’ll dive into the aim of the var
key phrase, the way it differs from let
and const
, and when to make use of or omit it.
Why Use the ‘var’ Key phrase?
The var
key phrase in JavaScript is used to declare a variable and optionally initialize it to a worth. var
is function-scoped, that means it is solely accessible inside the perform it is declared in. If declared exterior any perform, it is globally scoped. Here is an instance:
var identify = "John Doe";
perform show() {
var age = 30;
console.log(identify); // Output: John Doe
console.log(age); // Output: 30
}
show();
console.log(age); // Output: Error: age isn't outlined
Within the above instance, identify
is accessible globally, whereas age
is just accessible inside the show
perform.
Variations Between ‘var’, ‘let’, and ‘const’
One of many important variations between var
, let
, and const
is their scoping guidelines. Whereas var
is function-scoped, let
and const
are block-scoped. This implies let
and const
are solely accessible inside the block they’re declared in.
One other distinction is that var
variables will be re-declared and up to date, however let
variables can solely be up to date, not re-declared. const
variables, then again, can neither be up to date nor re-declared.
Here is an instance for example this:
var x = 10;
var x = 20; // That is tremendous
let y = 10;
let y = 20; // Error: Identifier 'y' has already been declared
const z = 10;
z = 20; // Error: Task to fixed variable.
When to Use ‘var’ and When to Omit It
Given the variations between var
, let
, and const
, when do you have to use var
and when do you have to omit it?
As a rule of thumb, you must use var
if you need the variable to be function-scoped or globally scoped. If you need the variable to be block-scoped, you must use let
or const
as a substitute.
Be aware: For those who’re writing code in ECMAScript 6 or later, it is advisable to make use of let
and const
over var
for higher readability and to keep away from potential points with variable hoisting and re-declaration.
Here is an instance:
perform varTest() {
var x = 1;
if (true) {
var x = 2; // identical variable!
console.log(x); // 2
}
console.log(x); // 2
}
perform letTest() {
let x = 1;
if (true) {
let x = 2; // totally different variable
console.log(x); // 2
}
console.log(x); // 1
}
Within the varTest
perform, x
is re-declared inside the if
block, however as a result of var
is function-scoped, it is truly the identical x
as exterior the if
block. Within the letTest
perform, x
inside the if
block is a special x
as a result of let
is block-scoped.
Frequent Errors and How one can Keep away from Them
The var
key phrase is usually a supply of some frequent errors, particularly for novices. Let’s examine a few of these and how one can keep away from them.
First, a standard mistake isn’t understanding the scope of var
. Not like let
and const
, var
is perform scoped, not block scoped. Which means when you declare a variable with var
inside a loop or an if
assertion, it may be accessed exterior of these blocks.
if (true) {
var x = 5;
}
console.log(x); // Outputs: 5
To keep away from this, you should use let
or const
for block-scoped variables.
Secondly, hoisting could cause surprising conduct. Hoisting is a JavaScript mechanism the place variables and performance declarations are moved to the highest of their containing scope. Nonetheless, solely the declarations are hoisted, not the initializations.
console.log(y); // Outputs: undefined
var y = 5;
To keep away from hoisting points, declare and initialize your variables on the high of your scope.
Hyperlink: If you wish to learn extra and have a greater understanding of hoisting, see our article Hoisting in JavaScript.
ECMAScript 5 and ‘var’
Earlier than ECMAScript 2015, often known as ES6, var
was the one option to declare variables in JavaScript. ES5 doesn’t help let
and const
. For those who’re working with an older codebase or must help older browsers that don’t totally help ES6, you may doubtless encounter var
.
In ES5, var
has two foremost traits that distinguish it from let
and const
:
-
Operate scope: As talked about earlier,
var
is perform scoped, not block scoped. -
Hoisting:
var
declarations are hoisted to the highest of their containing scope.
perform instance() {
console.log(z); // Outputs: undefined
var z = 5;
}
instance();
Regardless of these variations, var
can nonetheless be used successfully in ES5. Simply concentrate on its distinctive traits and potential pitfalls.
Conclusion
On this Byte, we have explored the aim of the var
key phrase in JavaScript, the way it differs from let
and const
, and when to make use of or omit it. We have additionally highlighted some frequent errors related to var
and how one can keep away from them. Lastly, we have touched on the position of var
in ECMAScript 5.