Var, Let & Const in JavaScript: Explained Simply

If you've ever been confused about when to use var, let, or const, this post is for you. I've broken down their differences and their functionalities in an easy-to-understand way.

Function Scope:

Variables are accessible within the function they're declared in, but not outside.

1function functionScope() {
2  if (true) {
3    var x = 5;
4  }
5  console.log(x); // Outputs: 5
6}

Block Scope:

Variables are accessible only within the closest set of curly braces {} (like in if, for, or standalone blocks).

1function blockScope() {
2  if (true) {
3    let x = 5;
4  }
5  console.log(x); // ReferenceError: x is not defined
6  }
7}

Const & Initialization:

Must be initialized at declaration and cannot be reassigned. Ideal for fixed values.

1const a; // Error: Missing initializer in const declaration
2const b = 10;

Re-declaration & Re-assignment:

Re-declaration allows redefining a variable; re-assignment updates its value.
var allows both, let allows only re-assignment, const allows neither.

1var c = 5 ;
2var c = 10; // Allowed
3
4let d = 5 ;
5d = 10; // Allowed
6let d = 15; // Error: 'd' has already been declared
7
8const e = 5 ;
9const e = 10; // Error: 'e' has already been declared
10e = 10; // Error: Assignment to constant variable.

Stored In Global Object:

When a variable declared using var (outside any function) is hoisted, it's added to the global object (window in browsers). This makes it globally accessible. In contrast, let and const don't get attached to the global object, providing cleaner global scopes and preventing unintended global variable pollution.

1var globalVar = "I'm global!";
2console.log(window.globalVar); // Outputs: "I'm global!"
3
4let notGlobalLet = "I'm not!";
5console.log(window.notGlobalLet); // Outputs: undefined

Hoisting:

In JavaScript, variable and function declarations are moved to the top of their containing scope during the compile phase, a behavior called "hoisting". However, only the declarations are hoisted, not the initializations.

1console.log(z); // Output : undefined
2var z = 5;

Temporal Dead Zone (TDZ):

It is the time between a variable entering its scope and its declaration. During this phase, accessing the variable causes a ReferenceError. This prevents the use of let and const before they’re declared, unlike var, which defaults to undefined when hoisted.

1console.log(foo); // ReferenceError: can't access 'foo' before initialization
2
3let foo = "Hello";

Hey! If you find my post helpful, consider subscribing to our MustUp blog and follow me for more insights into web development. Let's learn and grow together in this coding journey. Looking forward to your thoughts and experiences with these in the comments.

awesome

Well said and very insightfully.

Thanks connect me for more informational content