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

JavaScript Essentials

## Why this matters

Most of the data a web app handles arrives as a list: products, messages, search results, scores. You constantly need to turn one list into another: show only the items in stock, pull out just the names, add up the total. You can do all of that with `for` loops, but JavaScript arrays have built-in methods that say what you mean in one line. You will see `map`, `filter` and `reduce` in every codebase and every framework, especially React.

## Array basics, quickly

```javascript
const fruits = ["apple", "banana"];
fruits.push("cherry");      // add to the end -> ["apple", "banana", "cherry"]
fruits.pop();               // remove from the end, returns "cherry"
fruits.includes("apple");   // true
fruits.indexOf("banana");   // 1
fruits.slice(0, 1);         // ["apple"]  (a copy; the original is unchanged)
```

Some methods **change** the array (`push`, `pop`, `sort`, `splice`); others **return a new one** and leave the original alone (`slice`, `map`, `filter`). Knowing which is which prevents confusing bugs.

## The data for this lesson

```javascript
const products = [
  { name: "Pen",      price: 2,  qty: 10, inStock: true  },
  { name: "Notebook", price: 5,  qty: 0,  inStock: false },
  { name: "Backpack", price: 30, qty: 2,  inStock: true  }
];
```

Each item is an **object** with named properties (more on objects in the next lesson). `products[0].name` is `"Pen"`.

## map: transform every item

`map` calls a function on every item and collects the results into a **new array of the same length**:

```javascript
const names = products.map((p) => p.name);
// ["Pen", "Notebook", "Backpack"]

const labels = products.map((p) => `${p.name}: $${p.price}`);
// ["Pen: $2", "Notebook: $5", "Backpack: $30"]
```

Use `map` when you want "one output for each input".

## filter: keep some items

`filter` calls a function on every item and keeps the ones where it returns `true`:

```javascript
const available = products.filter((p) => p.inStock);
// Pen and Backpack

const cheap = products.filter((p) => p.price < 10);
// Pen and Notebook
```

The result can be shorter than the original, or empty, but never longer.

## reduce: boil a list down to one value

`reduce` walks the list carrying an **accumulator**, a running result, and returns its final value:

```javascript
const totalValue = products.reduce((sum, p) => sum + p.price * p.qty, 0);
// 0 + 2*10 + 5*0 + 30*2 = 80
```

Read it as: "start `sum` at `0`; for each product, the new `sum` is the old `sum` plus price times quantity". Always pass the **starting value** (the `0` at the end). Without it, `reduce` uses the first item as the start, which breaks for lists of objects and throws on an empty list.

## Chaining

Because `map` and `filter` return arrays, you can chain them:

```javascript
const inStockNames = products
  .filter((p) => p.inStock)
  .map((p) => p.name);
// ["Pen", "Backpack"]
```

Each step does one simple thing, and the whole pipeline reads top to bottom.

## Other useful methods

| method | returns | example |
|---|---|---|
| `find` | the first matching item, or `undefined` | `products.find((p) => p.name === "Pen")` |
| `some` | `true` if any item matches | `products.some((p) => !p.inStock)` |
| `every` | `true` if all items match | `products.every((p) => p.price > 0)` |
| `forEach` | nothing; just runs code per item | `products.forEach((p) => console.log(p.name))` |
| `sort` | the same array, sorted in place | `nums.sort((a, b) => a - b)` |

A word on `sort`: without a compare function it sorts as **text**, so `[10, 9, 1].sort()` gives `[1, 10, 9]`. For numbers, always pass `(a, b) => a - b`. And because `sort` changes the original array, copy first if you need to keep it: `[...nums].sort((a, b) => a - b)`.

## Loop or method?

The two are equivalent. This loop:

```javascript
const result = [];
for (const p of products) {
  if (p.inStock) result.push(p.name);
}
```

does the same as `products.filter((p) => p.inStock).map((p) => p.name)`. Methods are usually shorter and harder to get wrong (no index, no forgotten `push`). Loops are still fine when you need `break` or when the logic is complicated.

## Common mistakes

- **Forgetting to `return` in a callback with braces.** `products.map((p) => { p.name })` gives `[undefined, undefined, undefined]`.
- **Using `map` when you mean `forEach`.** If you are not using the new array, you do not need `map`.
- **Leaving out reduce's starting value.**
- **Sorting numbers without a compare function.**
- **Expecting `filter` to return one item.** It always returns an array; use `find` for one item.

## Quick recap

- `map` transforms every item; `filter` keeps some; `reduce` combines into one value.
- They return new arrays (or a value) and leave the original alone; chain them for pipelines.
- `find`, `some`, `every` answer common questions; give `sort` a compare function for numbers.

## Try it

Open the **Do** tab and write four small functions over a product list using `filter`, `map`, `reduce` and `find`.


Transform lists of data with map, filter, reduce and their friends instead of hand-written loops.

