JavaScript Fundamentals: Variables, Data Types, Operators, and Control Flow

JavaScript Fundamentals: Variables, Data Types, Operators, and Control Flow

JavaScript is the programming language that makes web pages interactive. Before you manipulate the browser or build applications, you need a firm grip on how JavaScript stores data, performs calculations, and makes decisions. This lesson covers those foundations.

Declaring Variables: let and const

Modern JavaScript uses two keywords to declare variables: `let` and `const`.

• `let` declares a variable whose value can be reassigned later. Use it when the value will change — for example, a running total or a loop counter.
• `const` declares a variable that is bound to its initial value and cannot be reassigned. Use it for values that should stay fixed — for example, a tax rate or a configuration setting.

Avoid the older `var` keyword in new code. It has confusing scoping rules (function scope instead of block scope) that cause hard-to-find bugs.

```js

let score = 0; // can be reassigned

const TAX_RATE = 0.08; // must not change

score = 10; // OK

// TAX_RATE = 0.09; // TypeError — cannot reassign a const

```

Always declare variables before you use them. Reading an undeclared name throws a `ReferenceError`.

The Six Primitive Data Types

JavaScript has six primitive (non-object) data types:

| Type | Example | Notes |

|---|---|---|

| `number` | `42`, `3.14`, `NaN` | All numbers share one type; `NaN` means "Not a Number" |

| `string` | `"hello"`, `'world'`, `` `template` `` | Immutable sequence of characters |

| `boolean` | `true`, `false` | Logic values only |

| `undefined` | `undefined` | Variable declared but not yet assigned |

| `null` | `null` | Intentional absence of a value (assigned by the programmer) |

| `bigint` | `9007199254740993n` | Integers beyond the safe integer limit |

Use the `typeof` operator to check a value's type at runtime: `typeof 42` returns `"number"`. Note a well-known quirk: `typeof null` returns `"object"` — this is a historical bug in the language, not accurate type information.

Arithmetic and Comparison Operators

Arithmetic operators perform math: `+`, `-`, ``, `/`, `%` (remainder), and `*` (exponentiation). Operator precedence follows standard math rules — multiplication and division before addition and subtraction — and parentheses override that order.

Comparison operators produce a boolean result:

• `===` (strict equality) — compares value and type. Prefer this in all new code.
• `!==` (strict inequality)
• `==` (loose equality) — compares value after type coercion. Avoid it; coercion produces surprising results. For example, `0 == false` is `true`, and `"" == false` is also `true`.
• `<`, `>`, `<=`, `>=` — relational comparisons

Type coercion happens when JavaScript automatically converts one type to another to complete an operation. The `+` operator is especially tricky: if either operand is a string, it performs string concatenation instead of addition. For example, `"5" + 3` produces `"53"`, not `8`.

Logical operators combine boolean expressions: `&&` (AND), `||` (OR), `!` (NOT).

Control Flow: if/else

An `if` statement runs a block of code only when its condition is `true`. An optional `else if` chain tests additional conditions. A final `else` handles everything that did not match.

```js

const grade = 78;

if (grade >= 90) {

console.log("A");

} else if (grade >= 80) {

console.log("B");

} else if (grade >= 70) {

console.log("C");

} else {

console.log("Below C");

}

// Output: C

```

Always use curly braces `{}` around the block, even for single-line bodies. Omitting them is legal but causes errors when lines are added later.

Control Flow: switch

A `switch` statement compares one expression against multiple specific values (cases). It is cleaner than a long `if/else if` chain when you are checking one variable for many exact values.

```js

const day = "Monday";

switch (day) {

case "Saturday":

case "Sunday":

console.log("Weekend");

break;

default:

console.log("Weekday");

}

// Output: Weekday

```

Each `case` must end with `break` unless you intentionally want execution to fall through to the next case. A missing `break` is a common logical error. The `default` block runs when no case matches.

Reading Errors in the Console

The Chrome DevTools console reports errors with a type and a line number. Common types you will see in this lesson:

• ReferenceError — you used a name that has not been declared.
• TypeError — you used a value in a way its type does not allow (e.g., reassigning a `const`, or calling a non-function).
• SyntaxError — the code cannot be parsed (missing bracket, typo in keyword).
• Logic error — the code runs without crashing but produces the wrong output. The console will not flag this; you must read the output and compare it to what was expected.

When you see an error, read the message, note the line number, and check the line and the lines just before it.

Safe Practices in the Development Environment

JavaScript running in the browser is sandboxed, but good habits still matter:

• Never paste code from unknown sources into the DevTools console of a site where you are logged in. Malicious scripts can steal session data (a technique called self-XSS).
• Keep VS Code and Node.js updated to receive security patches.
• Save your work frequently and use version control (Git) even for practice files — accidental overwrites are the most common cause of lost work in this trade.