The Classic var Declaration in JavaScript

Before ES6, the most common way to declare variables was using the var keyword. However, var has some limitations, such as hoisting and scope issues, that can lead to unintended behaviors in your code. Let’s first understand hosting and scope issues.

Hoisting: Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the actual code execution. This means that you can use variables and functions before they are declared in the code.

However, it’s important to note that only the declarations are hoisted, not the initializations. This can lead to unexpected results, as variables might appear to be accessible before they are actually defined. For example:

console.log(x); // Outputs: undefined
var x = 10;

In the above example, var x is hoisted to the top, but its value is not assigned until after the console.log statement. This results in the output of undefined.

Scope Issues: Scope refers to the context in which variables are accessible. JavaScript has two main types of scope: global scope and local scope.

• Global Scope: Variables declared outside of any function or block have global scope, meaning they can be accessed from anywhere in the code. This can lead to unintended variable collisions and modifications if not managed carefully.
• Local Scope: Variables declared within a function or block have local scope, meaning they are only accessible within that function or block. This helps encapsulate variables and prevent unintended interactions between different parts of the code.

Scope issues occur when there’s a misunderstanding of where variables are accessible. For example:

function example() {
  if (true) {
    var localVar = "I'm local";
  }
  console.log(localVar); // Outputs: "I'm local"
}

So, may conclude the issues associated with variable declaration using var with the following example:

var x = 10;
function example() {
  console.log(x); // undefined (due to hoisting)
  var x = 5;
  console.log(x); // 5
}

With the above examples, we come to the end of first part of our JavaScript variable declaration series. 🙂 I’ve you understand how var keyword can be used in JavaScript to declare variable and its inherent issues.