DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for What is the diffence between var, let and const?
Francisco  Inoque
Francisco Inoque

Posted on

What is the diffence between var, let and const?

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Example 3

Accessing the variable before being declared:

function displayName() {
    console.log(fullName)
    var fullName = "Francisco Inoque";
}

namePersonal()

// Result is: undefined

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
getify profile image
Kyle Simpson

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.

Collapse
 
frantchessico profile image
Francisco Inoque Author

Kyle, thank you so much for the feedback. And please don't forget to share.

Collapse
 
clydegrey profile image
Clyde

Variables declared with var are global variables, meaning they can be accessed from anywhere in your code.

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.

Collapse
 
frantchessico profile image
Francisco Inoque Author

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.

Collapse
 
clydegrey profile image
Clyde • Edited on

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.

Thread Thread
 
bqardi profile image
Sune Seifert

I completely agree.
Doing this:

function namePersonal() {
  var fullName = "Francisco Inoque"
}
console.log(fullName)
Enter fullscreen mode Exit fullscreen mode

displays an undefined error an thus makes this statement incorrect:

Variables declared with var are global variables, meaning they can be accessed from anywhere in your code.

Collapse
 
thedenisnikulin profile image
Denis

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

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs