JavaScript Variables, `let`, `const` & Data Types

2.1 What let Does and Why It Exists

let was introduced in 2015 as part of the major JavaScript update known as ES6. It was designed to fix several confusing problems that existed with the older var keyword. let is now the standard way to declare a variable whose value can change.

let score = 0;
score = 50;      // Perfectly fine — let allows updates
score = 100;     // Still fine — updated again

2.2 let Cannot Be Redeclared in the Same Scope

This is one of the most important differences from var. Once you have declared a variable with let, you cannot declare it again with let in the same area of code:

let userName = "Alice";
let userName = "Bob";   // ❌ Error! Cannot redeclare 'userName'

This is actually a feature, not a bug. It prevents you from accidentally creating a second variable with the same name · a common and hard-to-find mistake in large programs.

With var, this error would not show up:

var userName = "Alice";
var userName = "Bob";   // No error — but "Alice" is now silently lost!

let protects you from this.

You can reassign (change the value) · you just cannot redeclare:

let userName = "Alice";
userName = "Bob";    // ✅ Fine — just changing the value, not redeclaring

2.3 Block Scope · The Most Important Difference Between let and var

This is one of the most important concepts in modern JavaScript.

Before understanding this, you need to know what a block is. A block is any code wrapped inside curly braces { }. Examples: the body of an if statement, the body of a for loop, the body of a function.

let has BLOCK SCOPE · a variable declared with let inside a block exists only inside that block. The moment the block ends, the variable disappears.

{
  let blockVar = "I exist only inside these braces";
  console.log(blockVar);   // Output: I exist only inside these braces
}
console.log(blockVar);     // ❌ Error! blockVar is not defined here

var has FUNCTION SCOPE (or global scope) · a variable declared with var inside a block is still accessible outside that block, as long as you are in the same function:

{
  var functionVar = "I leak outside the braces";
}
console.log(functionVar);  // Output: I leak outside the braces (no error!)

Why does block scope matter? A real-world example with loops:

// Using let in a for loop:
for (let i = 0; i < 3; i++) {
  console.log(i);    // i is available here: 0, 1, 2
}
console.log(i);      // ❌ Error! i doesn't exist outside the loop

// Using var in a for loop:
for (var i = 0; i < 3; i++) {
  console.log(i);    // 0, 1, 2
}
console.log(i);      // Output: 3 — the loop variable leaked out!

With let, your loop variable stays safely contained within the loop. With var, it leaks into the surrounding scope and can accidentally interfere with other parts of your code.

2.4 let Variables Must Be Declared Before Use (No Hoisting Surprise)

With var, there is a strange behaviour called hoisting · the browser automatically moves var declarations to the top of their scope, which means you can technically use a var variable before the line where you declared it (it will just be undefined).

let does not behave this way. If you try to use a let variable before declaring it, you get a clear error:

console.log(myVar);   // Output: undefined (confusing but no error with var)
var myVar = 5;

console.log(myLet);   // ❌ ReferenceError: Cannot access 'myLet' before initialization
let myLet = 5;

The let behaviour is better because it forces you to write code that reads clearly from top to bottom · the way code should be read and understood.

💡 Always declare your variables before you use them. This is good practice regardless of whether you use let or const.

2.5 When to Use let

Use let when the value of the variable needs to change after its first assignment. Common examples:

• A score that increases as the player earns points
• A counter that increments inside a loop
• A running total that accumulates as items are added
• A status that changes based on user input

let score = 0;       // starts at zero
score = score + 10;  // player earned 10 points
score = score + 5;   // earned 5 more

let count = 0;
count++;             // shorthand for count = count + 1

3.1 What const Means

const stands for constant · a value that is set once and stays the same forever.

When you declare with const, two things happen:

1. The variable is created and assigned a value
2. JavaScript locks that assignment · it can never be changed or redeclared

const PI = 3.14159;
const COUNTRY = "Nigeria";
const TAX_RATE = 0.075;

These values will never change · PI is always PI, and the tax rate doesn't change mid-calculation.

3.2 const Must Be Assigned When Declared

Unlike let, you cannot declare a const variable and assign it later. It must receive a value at the moment of creation:

const PI;           // ❌ Error! Missing initializer in const declaration
PI = 3.14159;       // This line is never reached

const PI = 3.14159; // ✅ Correct — declared and assigned together

This makes sense · if the value can never change, it must be set immediately.

3.3 const Cannot Be Reassigned

Any attempt to change a const value after it is set causes an error:

