Understanding 'var', 'let', 'const', and the Blank Type in Modern JavaScript

Knowing how to declare variables in JavaScript is crucial. The way you declare variables affects how your code behaves and how easy it is to manage. Choosing between 'var', 'let', 'const', or even leaving the type undefined can have a significant impact on the outcome of your project.

'var': The Traditional Approach

Before the release of ES6 (ECMAScript 2015), 'var' was the only way to declare variables in JavaScript. While still valid, 'var' has some quirks that can lead to bugs.

How 'var' Works

'var' created inside a function is function-scoped, which means it’s accessible throughout the entire function where it’s declared. It doesn’t matter if you declare it inside a block like an 'if' statement. It will still be visible throughout the function.

'var' created outside any function gets global scope. It becomes a property of the global object. In a browser environment, the global object is window. This means that a globally declared 'var' variable can be accessed as a property of window.

Example:

var globalVar = "Hello, World!";
console.log(window.globalVar);  // Outputs: "Hello, World!"        

While this behavior might seem useful, it can lead to unintended side effects. If multiple scripts declare global variables using var, they might overwrite each other, causing bugs that are difficult to trace.

Hoisting and 'var'

Another important feature of 'var' is hoisting. Hoisting is like moving all the variable declarations to the top of the function before the code runs. However, the actual assignment remains in its original place. This can cause some unexpected behavior.

For example:

console.log(foo);  // undefined
var foo = 10;        

Even though foo is declared after the 'console.log', JavaScript hoists the declaration to the top of the function. However, because the assignment doesn’t get hoisted, foo is still undefined when the 'console.log(foo)' runs.

Real-World Use Case: Legacy Code Refactoring

If you are maintaining or refactoring older JavaScript code, you’ll likely encounter 'var'. Replacing 'var' with 'let' or 'const' can help prevent bugs related to hoisting and scoping.

'let': Block-Scoped and Flexible

'let' was introduced in ES6 to address the problems associated with 'var'. It provides a more predictable behavior, especially in block-scoped contexts.

How 'let' Works

'let' is block-scoped, meaning it only exists within the block it’s declared in. This makes it safer for use inside loops, conditionals, and other code blocks.

Additionally, while 'let' is also hoisted, it behaves differently from 'var'. Until the declaration is reached, the variable exists in a temporal dead zone (TDZ). If you try to access a 'let' variable before it’s declared, JavaScript will throw a ReferenceError.

Here’s an example:

function letTest() {
  let x = 10;
  if (true) {
    let x = 20;  // This x only exists within this block
    console.log(x);  // 20
  }
  console.log(x);  // 10
}        

In this case, the two 'x' variables are completely separate due to block scoping.

Real-World Use Case: Loop Variables

When iterating over arrays, using 'let' ensures that each loop iteration has its own scope. This prevents issues with shared state across iterations.

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 100);  // Outputs 0, 1, 2, 3, 4
}        

'const': Immutability for Consistency

'const' is another ES6 feature. It is used to declare variables that should not be reassigned after they are set.

How 'const' Works

Like 'let', 'const' is block-scoped. The key difference is that variables declared with 'const' cannot be reassigned. However, this doesn’t mean the data itself is immutable. If a 'const' variable holds an object or array, you can still modify the properties or elements inside them.

Here’s an example:

const API_KEY = "123456789";
API_KEY = "987654321";  // TypeError: Assignment to constant variable        

But if 'const' is used with an object:

const user = { name: "John" };
user.name = "Jane";  // This is allowed        

The reference to the object is constant, but the object’s properties can still be changed.

Naming Conventions with 'const'

There’s no strict rule for naming 'const' variables in uppercase, but it’s common practice to use UPPER_CASE for constant values that don’t change throughout the program.

• UPPER_CASE for constants:

const MAX_CONNECTIONS = 100;
const API_KEY = "api_Key_123";        

• camelCase for non-reassigned variables that may hold mutable data:

const userProfile = { name: "John", age: 30 };
const items = [1, 2, 3];        

Blank (Skipped) Type: When the Declaration Type Is Missing

Sometimes, you might encounter a situation where the declaration keyword ('var', 'let', or 'const') is left out entirely. This creates what’s known as a Blank or Skipped Type.

How Blank Type Works

When you declare a variable without specifying 'var', 'let', or 'const', JavaScript automatically declares it as a global variable. This can lead to serious issues in your code, especially if you’re not aware that you’ve inadvertently created a global variable.

Example:

x = 10;  // Declares x as a global variable
console.log(x);  // 10
console.log(window.x); // 10        

This can be dangerous in larger projects because global variables are accessible from anywhere in the program, which increases the risk of conflicts and bugs.

In strict mode, however, this practice is disallowed. If you try to declare a variable without specifying its type, JavaScript will throw an error.

"use strict";
x = 10;  // ReferenceError: x is not defined        

Conclusion: Choose the Right Declaration for the Job

The way you declare variables in JavaScript matters. Here’s a quick recap:

• Use 'var' when working with legacy code, but avoid it for new development due to its quirks with scope and hoisting.
• Use 'let' for variables that need to be reassigned or are scoped within a block, like in loops or conditionals.
• Use 'const' for values that shouldn’t be reassigned, ensuring consistency and avoiding accidental changes. Use UPPER_CASE for true constants.
• Avoid Blank Type declarations because they pollute the global scope. Always use 'var', 'let', or 'const' to declare variables.

By carefully choosing your variable declarations, you’ll write cleaner, more predictable code that’s easier to debug and maintain. Happy coding!

Sources: MDN Web Docs on var, let, const, and blank type handling(const)(let)(var).