Variable Declaration in Javascript

The difference between var and const in JavaScript lies in scoping, mutability, and hoisting, which directly impact how the variables behave and why const is often preferred.

In the example above, var has (Global/Function Scope), let’s look deeper.

Scope: var is function-scoped or globally scoped if declared outside a function. This means a var variable is accessible throughout the function it’s declared in, even before its declaration due to hoisting.

console.log(name); // undefined
var name = 'Ali';

Here, var name is hoisted to the top of its scope, but its value is not assigned until the declaration line is executed. This can lead to bugs.

Re-declaration: Variables declared with var can be re-declared in the same scope without error.

var name = 'Ali';
var name = 'Ahmed'; // No error

Mutability: var allows reassigning the variable value.

var name = 'Ali';
name = 'Ahmed'; // Works

Now let’s take a look at the following example, const (Block Scope, Immutable)

Scope: const is block-scoped, meaning it is only accessible within the block it’s declared in. It is not hoisted in the same sense as var because accessing it before declaration will throw a ReferenceError.

{
  // ReferenceError: Cannot access 'name' before initialization
  console.log(name); 
  const name = 'Ali';
}

Re-declaration: You cannot re-declare a const variable in the same scope.

const name = 'Ali';
// Error: Identifier 'name' has already been declared
const name = 'Ahmed'; 

Mutability: A const variable cannot be reassigned, but if it holds a complex data type (like an object or array), you can modify its contents.

const name = 'Ali';
// Error: Assignment to constant variable
name = 'Ahmed'; 

const person = { name: 'Ali' };
person.name = 'Ahmed'; // Works

Why is const better in most cases?

• Predictable Behavior:
  • const ensures the variable reference will not change, reducing the chance of bugs.
  • Encourages immutability, making code easier to debug and reason about.
• Block Scope:
  • const respects block-level scope, avoiding the pitfalls of global or function scoping that var can lead to.
• No Hoisting Confusion:
  • Unlike var, const variables throw an error if accessed before their declaration, making code behavior clearer and less prone to unintended bugs.

When to Use?

• const: Use for variables that won’t be reassigned.
• let: Use if you expect to reassign the variable later.
• var: Rarely used in modern JavaScript. Prefer let or const for cleaner, more predictable code.

It’s fascinating to see how the choice of variable declarations can significantly influence programming logic and overall code performance.