DEV Community

loading...
Cover image for What's the difference between var, let and const keywords?
Tech Talks

What's the difference between var, let and const keywords?

Ankit Kumar
Let's Talk about Tech.Ankit Kumar ⌨️💻➡️ Creator @ https://ankitkumar.dev➡️ Developer in 🇸🇬 from 🇮🇳➡️ Programming for 🌐 &📱➡️ Programming Tutorials ⤵️YouTube.com/TechTalksWithAK
・3 min read

JavaScript has three ways to declare variables.

var width = 100;
let height = 200;
const key = "Tech Talks";
Enter fullscreen mode Exit fullscreen mode

var

  • The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined.
  • If it is defined outside any function, the scope of the variable is global.
  • var is function scoped

Block Example

{
 var a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2
Enter fullscreen mode Exit fullscreen mode
  • We are using the keyword var to define the variable a, the scope of a is limited to the function within which it is defined.
  • Since a is not defined within any function, the scope of the variable a is global, which means that a is recognized within block 2

Function Example

function fun1() {
 var a = 10;
 console.log(a);
} //function scope of fun1

function fun2() {
 a++;
 console.log(a);
} //function scope of fun2
Enter fullscreen mode Exit fullscreen mode
  • Since we have enclosed fun1 and fun2, within separate functions, the scope of var a=10, is limited to fun1 and a is not recognized in fun2.

let:

  • The let keyword was introduced as part of ES6 syntax, as an alternative to var to define variables in Javascript.
  • The scope of a variable defined with the keyword let or const is limited to the block defined by curly braces i.e. {}
  • let is block scoped.

Block Example

  • Let us rewrite the code using the keyword let
{
 let a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2
Enter fullscreen mode Exit fullscreen mode
  • Since we are using let a=10, scope of a is limited to block 1 and a is not recognized in block 2

Function Example

function fun1() {
 let a = 10;
 console.log(a);
} //function scope of fun1

function fun2() {
 a++;
 console.log(a);
} //function scope of fun2
Enter fullscreen mode Exit fullscreen mode
  • Since we have enclosed fun1 and fun2, within separate functions, the scope of let a=10, is limited to fun1 and "a" is not recognized in fun2.

const:

  • If a variable is defined with keyword const, it cannot be reassigned.
  • If a variable is defined using the const keyword, its scope is limited to the block scope
  • It is important to understand that const does NOT mean that the value is fixed and immutable.
  • It CAN be mutated.

Example

{
 const a = 10;
 console.log(a);
} //block 1
{
 a++;
 console.log(a);
} //block 2
Enter fullscreen mode Exit fullscreen mode
  • Since we are using const a=10, scope of "a" is limited to block 1 and "a" is not recognized in block 2.

  • Example to show that the value of the variable defined within the const keyword is mutable, i.e. it can be changed

{
 const a = [1, 2, 3];
 const b = { name: "hello" };
 a.push(4, 5); //mutating the value of constant "a"
 b.name = "World"; //mutating the value of constant "b"

 console.log(a); //this will show [1,2,3,4,5]
 console.log(b); //this will show {name: "World"}
}
Enter fullscreen mode Exit fullscreen mode
  • This code will run without any errors, and shows that we CAN mutate the values that are defined by "const"

  • Note that these variables defined by const cannot be re-assigned

{
 const name = "Tech Talks";
 const PI = 3.14;
 const a = [1, 2, 3];
 const b = { name: "Hello" };
 name = "Ankit Kumar"; //Throws an error, since we are attempting to re-assign "name” to a different value.
 PI = PI + 1; //Throws an error, since we are attempting to re-assign PI to a different value.
 a = [1, 2, 3, 4, 5]; //Throws an error, since we are attempting to re-assign "a" to a different value.
 b = { name: "Hello Ankit" }; //Throws an error, since we are attempting to re-assign "b" to a different value.
}
Enter fullscreen mode Exit fullscreen mode

Summary

var:

  • function scoped
  • undefined when accessing a variable before it's declared

let:

  • block scoped
  • ReferenceError when accessing a variable before it's declared

const:

  • block scoped
  • ReferenceError when accessing a variable before it's declared
  • can't be reassigned

Also, to be notified about my new articles and stories:

Subscribe to my YouTube Channel

Follow me on Medium, Github, and Twitter.

You can find me on LinkedIn as well.

I am quite active on Dev Community as well and write small topics over there.

If you are Instagram person, follow me here

Discussion (1)

Collapse
arvindpdmn profile image
Arvind Padmanabhan

The keywords also differ when it comes to JavaScript hoisting. Learn more here: devopedia.org/hoisting