# JavaScript Functions, Arrays and Objects — map, filter, reduce, Destructuring

Source: https://skills101.in/learn/web-development/javascript-functions-arrays-objects — Skills101 free tutorial (Web Development). Updated 2026-11-09.

Functions, arrays and objects are 80% of everyday JavaScript — especially in React and Node.

![A tree of components and data: JavaScript programs are built from functions working on arrays and objects](https://skills101.in/learn-img/web-development/react-components.svg)

## 1. Functions

```javascript
function add(a, b = 0) {        // default parameter
  return a + b;
}
const square = (x) => x * x;     // arrow function, implicit return
const greet = (name) => {
  const msg = `Hello, ${name}!`;
  return msg;
};
console.log(add(2, 3), add(7), square(9), greet("Ravi"));
```

```text
5 7 81 Hello, Ravi!
```

Functions are **values**: you can store them in variables and pass them to other functions (callbacks).

### Closures

A function remembers the variables from where it was created:

```javascript
function makeCounter() {
  let count = 0;
  return () => ++count;
}
const next = makeCounter();
next(); next();
console.log(next());
```

```text
3
```

## 2. Array methods you'll use daily

```javascript
const students = [
  { name: "Asha", marks: 92, city: "Jaipur" },
  { name: "Ravi", marks: 74, city: "Pune" },
  { name: "Neha", marks: 85, city: "Jaipur" },
];

const names = students.map((s) => s.name);
const toppers = students.filter((s) => s.marks >= 80).map((s) => s.name);
const total = students.reduce((sum, s) => sum + s.marks, 0);
const ravi = students.find((s) => s.name === "Ravi");
const fromJaipur = students.some((s) => s.city === "Jaipur");
const sorted = [...students].sort((a, b) => b.marks - a.marks).map((s) => s.name);

console.log(names, toppers, total, ravi.marks, fromJaipur, sorted);
```

```text
[ 'Asha', 'Ravi', 'Neha' ] [ 'Asha', 'Neha' ] 251 74 true [ 'Asha', 'Neha', 'Ravi' ]
```

| Method | Returns | Use |
|---|---|---|
| `map(fn)` | new array, same length | transform each item |
| `filter(fn)` | new array, fewer items | keep matching items |
| `reduce(fn, start)` | one value | sum, count, group |
| `find(fn)` | first match or undefined | look up one item |
| `some` / `every` | boolean | any / all match? |
| `sort(fn)` | the **same** array, sorted | order (copy first with `[...arr]`) |
| `includes(x)` | boolean | membership |

> `sort()` without a function sorts as **text**: `[10, 9, 2].sort()` gives `[10, 2, 9]`. Use `sort((a, b) => a - b)` for numbers.

## 3. Objects

```javascript
const course = { title: "SQL", price: 999, tags: ["db", "interview"] };
course.price = 799;                 // change
course.level = "beginner";          // add
delete course.tags;                 // remove
console.log(course, Object.keys(course).length, "title" in course);
```

```text
{ title: 'SQL', price: 799, level: 'beginner' } 3 true
```

## 4. Destructuring and spread

```javascript
const user = { name: "Neha", city: "Indore", skills: ["js", "css"] };
const { name, city: hometown } = user;     // pull out properties
const [first, ...rest] = [10, 20, 30];       // pull out array items
const updated = { ...user, city: "Pune" };   // copy + change (original untouched)
const all = [...user.skills, "react"];
console.log(name, hometown, first, rest, updated.city, user.city, all);
```

```text
Neha Indore 10 [ 20, 30 ] Pune Indore [ 'js', 'css', 'react' ]
```

Spread (`...`) makes **shallow copies** — the React way to update state without changing the original.

## 5. JSON

JSON is how data travels between frontend and backend.

```javascript
const data = { id: 7, title: "DSA", free: false };
const text = JSON.stringify(data);
const back = JSON.parse(text);
console.log(text, back.title);
```

```text
{"id":7,"title":"DSA","free":false} DSA
```

## Common mistakes

- Forgetting `return` in arrow functions with braces `{ }`.
- Sorting numbers without a compare function.
- Mutating state objects directly instead of copying with spread.

## Quick recap

- Functions, arrow functions, default parameters, closures.
- map / filter / reduce / find / some / sort / includes.
- Objects: dot access, add, delete, `Object.keys`.
- Destructuring and spread for clean copies; JSON.stringify / parse.


Practice quiz and free certificate: https://skills101.in/learn/web-development/javascript-functions-arrays-objects