Javascript: Understanding Variables and Scope

Javascript: Understanding Variables and Scope | TaQtiQ

// Declaring a variable named 'score' and assigning it the value 50
let score = 50;

// Using the variable
console.log(score); // Output: 50

// Change the value later on
score = 75;
console.log(score); // Output: 75

function greet() {
  let message = "Hello from inside the function!";
  console.log(message); // Works fine
}

greet();

// Trying to access it outside the function throws an error:
console.log(message); 
// ReferenceError: message is not defined

const globalVar = "I am global";

function outer() {
  const outerVar = "I am in outer";

  function inner() {
    const innerVar = "I am in inner";
    // inner can see globalVar, outerVar, and innerVar
    console.log(globalVar, outerVar, innerVar);
  }
  
  inner();
}

Feature	`var` (Legacy / ES5)	`let` (Modern / ES6)	`const` (Modern / ES6)
Re-declaration	Allowed in the same scope.	Not allowed in the same scope.	Not allowed.
Re-assignment	Allowed.	Allowed.	Not allowed (Must be assigned a value when declared).
Initialisation	Optional (defaults to `undefined`).	Optional (defaults to `undefined`).	Required upon declaration.

// 1. Basic declaration and assignment
var name = "Alice";
console.log(name); // Output: Alice

// 2. Variables declared with var can be reassigned
name = "Bob";
console.log(name); // Output: Bob

// 3. Variables declared with var can be redeclared in the same scope
var name = "Charlie";
console.log(name); // Output: Charlie

// 4. Function scope example
function testVar() {
  var score = 100;
  if (true) {
    var score = 200; // Same variable! var is function scoped, not block-scoped
    console.log(score); // Output: 200
  }
  console.log(score); // Output: 200 (the inner change affected the outer one)
}
testVar();

// 1. Basic declaration and assignment
let name = "Alice";
console.log(name); // Output: Alice

// 2. Variables declared with let can be reassigned
name = "Bob";
console.log(name); // Output: Bob

// 3. Redeclaration in the same scope is not allowed (throws a SyntaxError)
// let name = "Charlie"; // SyntaxError: Identifier 'name' has already been declared

// 4. Block scope example (unlike var)
function testLet() {
  let score = 100;
  if (true) {
    let score = 200; // A completely separate variable! let is block scoped
    console.log(score); // Output: 200
  }
  console.log(score); // Output: 100 (the outer score remains untouched)
}
testLet();

// 1. Basic declaration and assignment (must be initialised immediately)
const name = "Alice";
console.log(name); // Output: Alice

// 2. Re-assignment is not allowed (throws a TypeError)
// name = "Bob"; // TypeError: Assignment to constant variable.

// 3. Re-declaration in the same scope is not allowed (throws a SyntaxError)
// const name = "Charlie"; // SyntaxError: Identifier 'name' has already been declared

// 4. Block scope example 
function testConst() {
  const score = 100;
  if (true) {
    const score = 200; // Completely separate variable! const is block-scoped
    console.log(score); // Output: 200
  }
  console.log(score); // Output: 100
}
testConst();

// 5. Important: const protects the binding, not the value (mutability)
const user = { name: "Alice" };
user.name = "Bob"; // Allowed! We are mutating the object property, not reassigning the variable.
console.log(user.name); // Output: Bob
// user = { name: "Charlie" }; // TypeError: Assignment to constant variable.

function createCounter() {
  let count = 0; // This variable is private

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const myCounter = createCounter();
console.log(myCounter.increment()); // 1
console.log(myCounter.increment()); // 2
console.log(myCounter.getCount());  // 2
// console.log(count); // ReferenceError: count is not defined

Javascript: Understanding Variables and Scope

What are variables?

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

Next.js: What Are React Hooks and How Do They Work?

Understanding Next.js Caching

Next.js: Why You Shouldn't Use a Global /components Folder for Everything

Why do we need variables?

What are 'data types'?

What is 'scope'?

Why does scope matter?

What are the different types of scope?

Global scope

Local Scope / Function Scope

Block Scope

What is 'Lexical Scope' in JavaScript?

The scope chain

How do you declare variables in JavaScript?

`var` keyword

`let` keyword

`const` keyword

What is hoisting in JavaScript?

How does hoisting behave?

`var` hoisting

`let` and `const` hoisting

What exactly is the Temporal Dead Zone (TDZ)?

Why does the Temporal Dead Zone (TDZ) exist?

What are 'Closures'?

Stay in the loop

Comments (0)

What Is the Document Object Model in Web Applications?

Next.js: What Is Hydration?

Next.js: What Are React Hooks and How Do They Work?

Understanding Next.js Caching

Next.js: Why You Shouldn't Use a Global /components Folder for Everything

What is 'Lexical Scope' in JavaScript?

var keyword

let keyword

const keyword

var hoisting

let and const hoisting

What exactly is the Temporal Dead Zone (TDZ)?

Why does the Temporal Dead Zone (TDZ) exist?

Stay in the loop

Comments (0)

`var` keyword

`let` keyword

`const` keyword

`var` hoisting

`let` and `const` hoisting