Declaring and Using Variables in JavaScript (let, const, var)

Introduction

Variables are fundamental building blocks in any programming language, and JavaScript is no exception. They are used to store and manipulate data throughout your code. This article explores the concept of variables in JavaScript, including how to declare and use them, the differences between variable types, and practical examples to illustrate their usage.

Declaring Variables

In JavaScript, variables can be declared using three keywords: var, let, and const. Each has its own scope and behavior:

• var: Declares a variable with function scope. It can be re-declared and updated. For example: var city = 'New York';
• let: Declares a variable with block scope. It can be updated but not re-declared in the same scope. For example: let score = 85;
• const: Declares a constant with block scope. It cannot be updated or re-declared. For example: const PI = 3.14;

Choosing the right keyword is important for writing clean and maintainable code.

Variable Scope

The scope of a variable determines where it can be accessed in the code. JavaScript has three types of scope:

• Global Scope: Variables declared outside of any function or block are in the global scope and can be accessed from anywhere in the code.
• Function Scope: Variables declared inside a function using var are in the function scope and can only be accessed within that function.
• Block Scope: Variables declared inside a block (e.g., inside {}) using let or const are in the block scope and can only be accessed within that block.

/* Example: Variable scope */
var globalVar = 10; // Global scope

function myFunction() {
  var localVar = 20; // Function scope
  let blockVar = 30; // Block scope
  console.log(globalVar); // Output: 10
  console.log(localVar); // Output: 20
  console.log(blockVar); // Output: 30
}

myFunction();
// console.log(localVar); // Error: localVar is not defined
// console.log(blockVar); // Error: blockVar is not defined

        

This example demonstrates how variable scope affects their accessibility within the code.

Variable Hoisting

Variable hoisting is a JavaScript behavior where variable declarations are moved to the top of their scope before code execution. This means that variables can be used before they are declared. However, only the declaration is hoisted, not the initialization.

/* Example: Variable hoisting */
console.log(hoistedVar); // Output: undefined
var hoistedVar = 10;

console.log(hoistedLet); // Error: Cannot access 'hoistedLet' before initialization
let hoistedLet = 20;

console.log(hoistedConst); // Error: Cannot access 'hoistedConst' before initialization
const hoistedConst = 30;

        

In this example, the variable declared with var is hoisted, while those declared with let and const are not.

Examples of Variables in Action

Let's explore some examples to illustrate how variables are used in JavaScript:

/* Example: Declaring and using variables */
let name = 'Alice';
let age = 30;
const isStudent = false;

// Updating variables
name = 'Bob';
age += 1;

// Outputting variable values
console.log(`Name: ${name}, Age: ${age}, Is Student: ${isStudent}`); // Output: Name: Bob, Age: 31, Is Student: false

/* Example: Using non-primitive variables */
let person = {
  name: 'Charlie',
  age: 25
};

// Accessing object properties
console.log(person.name); // Output: Charlie
console.log(person.age); // Output: 25

// Updating object properties
person.age = 26;
console.log(person.age); // Output: 26

        

These examples demonstrate how to declare, use, and update variables in JavaScript.