DEV Community

Cover image for Enough JavaScript to get you Started : #16 var vs let vs const
Adarsh Pandya
Adarsh Pandya

Posted on

Enough JavaScript to get you Started : #16 var vs let vs const

Before we start

๐Ÿ‘‰ Before we start this article i would like to clarify some technical jargons for you

๐Ÿ‘‰ Scope : Scope is nothing but a code block where the variable is accessible for usage

๐Ÿ‘‰ Global Scope : Global Scope means variable is declared globally (not in some condition or function) hence it can be used any where throughout the execution of program

๐Ÿ‘‰ Local/ Functional Scope : this simply means that when we declare a variable on function level or somewhere locally in code block then it's not accessible outside of that particular scope (imagine variables declared in functions , loops ,conditionals...)

๐Ÿ‘‰ Block Scope : Blocks are nothing but piece of code written inside any curly braces {...} [ex. if block , or function's block]

Var

๐Ÿ‘‰ Var is the oldest way of declaring variable

๐Ÿ‘‰ Var can be globally and functionally scoped

๐Ÿ‘‰ If we Declare var inside function it becomes functionally scoped if we declare it outside function it becomes globally scoped and is available anywhere in program

๐Ÿ‘‰ can be redeclared or updated

๐Ÿ‘‰Example of Scope

var a = 10; // global variable

function fun()
{
    // functional scoped variable
    var b = 20;
    console.log(a);
    console.log(b);
}
fun();
console.log(a);
console.log(b);
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ output

-> inside function
10 โœ”
20 โœ”
-> outside function
10 โœ”
uncaught reference : b is not defined โŒ 
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Notice that functions can access both global and functional variables.

๐Ÿ‘‰ Example of Re-declaration

// variables with var can be re-decalred โœ”
var a = 10;
var a = 20;
// you won't get any error
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Example of updatable variables

// variables with var can be updated โœ”
var a =10;
a=20;
// you won't get any error
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Problems with var

๐Ÿ‘‰ Redefining variables won't throw any errors which means it's tricky to remember which variable is already there and which variable is new.


Let

๐Ÿ‘‰ Let is the modern way of declaring variables introduces in ES2015

๐Ÿ‘‰ Let is now recommended way of declaring variables

๐Ÿ‘‰ Let is block scoped

๐Ÿ‘‰ Let can be updated but not redeclared

๐Ÿ‘‰Example of Declaration

// let can be updated โœ”
let a = 30; โœ”
a = 40; โœ”
// but not redeclared โŒ
let b = 40; โœ”
let b = 90 ;โŒ

// error : Identifier 'b' has already been declared
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰Example of block scope

let sayHi = "hi";
if(sayHi === "hi")
{
    let newMsg = "how are you?";
   console.log(sayHi); // outputs "hi"
}

console.log(sayHi); โœ”
console.log(newMsg); โŒ // 'newMsg is not defined'
Enter fullscreen mode Exit fullscreen mode

Const

๐Ÿ‘‰ Variables declared with const remains same throughout the execution

๐Ÿ‘‰ variables declared with const are not redeclarable or updatable

๐Ÿ‘‰ if const variables declared outside any block they becomes global scoped , but if they are declared within block they becomes block scoped

๐Ÿ‘‰ values can not be changes or new values can not be assigned to const variables

๐Ÿ‘‰ Example:

const sayHi = "hi";
const sayHi = "hello"; โŒ // will throw error

//and ...

const msg = "buy bread from market";
msg = "new msg here"; โŒ // error:  assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ But...

const numbers = [1,2,3];
number[0] = 4; โœ” // works fine

// but...
numbers = [5,6,7]; โŒ // won't work
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ the first case will work because we're within the rules , we're not redeclaring the const variable nor we're updating it. but we're mutating it. ๐Ÿ˜€


Summary

๐Ÿ‘‰ var: Global/function scoped depending on declaration undefined when accessing a variable before it's declared. can be redeclared and updated.


๐Ÿ‘‰ let: block scoped. can be updated but we can't redeclare.


๐Ÿ‘‰const: block scoped. can not be reassigned nor we can redeclare.

Let me know in comment section if you have any doubt or feedback. it's always worth to give time to the thriving developer community :)

Keep Coding โค

Hey , Let' Connect๐Ÿ‘‹

Twitter / Github

Discussion (10)

Collapse
matjones profile image
Mat Jones

I've been doing software professionally for several years now and I honestly cannot think of a single real-world case where I've ever had to use var or any case where var could possibly have been better in any way. Basically vars only use is for const and let to be compiled to it for Internet Explorer support ๐Ÿ˜‚

Collapse
whoadarshpandya profile image
Adarsh Pandya Author

I totally agree, I don't use var , but this is for beginners so it's beneficial to compare :)

Collapse
matjones profile image
Mat Jones

Definitely agree. Just pointing it out.

Collapse
aidap1 profile image
Aidan

Is there any reason to use var?
Everything I've been taught (only in the last ~1 month, I'm new) has focused on let and const

Collapse
matjones profile image
Mat Jones

just saw your comment after posting mine

Collapse
whoadarshpandya profile image
Adarsh Pandya Author

I totally agree, I don't use var , but this is for beginners so it's beneficial to compare :)

Thread Thread
matjones profile image
Mat Jones

Definitely agree. Just pointing it out.

Collapse
theshakeabhi profile image
ABHISHEK CHANDRASENAN

Hey,
In the Var section of "Example of Re-declaration",
Did you mean:

var a = 10;
var a = 20;
Enter fullscreen mode Exit fullscreen mode

?
Or did you mean what you wrote:

var a = 10;
var b = 20;
Enter fullscreen mode Exit fullscreen mode

?

Do feel to correct me if I am wrong.

Collapse
whoadarshpandya profile image
Adarsh Pandya Author

Hey you're right, it was typo - fixed it

Thanks

Collapse
theshakeabhi profile image
ABHISHEK CHANDRASENAN

Glad I could help.