JavaScript var Keyword

In this chapter, we will learn about the var keyword in JavaScript. The var keyword is used to declare variables and has some unique characteristics compared to let and const. We will cover:

• Introduction to var
• Variable Hoisting
• Scope of var
• Re-declaration and Re-assignment
• Best Practices for Using var
• Examples of Using var

Introduction to var

The var keyword has been used to declare variables since the beginning of JavaScript. Although newer keywords like let and const offer better scoping and block-level declaration, understanding var is still important for maintaining legacy code and understanding JavaScript’s history.

Syntax

var variableName = value;

Example

var name = "Ramesh";
var age = 25;

Variable Hoisting

Variables declared with var are hoisted to the top of their scope, meaning they can be used before they are declared. However, their initial values are undefined until the actual assignment.

Example

console.log(name); // Output: undefined
var name = "Ramesh";
console.log(name); // Output: Ramesh

In the example above, the declaration var name is hoisted to the top of the scope, but the assignment name = "Ramesh" remains in its original position.

Scope of var

Variables declared with var have function scope or global scope. They do not have block scope, which means they are not confined to the block in which they are declared (such as within an if statement or for loop).

Example: Function Scope

function greet() {
  var message = "Hello";
  console.log(message);
}
greet(); // Output: Hello
console.log(message); // Error: message is not defined

Example: Global Scope

var globalVar = "I am global";

function showGlobalVar() {
  console.log(globalVar);
}

showGlobalVar(); // Output: I am global

Example: Lack of Block Scope

if (true) {
  var blockVar = "I am not block scoped";
}
console.log(blockVar); // Output: I am not block scoped

Re-declaration and Re-assignment

Variables declared with var can be re-declared and re-assigned within the same scope without causing an error.

Example

var name = "Ramesh";
var name = "Ramesh"; // Re-declaration is allowed
name = "Rahul";    // Re-assignment is allowed
console.log(name); // Output: Rahul

Best Practices for Using var

• Avoid using var in new code: Prefer let and const for variable declarations as they provide block scope and prevent accidental re-declarations.
• Understand legacy code: Knowing how var works is essential for maintaining and updating older JavaScript codebases.

Examples of Using var

Example 1: Variable Hoisting

console.log(count); // Output: undefined
var count = 10;
console.log(count); // Output: 10

Example 2: Function Scope

function testScope() {
  var localVar = "I am local";
  console.log(localVar); // Output: I am local
}
testScope();
console.log(localVar); // Error: localVar is not defined

Example 3: Lack of Block Scope

for (var i = 0; i < 5; i++) {
  console.log(i); // Output: 0 1 2 3 4
}
console.log(i); // Output: 5 (i is not block scoped)

Conclusion

In this chapter, you learned about the var keyword in JavaScript, including variable hoisting, scope, re-declaration, and re-assignment. Although let and const are generally preferred for variable declarations in modern JavaScript, understanding var is important for maintaining legacy code and understanding JavaScript’s history.