Arrays and array methods

Array Iteration: 8 Methods - map, filter, reduce, some, every, find, findIndex, forEach

Map, Filter & Reduce EXPLAINED in JavaScript - It's EASY!

## Why this matters

Real things have several properties at once. A student has a name, an email and a list of scores; a product has a name, price and stock count. In JavaScript you group related values into an **object**. When that data travels between a browser and a server, or gets saved to a file, it is written as **JSON**, a text format based on JavaScript objects. Almost every API you will ever call speaks JSON, so these two ideas go together.

## Objects

An object is a set of **key: value** pairs inside curly braces:

```javascript
const student = {
  name: "Ada",
  email: "ada@example.com",
  scores: [90, 85, 100],
  enrolled: true
};
```

Read or change properties with a dot, or with square brackets when the key is in a variable:

```javascript
student.name;              // "Ada"
student.scores[0];         // 90
student.enrolled = false;  // change a property
student.year = 2;          // add a new one

const field = "email";
student[field];            // "ada@example.com"

student.phone;             // undefined: no such property
```

Values can be anything: numbers, strings, arrays, other objects, even functions.

### Shorthand and computed values

When a variable already has the name you want for a key, you can write it once:

```javascript
function makeStudent(name, scores) {
  const total = scores.reduce((sum, s) => sum + s, 0);
  const average = scores.length ? total / scores.length : 0;
  return { name, scores, average };   // same as { name: name, scores: scores, average: average }
}

makeStudent("Grace", [80, 90]);
// { name: "Grace", scores: [80, 90], average: 85 }
```

### Looping over an object

```javascript
Object.keys(student);     // ["name", "email", "scores", "enrolled", "year"]
Object.values(student);   // the values
Object.entries(student);  // [["name", "Ada"], ["email", ...], ...]

for (const [key, value] of Object.entries(student)) {
  console.log(`${key}: ${value}`);
}
```

### Destructuring and spread

Destructuring pulls properties into variables; spread copies an object:

```javascript
const { name, email } = student;           // two new variables
const updated = { ...student, year: 3 };   // copy with one property changed
```

Spread makes a **shallow** copy: nested arrays and objects are still shared. That matters when you start writing React, where you should create new objects instead of changing existing ones.

## Arrays of objects

Most real data is a list of objects, which is where last lesson's methods shine:

```javascript
const students = [
  makeStudent("Ada", [90, 85, 100]),
  makeStudent("Grace", [80, 90]),
  makeStudent("Alan", [70, 75])
];

const best = students.reduce((top, s) => (s.average > top.average ? s : top));
best.name;  // "Ada"
```

(`reduce` without a starting value is fine here because the list is not empty and we want the first student as the starting "best". Check for an empty list before calling it.)

## JSON

**JSON** (JavaScript Object Notation) is a **text** format that looks almost like an object literal, with stricter rules:

```json
{
  "name": "Ada",
  "scores": [90, 85, 100],
  "enrolled": true,
  "mentor": null
}
```

- Keys must be in **double quotes**.
- Strings use double quotes only.
- Allowed values: strings, numbers, `true`, `false`, `null`, arrays and objects. No functions, no `undefined`, no comments, no trailing commas.

### Converting

```javascript
const text = JSON.stringify(student);
// '{"name":"Ada","email":"ada@example.com",...}'  (a string)

const back = JSON.parse(text);
back.name;  // "Ada"  (a real object again)

JSON.stringify(student, null, 2);  // pretty-printed with 2-space indents
```

- `JSON.stringify(value)` turns an object into a JSON **string** (to send or save).
- `JSON.parse(text)` turns a JSON string into an object (after you receive or load it).

`JSON.parse` **throws** a `SyntaxError` if the text is not valid JSON, for example `JSON.parse("{name: 'Ada'}")`. You will handle that properly with `try`/`catch` in module 4.

A JSON round trip also makes a **deep copy** of plain data, but it drops functions and `undefined` and turns dates into strings, so do not rely on it for everything.

## Common mistakes

- **Treating JSON text as an object.** `text.name` is `undefined` until you `JSON.parse(text)`.
- **Single quotes or unquoted keys in JSON.** Valid in JavaScript, invalid in JSON.
- **Dividing by zero for an empty list.** `0 / 0` is `NaN`; check the length first.
- **Thinking spread makes a deep copy.** Nested arrays are shared.
- **Misspelt property names.** `student.nmae` is just `undefined`, with no error, so check spelling when something is unexpectedly undefined.

## Quick recap

- Objects group related values under named keys; use dot or bracket access.
- `Object.keys/values/entries`, destructuring and spread are everyday tools.
- JSON is text with strict rules; `JSON.stringify` writes it, `JSON.parse` reads it.

## Try it

Open the **Do** tab: build student objects, parse a JSON list and find the top student.


Model real records as objects, and convert them to and from JSON text.

