map, filter ਅਤੇ reduce ਕੀ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

ਇਹ **immutable** array iterators ਹਨ — ਇਹ ਮੂਲ ਨੂੰ mutate ਕਰਨ ਦੀ ਬਜਾਏ ਇੱਕ ਨਵਾਂ ਮੁੱਲ ਵਾਪਸ ਕਰਦੇ ਹਨ, ਜੋ ਮਾਨਵੀ `for` loops ਨਾਲੋਂ ਸਾਫ਼, ਵਧੇਰੇ declarative ਕੋਡ ਵੱਲ ਖੜਦਾ ਹੈ।

```js
const nums = [1, 2, 3, 4];

// map: transform each item → array of the SAME length
nums.map(n => n * 2);            // [2, 4, 6, 8]

// filter: keep items passing a test → SHORTER array
nums.filter(n => n % 2 === 0);  // [2, 4]

// reduce: fold the array into ONE value (accumulator + current)
nums.reduce((sum, n) => sum + n, 0); // 10
//          ^acc  ^item            ^initial value
```

## reduce ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ (ਉਹ ਜਿਸ ਨੂੰ ਲੋਕ ਮੁਸ਼ਕਲ ਲੱਗਦਾ ਹੈ)

Reduce array ਨੂੰ "accumulator" ਲਿਜਾ ਕੇ ਚਲਦਾ ਹੈ। ਹਰ ਪੜਾਅ ਨਵਾਂ accumulator ਵਾਪਸ ਕਰਦਾ ਹੈ:

```js
// step 0: acc=0,  n=1 → 1
// step 1: acc=1,  n=2 → 3
// step 2: acc=3,  n=3 → 6
// step 3: acc=6,  n=4 → 10
```

ਇਹ ਸਿਰਫ ਰਕਮਾਂ ਲਈ ਨਹੀਂ ਹੈ — reduce ਆਬਜੈਕਟ ਬਣਾ ਸਕਦਾ ਹੈ, ਆਈਟਮ ਨੂੰ ਸਮੂਹ ਕਰ ਸਕਦਾ ਹੈ ਜਾਂ ਸਮਤਲ ਕਰ ਸਕਦਾ ਹੈ:

```js
users.reduce((acc, u) => { acc[u.id] = u; return acc; }, {}); // index by id
```

## ਉਨ੍ਹਾਂ ਨੂੰ ਕਿਉਂ ਮੁਤਰਜਿਹ ਕਰਦੇ ਹੋ

ਇਹ ਸਾਫ਼ **chain** ਕਰਦੇ ਹਨ ਅਤੇ mutate ਨਹੀਂ ਕਰਦੇ, ਜੋ state-driven UIs ਵਿੱਚ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ। `forEach` ਨੂੰ ਸਿਰਫ side effects ਲਈ ਵਰਤੋ (ਇਹ ਕੁਝ ਵੀ ਵਾਪਸ ਨਹੀਂ ਕਰਦਾ)। ਵਿਸ਼ਾਲ arrays ਲਈ ਜਿੱਥੇ ਤੁਸੀਂ ਬਿਨਾਂ ਬਹੁਤ ਸਾਰੇ passeerings ਨੂੰ chain ਕਰਦੇ, ਇੱਕ ਸਿੰਗਲ `reduce` ਜਾਂ ਸਾਧਾਰਨ loop ਵਧੇਰੇ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਹੋ ਸਕਦਾ ਹੈ।