The programming language of the web: variables, functions, the DOM, arrays and objects, and fetching data from APIs.

JavaScript Essentials

## Why this matters

Every program remembers things: a score, a username, whether a menu is open, the items in a cart. In JavaScript you remember a value by giving it a name with a **variable**. Before you can write anything interactive you need to know how to create variables, when they can change, and what kind of value each one holds. Most beginner bugs in JavaScript come from a value being a different type than you thought, so this lesson is worth getting right.

## Declaring variables: let and const

Modern JavaScript has two everyday keywords for variables:

```javascript
const siteName = "Coding Help"; // cannot be reassigned
let score = 0;                   // can be reassigned

score = score + 10;  // fine: score is now 10
siteName = "Other";  // TypeError: Assignment to constant variable.
```

- Use **`const`** by default. It tells the reader (and you, next week) that this name will always point to the same value.
- Use **`let`** when the value genuinely needs to change, such as a counter or a running total.

You will also see **`var`** in older code and tutorials. It still works, but it has confusing rules: it ignores block boundaries (`{ }`) and can be used before the line that declares it. New code should use `let` and `const`.

A `const` stops you from **reassigning** the name, not from changing what is inside an object or array. `const cart = []; cart.push("pen");` is allowed, because `cart` still points to the same array.

### Naming rules

Names can contain letters, digits, `_` and `$`, but cannot start with a digit. JavaScript is case-sensitive, so `score` and `Score` are different variables. The convention is **camelCase**: `lessonCount`, `isLoggedIn`, `firstName`. Pick names that say what the value means, not what type it is: `price` beats `num1`.

## The types of values

Every value in JavaScript has a type. The ones you will use every day:

| type | examples | notes |
|---|---|---|
| number | `42`, `3.14`, `-7` | one type for whole numbers and decimals |
| string | `"hello"`, `'hi'`, `` `Hi ${name}` `` | text; backticks allow `${}` placeholders |
| boolean | `true`, `false` | yes/no answers |
| undefined | `undefined` | a variable that has no value yet |
| null | `null` | "deliberately empty" |
| object | `{ name: "Ada" }`, `[1, 2, 3]` | collections of values (arrays are objects) |

You can ask JavaScript for a value's type with the **`typeof`** operator:

```javascript
typeof 42          // "number"
typeof "42"        // "string"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof { a: 1 }    // "object"
typeof [1, 2]      // "object"  (arrays are objects)
typeof null        // "object"  (a famous old bug, kept for compatibility)
```

The last two surprise everyone. To tell an array apart, use `Array.isArray(value)`. To test for null, compare directly: `value === null`.

## Template strings

Backtick strings let you drop values straight into text:

```javascript
const name = "Ada";
const lessons = 13;
console.log(`${name} has ${lessons} lessons left.`);
// Ada has 13 lessons left.
```

This is much easier to read than `name + " has " + lessons + " lessons left."`.

## Type coercion: when JavaScript guesses

JavaScript will quietly convert types when you mix them, and the results are not always what you expect:

```javascript
"5" + 3     // "53"  (the + joins strings)
"5" - 3     // 2     (- only works on numbers, so "5" becomes 5)
"5" == 5    // true  (loose equality converts first)
"5" === 5   // false (strict equality compares type too)
```

Two habits avoid most of this:

1. **Always use `===` and `!==`** for comparisons.
2. **Convert on purpose.** Text from a form field is always a string, so turn it into a number before doing maths: `Number("5")` gives `5`, and `Number("abc")` gives `NaN` ("not a number"). Check with `Number.isNaN(value)`.

## A worked example

Suppose a game stores a player's progress:

```javascript
const playerName = "Sam";
let level = 1;
let lives = 3;
const hasShield = false;

level = level + 1;   // levelled up
lives = lives - 1;   // lost a life

console.log(`${playerName}: level ${level}, ${lives} lives`);
console.log(typeof level, typeof playerName, typeof hasShield);
// Sam: level 2, 2 lives
// number string boolean
```

`playerName` and `hasShield` never change, so they are `const`. `level` and `lives` change, so they are `let`.

## Common mistakes

- **Reassigning a `const`.** If you need to change it, it should be `let`.
- **Using a variable before declaring it.** With `let` and `const` this throws a `ReferenceError`. Declare first, use after.
- **Doing maths on strings.** `"10" + "5"` is `"105"`. Convert input with `Number()` first.
- **Trusting `typeof` for null and arrays.** Use `=== null` and `Array.isArray()`.
- **Using `==`.** Prefer `===` so no conversion happens behind your back.

## Quick recap