const siteName = "LearnJS";
siteName = "TechAcademy";   // ❌ TypeError: Assignment to constant variable

Expected result: An error is thrown. The assignment fails.

3.4 const Cannot Be Redeclared

Just like let, you cannot declare a const variable twice in the same scope:

const country = "Nigeria";
const country = "Ghana";   // ❌ Error: 'country' has already been declared

3.5 const Has Block Scope

const behaves exactly like let in terms of scope · it is contained within the block where it is declared:

{
  const greeting = "Hello";
  console.log(greeting);   // Output: Hello
}
console.log(greeting);     // ❌ Error! greeting is not defined outside the block

3.6 The Most Important Nuance · const with Arrays and Objects

This is one of the most commonly misunderstood concepts for beginners, and it is critical to get right.

const does NOT make the value itself unchangeable. What it makes unchangeable is the reference · the connection between the variable name and what it points to. For simple values like numbers and strings, this means the value cannot change. But for arrays and objects, the contents can still be modified.

With a const array · you CAN modify the contents:

const fruits = ["Apple", "Banana", "Mango"];

fruits.push("Orange");     // ✅ Adding an item — works fine!
fruits[0] = "Pineapple";  // ✅ Changing an item — works fine!

console.log(fruits);
// Output: ["Pineapple", "Banana", "Mango", "Orange"]

What you CANNOT do is replace the entire array:

const fruits = ["Apple", "Banana", "Mango"];
fruits = ["Kiwi", "Grape"];    // ❌ Error! Cannot reassign a const

Think of const as nailing the label to a bucket. The label cannot be moved to a different bucket. But you can still add or remove things from inside the bucket.

With a const object · same rules apply:

const car = { make: "Toyota", model: "Corolla" };

car.model = "Camry";       // ✅ Changing a property — works fine!
car.year = 2024;           // ✅ Adding a new property — works fine!

car = { make: "Honda" };   // ❌ Error! Cannot reassign the entire object

3.7 When to Use const vs let · The Decision Rule

Here is the simple professional rule:

1. Default to const · always start with const
2. Change to let only if you later need to reassign the variable's value
3. Never use var if you can use let or const
4. Never use automatic variables · always use a keyword

// Good pattern:
const userName = "Alice";          // Will never change — use const
const taxRate = 0.075;             // Will never change — use const
let currentScore = 0;              // Will change as game progresses — use let
let itemCount = 0;                 // Will change as items are added — use let

3.8 Why var Is No Longer Recommended

Now that you understand let and const, here is why var causes problems:

The var keyword still exists in JavaScript for backward compatibility, but in new code, it should never be used. You will see it in old tutorials and legacy code · recognise it, but don't copy it.

4.1 Why Data Types Exist

In the real world, different kinds of information behave differently:

• You can add numbers together: 5 + 3 = 8
• You can join text together: "Hello" + " World" = "Hello World"
• You cannot meaningfully add text to a number: "Five" + 3 = ???

JavaScript needs to know what kind of data it is working with so it knows what operations make sense. That is what data types are for.

JavaScript has 8 data types in total. For now, you will learn the 7 most important ones in depth. The eighth (Symbol) is advanced and used in specialised scenarios.

4.2 JavaScript Is Dynamically Typed

In some languages (like Java or C), you must declare what type of data a variable will hold, and it cannot change:

int score = 100;      // Java — this variable can ONLY ever hold integers

JavaScript works differently. The same variable can hold any type of data, and the type can even change:

let x = 10;         // x holds a number
x = "Hello";        // x now holds a string — JavaScript allows this
x = true;           // x now holds a boolean — still allowed

This is called dynamic typing. It makes JavaScript flexible, but it also means you need to be careful about what type of data you expect a variable to hold.

4.3 Data Type 1 · String

A string is any piece of text. It is written inside single quotes, double quotes, or backticks (template literals, which you will learn later).

let name = "Alice";               // double quotes
let city = 'Lagos';               // single quotes
let message = `Hello, World!`;    // backticks (template literal)

All three produce a string. The choice of quote style is yours · just be consistent and match the opening and closing type.

Important: If you put a number inside quotes, it becomes a string · not a number:

let price = "100";   // This is the STRING "100", not the NUMBER 100

You cannot do maths with it · it will concatenate instead.

4.4 Data Type 2 · Number

JavaScript has only one number type for all numeric values · whether whole numbers or decimals. Unlike most programming languages that distinguish between integers and floating-point numbers, JavaScript uses a single flexible number type:

let age = 28;           // whole number (integer)
let price = 19.99;      // decimal number (float)
let temperature = -5;   // negative number
let big = 1e6;          // scientific notation: 1,000,000