Objects and JSON

Javascript Objects Explained | Javascript Objects Tutorial

Learn JSON in 10 Minutes

## Why this matters

Every developer writes bugs; good developers find them quickly. Debugging is not guessing and changing random lines until something works. It is a method: reproduce the problem, read what the computer is telling you, narrow down where it goes wrong, fix it, and check the fix. Your browser already includes powerful tools for this, called **DevTools**, and learning them early will save you hours every week.

## Step 1: read the error message

When JavaScript hits a problem it cannot continue from, it throws an **error** and prints it in the console (open DevTools with F12, or Ctrl+Shift+I / Cmd+Option+I, then the **Console** tab). The message usually tells you what and where:

```text
Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at showUser (app.js:12:22)
```

- **TypeError** is the kind of error.
- **Cannot read properties of undefined (reading 'name')** means you wrote `something.name` and `something` was `undefined`.
- **app.js:12:22** is the file, line and column. Click it to jump there.

Common error types:

| error | usually means |
|---|---|
| `ReferenceError: x is not defined` | a typo in a name, or using a variable outside its scope |
| `TypeError: x is not a function` | calling something that is not a function, often a typo or wrong import |
| `TypeError: Cannot read properties of null` | `querySelector` found nothing, or data has not loaded |
| `SyntaxError: Unexpected token` | a missing bracket, quote or comma |

## Step 2: bugs without errors

The hardest bugs throw no error at all: the code runs and the answer is simply wrong. For those, make the program **show you its state**. `console.log` is the simplest tool:

```javascript
function average(nums) {
  let total = 0;
  for (let i = 0; i <= nums.length; i++) {
    total += nums[i];
    console.log("i:", i, "value:", nums[i], "total:", total);
  }
  return total / nums.length;
}
average([2, 4, 6]);
```

The log shows `i: 3 value: undefined total: NaN`. The loop runs one time too many, because it uses `<=` instead of `<`. Adding `undefined` to a number gives `NaN`, and that `NaN` spreads to every later result.

Useful console tools:

```javascript
console.log({ total, i });  // label values by wrapping them in an object
console.table(users);       // an array of objects as a table
console.error("bad input"); // shows in red
typeof value;               // check the type when results look odd
```

Remove debugging logs before you commit; they clutter the console for everyone.

## Step 3: breakpoints

Logging means editing, running and reading over and over. A **breakpoint** pauses the code on a line so you can look at everything at once:

1. Open DevTools, go to **Sources** (Chrome/Edge) or **Debugger** (Firefox) and open your file.
2. Click a line number to set a breakpoint, or write `debugger;` in your code.
3. Trigger the code again (reload, or click the button).
4. Execution pauses. Hover over variables or read the **Scope** panel to see their values.
5. Use **Step over** to run one line at a time and watch values change.

Breakpoints are especially useful in event handlers and loops, where printing every value gets noisy.

## Step 4: narrow it down

If you do not know where the bug is, cut the problem in half. Log (or pause) halfway through the process. If the value is already wrong there, the bug is earlier; if it is right, the bug is later. Repeat. This **divide and conquer** approach finds bugs in long code quickly.

Also simplify the input. If a function fails on a list of 500 users, try it with 2. Small inputs make the wrong step obvious.

## Three classic bugs

**String instead of number.** Input values are strings:

```javascript
function addInputs(a, b) {
  return a + b;                  // addInputs("5", "3") -> "53"
}
// fix: return Number(a) + Number(b);
```

**Assignment instead of comparison:**

```javascript
function isAdult(age) {
  if (age = 18) return true;     // assigns 18, which is truthy: always true
  return false;
}
// fix: if (age >= 18) return true;
```

**Off by one:** `i <= list.length` visits one item past the end, as above.

## Step 5: fix and confirm

Once you understand the cause, make the smallest fix, then re-run the case that failed **and** a few that worked before, to make sure you did not break them. Writing those cases down as checks or tests is how professional teams stop the same bug coming back.

## Common mistakes

- **Changing code before reading the error.** The message and line number are your best clue.
- **Fixing the symptom, not the cause.** Replacing `NaN` with `0` at the end hides the real bug.
- **Logging too little.** Log the inputs, not just the output.
- **Forgetting to remove `debugger;` and logs.**
- **Assuming the data is what you expect.** Log it and look.

## Quick recap

- Read the error: type, message, file and line.
- For wrong answers, show the state with `console.log` or a breakpoint.
- Narrow down by halving the code and shrinking the input.
- Fix the cause, then re-check old and new cases.

## Try it

Open the **Do** tab. Three functions each contain one classic bug. Use the console output to find and fix them.


Find and fix bugs methodically with console logging, error messages and DevTools breakpoints.

Debugging with the console

Debugging JavaScript - Chrome DevTools 101

Transform lists with array methods, model records as objects and JSON, and debug with the console.