- `const` for values that do not get reassigned, `let` for ones that do; avoid `var`.
- The everyday types are number, string, boolean, undefined, null and object (arrays are objects).
- `typeof` tells you a type, with two quirks: null and arrays both say `"object"`.
- Use `===`, and convert strings to numbers on purpose.

## Try it

Open the **Do** tab. You will declare a constant and a counter, then write a small `typeLabel` function that fixes the two `typeof` quirks.


Store values with let and const, and learn the handful of types every JavaScript value belongs to.

Variables and types

Differences Between Var, Let, and Const

JavaScript var, let, and const explained

## Why this matters

A **function** is a named, reusable piece of code. Instead of writing the same calculation in five places, you write it once and call it five times. When it needs fixing, you fix one place. Functions are also how you break a big problem into small pieces you can understand and test one at a time. Every JavaScript program you will ever read, from a to-do list to a React app, is built out of functions.

## Declaring and calling a function

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

const message = greet("Ada");  // call it with an argument
console.log(message);          // Hello, Ada!
```

- `name` is a **parameter**: a placeholder in the definition.
- `"Ada"` is an **argument**: the actual value passed in when you call it.
- **`return`** sends a value back to the caller and stops the function immediately.

A function without a `return` gives back `undefined`. That is a common source of confusion: `console.log` *shows* a value, but it does not *return* it.

```javascript
function addLog(a, b) {
  console.log(a + b);   // prints 5...
}
const result = addLog(2, 3);
console.log(result);    // ...but result is undefined
```

If another piece of code needs the answer, `return` it.

## Multiple parameters and defaults

Functions can take several parameters. You can give a parameter a **default value** that is used when the caller leaves it out:

```javascript
function applyDiscount(price, percent = 10) {
  return price - price * (percent / 100);
}

applyDiscount(50, 20);  // 40
applyDiscount(80);      // 72  (percent defaults to 10)
```

Extra arguments are ignored and missing ones are `undefined` (unless they have a default), so JavaScript will not complain if you call a function wrongly. Your checks and tests have to catch that.

## Functions are values

In JavaScript a function is a value, like a number or a string. You can store it in a variable, pass it to another function, or return it from a function. That idea powers array methods, event listeners and promises later in this course.

```javascript
function shout(text) {
  return text.toUpperCase() + "!";
}
function applyTwice(fn, value) {
  return fn(fn(value));
}
applyTwice(shout, "hi");  // "HI!!"
```

## Arrow functions

**Arrow functions** are a shorter way to write a function, popular for small helpers:

```javascript
const square = (n) => n * n;          // one expression: return is implied
const add = (a, b) => a + b;
const logAll = (items) => {            // braces: you must write return yourself
  for (const item of items) console.log(item);
};
```

With a single expression and no braces, the result is returned automatically. With braces, you need an explicit `return`. Forgetting this is the number one arrow-function bug:

```javascript
const broken = (n) => { n * n };  // returns undefined!
```

Arrow functions also handle the `this` keyword differently, which matters later for objects and classes. For now, use `function` declarations for named, top-level functions and arrows for short callbacks.

## Scope: where variables are visible

Variables declared with `let` or `const` inside a function (or inside any `{ }` block) only exist there. This is called **scope**.

```javascript
const taxRate = 0.2;            // global: visible everywhere

function priceWithTax(price) {
  const tax = price * taxRate;  // local: only inside this function
  return price + tax;
}

priceWithTax(100);  // 120
console.log(tax);   // ReferenceError: tax is not defined
```

Inner code can read outer variables (`taxRate` above), but outer code cannot see inner ones. Keeping variables local means two functions can both use a variable called `total` without interfering with each other.

## A worked example: formatting prices

Small functions combine well:

```javascript
function formatPrice(amount) {
  return "$" + amount.toFixed(2);
}

function receiptLine(item, price, percentOff = 0) {
  const finalPrice = applyDiscount(price, percentOff);
  return `${item}: ${formatPrice(finalPrice)}`;
}