Special number values:

let infinity = Infinity;       // represents mathematical infinity
let negInfinity = -Infinity;
let notANumber = NaN;          // "Not a Number" — result of invalid maths

NaN appears when you try to do maths with something that isn't a valid number:

let result = 100 / "apple";    // Can't divide by text
console.log(result);           // Output: NaN

4.5 Data Type 3 · BigInt

A standard JavaScript number can safely represent integers up to about 9 quadrillion (9,007,199,254,740,991). Beyond that, precision is lost.

BigInt was introduced to handle numbers larger than this limit. You create a BigInt by adding the letter n to the end of a number:

let hugeNumber = 9007199254740991n;    // BigInt
let result = hugeNumber + 1n;          // Must use n on both sides
console.log(result);                   // Output: 9007199254740992n

Real-world use: BigInt is used in cryptography, financial systems handling very large transaction IDs, and scientific computing. For everyday JavaScript programming, regular numbers are sufficient.

4.6 Data Type 4 · Boolean

A boolean is the simplest data type · it can only ever be one of two values: true or false.

Think of it like a light switch: it is either ON or OFF. There is no in-between.

let isLoggedIn = true;
let hasPermission = false;
let isOver18 = true;

Booleans are used constantly in programming to make decisions:

• Is the user logged in? (true / false)
• Has the form been filled correctly? (true / false)
• Is the item in stock? (true / false)

let temperature = 35;
let isHot = temperature > 30;    // Evaluates to: true
console.log(isHot);              // Output: true

⚠️ Beginner Mistake: true and false are written in lowercase with no quotes. "true" (with quotes) is a string · a completely different thing!

4.7 Data Type 5 · Undefined

undefined is the value a variable holds when it has been declared but not yet assigned a value. JavaScript automatically gives this value to empty variables.

let score;
console.log(score);      // Output: undefined
console.log(typeof score); // Output: "undefined"

After assigning:

score = 100;
console.log(score);      // Output: 100

Real-world analogy: Think of a form field that exists on the page (the variable is declared) but the user hasn't filled it in yet (no value assigned). It is a valid field · it just doesn't have a value yet.

4.8 Data Type 6 · Null

null means "intentionally empty" · the variable exists, but you have deliberately set it to have no value. It is not undefined (which means "not yet assigned"); it means "I am choosing to leave this empty."

let selectedUser = null;      // No user selected yet — by choice

Later, when a user is selected:

selectedUser = { name: "Alice", id: 42 };

The difference between null and undefined:

• undefined: the variable exists but was never given a value
• null: the developer explicitly chose to make the variable empty

let a;           // undefined — not yet assigned
let b = null;    // null — deliberately set to empty

💡 typeof null returns "object" · this is a well-known quirk in JavaScript that has existed since the language was first created. It is considered a bug in the language, but it cannot be fixed now without breaking millions of existing websites.

4.9 Data Type 7 · Object

An object is a complex data type that groups related information together. Where a simple variable holds one value, an object can hold many values · each one given a name (called a property).

Think of an object like a profile card: it describes one thing from multiple angles.

const student = {
  name: "James",
  age: 20,
  course: "Computer Science",
  isEnrolled: true
};

console.log(student.name);    // Output: James
console.log(student.age);     // Output: 20

The object data type in JavaScript also includes arrays and dates:

// Array — a list of values
const colours = ["red", "green", "blue"];

// Date — a date/time object
const today = new Date();

You will study objects, arrays, and dates in dedicated lessons later. For now, understand that the object type is JavaScript's way of storing structured, multi-property data.

4.10 The typeof Operator · Checking a Variable's Data Type

typeof is a built-in operator that tells you what data type a value or variable currently holds. It returns a string describing the type.

typeof "Alice"       // Returns: "string"
typeof 42            // Returns: "number"
typeof 3.14          // Returns: "number"
typeof true          // Returns: "boolean"
typeof undefined     // Returns: "undefined"
typeof null          // Returns: "object"  ← famous quirk!
typeof { name: "Alice" }  // Returns: "object"
typeof [1, 2, 3]    // Returns: "object"  ← arrays are objects in JS
typeof function(){}  // Returns: "function"

Practical use · checking a variable's type before using it:

let userInput = "25";    // came from a form — might be a string

console.log(typeof userInput);    // Output: "string"

// If we need a number for calculations, we need to convert it

4.11 Summary Table · All 8 Data Types

# PHASE 2 · APPLIED EXERCISES