REFERENCEjavascript

javascript Documentation

📖 INDEX

# what-is-javascript

# function-declaration

# function-expressions

# anonymous-functions

# arrow-functions

# return

# recursive-functions

# arguments-parameters

# array-destructuring

# what-is-dom

# element-selection

# selection-methods

# elements-manipulation

# events

# event-listeners

# modification-methods

LOADING ENGINE...

Variables

AI & DATA SCIENCE // variables

Variables store data values. Declared with var, let, or const. let and const are block-scoped; var is function-scoped.

Syntax

let x = 10;     // block-scoped, reassignable
const PI = 3.14; // block-scoped, not reassignable
var y = 5;       // function-scoped (avoid)

Deep Dive Course

Variables declared with **let** are block-scoped and can be reassigned. **const** creates a block-scoped binding that cannot be reassigned (but objects/arrays can be mutated). **var** is function-scoped and hoisted — avoid it in modern code.

1Understanding Variables

Variables declared with let are block-scoped and can be reassigned. const creates a block-scoped binding that cannot be reassigned (but objects/arrays can be mutated). var is function-scoped and hoisted — avoid it in modern code.

💡

Prefer const by default; use let when reassignment is needed; avoid var entirely.

editor.html

// let vs const
let count = 0;
count = 1; // OK

const MAX = 100;
// MAX = 200; // TypeError!

const user = { name: 'Alice' };
user.name = 'Bob'; // OK - mutating the object

localhost:3000

2Practical Example

Here is a real-world application of Variables showing how it is used in production JavaScript code.

editor.html

// Block scope
{
  let blockVar = 'inside';
  console.log(blockVar); // 'inside'
}
// console.log(blockVar); // ReferenceError

var funcVar = 'I leak outside blocks';
if (true) { var funcVar = 'changed!'; }
console.log(funcVar); // 'changed!'

localhost:3000

3Best Practices

Follow these guidelines when working with Variables:

1. Use const for values that don't change

2. Use let for loop counters and reassigned values

3. Avoid var to prevent hoisting surprises

⚠️

Tip: Prefer const by default; use let when reassignment is needed; avoid var entirely.

editor.html

// let vs const
let count = 0;
count = 1; // OK

const MAX = 100;
// MAX = 200; // TypeError!

const user = { name: 'Alice' };
user.name = 'Bob'; // OK - mutating the object

localhost:3000

Examples

Example 01Basic Usage

// let vs const
let count = 0;
count = 1; // OK

const MAX = 100;
// MAX = 200; // TypeError!

const user = { name: 'Alice' };
user.name = 'Bob'; // OK - mutating the object

Example 02Advanced Example

// Block scope
{
  let blockVar = 'inside';
  console.log(blockVar); // 'inside'
}
// console.log(blockVar); // ReferenceError

var funcVar = 'I leak outside blocks';
if (true) { var funcVar = 'changed!'; }
console.log(funcVar); // 'changed!'

Best Practices

Use const for values that don't change
Use let for loop counters and reassigned values
Avoid var to prevent hoisting surprises

Interview Question

What is the Temporal Dead Zone (TDZ)?▼

Hint: It relates to let and const before their declaration line.

Variables declared with let/const exist in the TDZ from the start of their block until the declaration is evaluated. Accessing them before declaration throws a ReferenceError, unlike var (which returns undefined due to hoisting).

Exercises

MediumPractice using Variables in a real scenario.

View Solution

// let vs const
let count = 0;
count = 1; // OK

const MAX = 100;
// MAX = 200; // TypeError!

const user = { name: 'Alice' };
user.name = 'Bob'; // OK - mutating the object

Frequently Asked Questions

What is the Temporal Dead Zone (TDZ)?▼

Related Functions

ConstantsData-TypesHoistingScope-Context