receiptLine("Notebook", 25, 10);  // "Notebook: $22.50"
receiptLine("Pen", 2);            // "Pen: $2.00"
```

Each function does one job and has a clear name. `toFixed(2)` turns a number into a string with exactly two decimal places.

## Common mistakes

- **Printing instead of returning.** If the caller needs the value, `return` it.
- **Arrow function with braces but no `return`.** Add `return`, or remove the braces.
- **Calling before you mean to.** `button.addEventListener("click", handle())` calls `handle` immediately. Pass `handle` without parentheses.
- **Relying on outer variables that change.** Pass values in as parameters so the function is predictable.
- **Code after `return`.** It never runs.

## Quick recap

- Declare with `function name(params) { ... }`, call with `name(args)`.
- `return` sends a value back; without it you get `undefined`.
- Default parameters fill in missing arguments.
- Arrow functions are short; one expression returns automatically.
- `let`/`const` inside a function are local to it.

## Try it

Open the **Do** tab and write three small functions: a discount calculator with a default, a price formatter and an arrow function.


Write reusable functions with parameters, default values and return values, and understand where variables are visible.

Functions in depth

How To Create/Use Functions - JavaScript Essentials

JavaScript ES6 Arrow Functions Tutorial

## Why this matters

Knowing what variables and functions are is one thing. Putting them together into a working program is another, and it is the skill employers actually test. This lesson is a small project: a "quote of the day" picker. It is tiny, but it has the same shape as real features: some **data**, a few **functions** that each do one job, and **output** that combines them.

## The data: an array of quotes

An **array** is an ordered list of values, written with square brackets:

```javascript
const quotes = [
  "Simplicity is prerequisite for reliability. (Edsger Dijkstra)",
  "Make it work, make it right, make it fast. (Kent Beck)",
  "Programs must be written for people to read. (Harold Abelson)"
];

quotes.length;  // 3
quotes[0];      // the first quote (arrays count from 0)
quotes[2];      // the last quote
quotes[3];      // undefined: there is no fourth item
```

Two facts cause most array bugs. Indexes **start at 0**, and the last index is **`length - 1`**. You will see both in the next step.

## Step 1: a random index

`Math.random()` returns a decimal from 0 (included) up to 1 (never quite reached), such as `0.4172`. To turn that into an index:

```javascript
const r = Math.random();                       // e.g. 0.83
const index = Math.floor(r * quotes.length);   // 0.83 * 3 = 2.49 -> 2
```

`Math.floor` rounds down. Because `r` is always below 1, `r * 3` is always below 3, so the index is always 0, 1 or 2: exactly the valid positions. Using `Math.round` instead would sometimes produce 3, which is out of range, and the first and last items would come up less often.

## Step 2: make it testable

Random code is hard to test because the answer changes every run. A good trick is to pass the random number in as a parameter. Then the function is **predictable** when you give it a known number and random when you give it `Math.random()`:

```javascript
function pickQuote(list, randomNumber) {
  if (list.length === 0) return null;     // edge case: nothing to pick
  return list[Math.floor(randomNumber * list.length)];
}

pickQuote(quotes, 0);            // always the first quote
pickQuote(quotes, 0.99);         // always the last quote
pickQuote(quotes, Math.random()); // a random one
```

Notice the **edge case**: an empty list. Without the guard, `list[0]` would be `undefined`, and the code that formats the quote later might crash. Returning `null` on purpose makes "no quote" an explicit answer.

## Step 3: the same quote all day

A "quote of the day" should not change every time you refresh. Instead of a random number, use a number that is the same all day, such as the day of the year, and the **remainder operator** `%`:

```javascript
function quoteOfTheDay(list, dayNumber) {
  return list[dayNumber % list.length];
}

quoteOfTheDay(quotes, 0);  // quotes[0]
quoteOfTheDay(quotes, 4);  // 4 % 3 = 1 -> quotes[1]
quoteOfTheDay(quotes, 5);  // 5 % 3 = 2 -> quotes[2]
```

`%` gives what is left over after division, so it wraps around: day 3 is back to the first quote. This "wrap around with `%`" pattern appears everywhere: carousels, rotating shifts, game turns.

To get a day number from the real date you could use `Math.floor(Date.now() / 86400000)`, the number of whole days since 1 January 1970 (86,400,000 is the number of milliseconds in a day).

## Step 4: format the output

Keep formatting separate from choosing. That way you can change how a quote looks without touching the selection logic:

```javascript
function formatQuote(quote) {
  return `Today: "${quote}"`;
}

const today = Math.floor(Date.now() / 86400000);
console.log(formatQuote(quoteOfTheDay(quotes, today)));
```

Each function is small enough to check in your head, and the last line reads almost like a sentence. That is the goal.

## Common mistakes

- **Off-by-one indexes.** The last item is `list[list.length - 1]`, not `list[list.length]`.
- **`Math.round` instead of `Math.floor`.** It can produce an index equal to `length`.
- **Forgetting the empty list.** Decide what should happen and handle it first.
- **Mixing jobs in one function.** Picking, formatting and printing are three jobs; keep them apart so each is easy to test.
- **Hard-coding the length.** Write `list.length`, not `3`, so adding a quote does not break anything.

## Quick recap

- Arrays are zero-indexed lists; `length - 1` is the last index.
- `Math.floor(Math.random() * list.length)` gives a valid random index.
- Passing the random number in makes a function testable.
- `%` wraps a growing number around a list.
- Small functions, one job each, combined at the end.

## Try it

Open the **Do** tab and build the quote program: add your own quotes, then write `pickQuote`, `quoteOfTheDay` and `formatQuote`.


Combine an array and a few small functions into a mini program that picks and formats a quote.

Quote of the Day

Math Methods and How to Generate a Random Number with JavaScript | JavaScript Tutorial for Beginners

## Why this matters

So far your code has run top to bottom, once. Real programs make **decisions** (is this password long enough? is the player out of lives?) and **repeat** work (add up every item in a cart, check every field in a form). Conditionals and loops are how you do both. They are called **control flow**, because they control which lines run and how many times.

## if, else if, else

```javascript
function grade(score) {
  if (score >= 90) {
    return "A";
  } else if (score >= 80) {
    return "B";
  } else if (score >= 70) {
    return "C";
  } else {
    return "F";
  }
}

