In JavaScript, there are different ways to declare a variable. These include using the keywords var, let, and const. Each of these has slightly different implications for how the variable can be used in your code.
var
The keyword var is the traditional way to declare a variable in JavaScript. Variables declared with var are global variables, meaning they can be accessed from anywhere in your code. They are also function-scoped, meaning that they are only accessible within the scope of the function they were declared in. See the examples below:
Example 1
Inside the function:
function displayName() {
var fullName = "Francisco Inoque";
console.log(fullName)
}
namePersonal()
// Result is: Francisco Inoque
Example 2
Accessing the variable inside the if block from function scope:
function namePersonal() {
if(true) {
var fullName = "Francisco Inoque"
}
console.log(fullName)
}
namePersonal()
// Result is: Francisco Inoque
Example 3
Accessing the variable before being declared:
function displayName() {
console.log(fullName)
var fullName = "Francisco Inoque";
}
namePersonal()
// Result is: undefined
let
Let is a newer way to create variables. It was introduced with the ES6 version of JavaScript (ECMAScript 6). Its purpose is also to create variables, but unlike var, it has some restrictions. For example, you can’t use let with the same name twice in the same scope. See the examples below:
Example 1
Inside the function:
function displayName() {
let fullName = "Francisco Inoque";
console.log(fullName)
}
namePersonal()
// Result is: Francisco Inoque
Example 2
Accessing the variable inside the if block from function scope:
function namePersonal() {
if(true) {
let fullName = "Francisco Inoque"
}
console.log(fullName)
}
namePersonal()
//Return Error
// Result is: ReferenceError: fullName is not defined
Example 3
Accessing the variable before being declared:
function displayName() {
console.log(fullName)
let fullName = "Francisco Inoque";
}
namePersonal()
//Return Error
// Result is: ReferenceError: Cannot access 'fullName' before initialization
const
Const is also a new way to declare variables introduced in ES6. The main difference between const and other ways of declaring variables is that with const you can’t change the value of the variable once it’s been declared. That is, const has all the characteristics of let plus some addition, which is the immutability of the assigned value. See the examples below:
Example 1
Inside the function:
function displayName() {
const fullName = "Francisco Inoque";
console.log(fullName)
}
namePersonal()
// Result is: Francisco Inoque
Example 2
Accessing the variable inside the if block from function scope:
function namePersonal() {
if(true) {
const fullName = "Francisco Inoque"
}
console.log(fullName)
}
namePersonal()
//Return Error
// Result is: ReferenceError: fullName is not defined
Example 3
Accessing the variable before being declared:
function displayName() {
console.log(fullName)
const fullName = "Francisco Inoque";
}
namePersonal()
//Return Error
// Result is: ReferenceError: Cannot access 'fullName' before initialization
Example 4
Accessing the variable before being declared:
function displayName() {
const fullName = "Francisco Inoque";
fullName = "Inoque";
console.log(fullName)
}
namePersonal()
//Return Error
// Result is: TypeError: Assignment to constant variable.
So which one should you use?
It depends on what you need and what your goal is. If you want to create a variable without any restrictions, then use var. If you want to make sure you don’t accidentally change the value of a variable later on, then use const. And if you want something in between those two extremes, then let might be what you’re looking for.
Top comments (7)
I expected to eye-roll at yet another in a million "what is var/let/const" type blog posts. But this one was well done, and more balanced than most.
Kyle, thank you so much for the feedback. And please don't forget to share.
This is incorrect. Simply declaring a function with var doesn't make it global at all. If you are in a function, a method or a module then you won't have access to that variable globally.
Do you know what a global scope variable or function is?
It is any variable or function that can be accessed from any part of your code. But in this article, I'd like you to pay attention to the scope that each of the forms offers.
Yes and you are incorrect. Simply using var doesn't make your variable globally scoped. Feel free to share code that shows a var being declared in a function being accessible in the global scope.
I completely agree.
Doing this:
displays an undefined error an thus makes this statement incorrect:
Variables declared with const keyword are not immutable. You only cannot reassign the const variable, but you can modify fields of the object which this variable contains