grade(95);  // "A"
grade(85);  // "B"
grade(42);  // "F"
```

JavaScript checks each condition **in order** and runs the first block whose condition is true, then skips the rest. That is why order matters: if you checked `score >= 70` first, a 95 would get a "C".

### Comparison and logic operators

| operator | meaning | example |
|---|---|---|
| `===` / `!==` | equal / not equal (strict) | `role === "admin"` |
| `<` `<=` `>` `>=` | less / greater than | `age >= 18` |
| `&&` | and: both must be true | `age >= 13 && age <= 19` |
| `\|\|` | or: at least one is true | `day === "Sat" \|\| day === "Sun"` |
| `!` | not | `!isLoggedIn` |

### Truthy and falsy

An `if` does not need a real boolean. JavaScript treats these values as **falsy**: `false`, `0`, `""` (empty string), `null`, `undefined` and `NaN`. Everything else is **truthy**, including `"0"`, `[]` and `{}`.

```javascript
const name = "";
if (!name) {
  console.log("Please enter your name");
}
```

This is handy, but be careful: `if (count)` is false when `count` is `0`, which may be a perfectly valid value.

## for loops

A `for` loop repeats a block a counted number of times. It has three parts: start, condition, step.

```javascript
function sumTo(n) {
  let total = 0;
  for (let i = 1; i <= n; i++) {
    total += i;       // same as total = total + i
  }
  return total;
}

sumTo(4);  // 1 + 2 + 3 + 4 = 10
```

To visit each item in an array, **`for...of`** is clearer, because you do not need to manage an index:

```javascript
const prices = [4, 10, 6];
let total = 0;
for (const price of prices) {
  total += price;
}
// total is 20
```

## while loops

A `while` loop repeats **as long as** its condition is true. Use it when you do not know in advance how many times you will loop.

```javascript
function countdown(n) {
  const steps = [];
  while (n > 0) {
    steps.push(n);
    n--;            // move towards the end, or the loop never stops
  }
  return steps;
}

countdown(3);  // [3, 2, 1]
```

The danger with `while` is an **infinite loop**: if nothing inside ever makes the condition false, the program hangs. Always check that something changes on every pass.

### break and continue

- `break` leaves the loop immediately.
- `continue` skips to the next pass.

```javascript
for (const n of [3, 8, -1, 5]) {
  if (n < 0) break;        // stop at the first negative number
  if (n % 2 === 0) continue; // skip even numbers
  console.log(n);          // prints 3
}
```

## A worked example: combining both

Count how many scores in a list are passing (70 or more):

```javascript
function countPassing(scores) {
  let passing = 0;
  for (const s of scores) {
    if (s >= 70) {
      passing++;
    }
  }
  return passing;
}

countPassing([95, 60, 70, 88, 42]);  // 3
```

A loop with an `if` inside, plus a counter or total outside, is one of the most common shapes in all of programming. You will meet it again as `filter` and `reduce` in module 3.

## Common mistakes

- **Wrong order of conditions.** Check the most specific or highest range first.
- **Using `=` in a condition.** `if (x = 5)` assigns 5 and is always true. Use `===`.
- **Off-by-one loops.** `i < n` runs n times from 0; `i <= n` runs n + 1 times. Decide which you need.
- **Infinite `while` loops.** Make sure the loop variable changes.
- **Forgetting that `0` and `""` are falsy.** Compare explicitly when those are valid values.

## Quick recap

- `if / else if / else` runs the first true branch, in order.
- Combine conditions with `&&`, `||` and `!`; know your falsy values.
- `for` for counted loops, `for...of` for arrays, `while` for "until something happens".
- A loop plus an `if` plus a counter solves a huge number of problems.

## Try it

Open the **Do** tab: write `grade`, `sumTo` and `countdown`.
