# ۵ متد آرایه جاوااسکریپت که هر فرانتاند کار باید بلد باشد (همراه مثال واقعی)
من رضام، حدود ده ساله با وردپرس و چهار ساله با React و Next.js کار میکنم. توی این سالها یه چیزی رو خوب فهمیدم: فرق یه دولوپر تازهکار با یه دولوپر حرفهای توی همین جزئیاته. کسی که `map` و `filter` و `reduce` رو درست بشناسه، کدش تمیزتره، باگش کمتره و سرعتش بیشتره.
توی این مقاله پنجتا از پرکاربردترین متدهای آرایه رو با مثال واقعی از یه پروژه فروشگاهی بررسی میکنیم؛ همون چیزی که من هر هفته توی پروژههای مشتریها باهاش سر و کار دارم.
## ۱. map: تبدیل همه آیتمها
`map` روی تکتک آیتمهای آرایه یه تابع اجرا میکنه و یه **آرایه جدید** برمیگردونه. نکته مهم: آرایه اصلی دست نخورده باقی میمونه.
```js
const prices = [100000, 250000, 80000, 420000];
// اعمال ۱۰ درصد تخفیف روی همه قیمتها
const discounted = prices.map(price => price * 0.9);
console.log(discounted); // [90000, 225000, 72000, 378000]
console.log(prices); // [100000, 250000, 80000, 420000] — بدون تغییر
```
کِی ازش استفاده کنی؟ هر وقت خواستی از یه لیست، یه لیست جدید بسازی. مثلاً تبدیل لیست محصولات به لیست کارتهای نمایشی، یا تبدیل تاریخها به فرمت شمسی. اگه خروجیات یه آرایه همطول با ورودی باشه، `map` انتخاب درسته.
**اشتباه رایج:** بعضیها از `map` فقط برای حلقه زدن استفاده میکنن و خروجیش رو دور میریزن. اگه به آرایه جدید نیاز نداری، `map` ابزار اشتباهیه؛ برو سراغ `forEach`.
## ۲. filter: جدا کردن آیتمهای موردنظر
`filter` آیتمهایی که شرط رو پاس کنن نگه میداره و بقیه رو حذف میکنه. خروجیش هم یه **آرایه جدید**ه که طولش مساوی یا کوتاهتر از ورودیه.
```js
const products = [
{ name: 'هدفون', price: 850000, inStock: true },
{ name: 'ماوس', price: 320000, inStock: false },
{ name: 'کیبورد', price: 1200000, inStock: true },
];
// فقط کالاهای موجود
const available = products.filter(p => p.inStock);
// فقط کالاهای موجودِ زیر یک میلیون
const cheapAvailable = products.filter(p => p.inStock && p.price < 1000000);
```
توی فروشگاههای اینترنتی که با ووکامرس یا Next.js میسازی، `filter` پای ثابت فیلترهای سایدباره: فیلتر بر اساس قیمت، برند، موجودی، رنگ. ترکیب چند شرط با `&&` هم کاملاً عادیه و خوانایی کد رو حفظ میکنه.
**اشتباه رایج:** فراموش کردن اینکه `filter` آرایه جدید میسازه. اگه روی همون متغیر اصلی بازنویسی نکنی یا توی یه متغیر جدید نگیریش، عملاً هیچ اتفاقی نیفتاده.
## ۳. reduce: تبدیل کل آرایه به یه مقدار
`reduce` قدرتمندترین و در عین حال ترسناکترین متد این لیسته. کل آرایه رو میگیره و به **یه مقدار واحد** تبدیل میکنه؛ اون مقدار میتونه عدد باشه، رشته باشه یا حتی یه آبجکت کامل.
```js
const cart = [
{ name: 'هدفون', price: 850000, qty: 1 },
{ name: 'ماوس', price: 320000, qty: 2 },
];
// جمع کل سبد خرید
const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(total); // 1490000
```
اون `0` آخر چیه؟ مقدار اولیه `sum`ـه. اگه نذاریش و آرایه خالی باشه، خطا میگیری. قانون من: همیشه مقدار اولیه بده. همیشه.
کاربردهای واقعی `reduce` خیلی بیشتر از جمع زدنه: گروهبندی آیتمها بر اساس دسته، شمارش تکرارها، ساخت یه آبجکت lookup از روی آرایه. هر وقت حس کردی با `map` و `filter` به بنبست رسیدی، احتمالاً جواب `reduce`ـه.
**اشتباه رایج:** پیچیدهکردن بیش از حد. اگه تابع داخل `reduce` بیشتر از سهچهار خط شد، یه قدم عقب برو؛ شاید دوتا `filter` و `map` زنجیرشده خواناتر باشه.
## ۴ و ۵. find و some: پیدا کردن و بررسی
این دوتا رو با هم میگم چون خیلیها قاطیشون میکنن.
`find` **اولین** آیتمی که شرط رو پاس کنه برمیگردونه (خود آیتم رو، نه آرایه). اگه چیزی پیدا نکنه، `undefined` میده.
`some` فقط یه سؤال true/false جواب میده: آیا **حداقل یه** آیتم هست که شرط رو پاس کنه؟
```js
const users = [
{ name: 'علی', age: 25 },
{ name: 'سارا', age: 17 },
];
// پیدا کردن اولین کاربر بالای ۱۸ سال
const adult = users.find(u => u.age >= 18);
console.log(adult); // { name: 'علی', age: 25 }
// آیا کاربر زیر ۱۸ سال داریم؟
const hasMinor = users.some(u => u.age < 18);
console.log(hasMinor); // true
```
تفاوت ظریف ولی مهم: `find` دنبال **چیز** میگرده، `some` دنبال **جواب بله/خیر**. اگه فقط میخوای بدونی چیزی هست یا نه (مثلاً آیا سبد خرید کالای ناموجود داره؟)، `some` هم سریعتره هم رساتر. چون بهمحض پیدا کردن اولین مورد وایمیسته و بقیه آرایه رو نمیگرده.
**اشتباه رایج:** استفاده از `filter()[0]` بهجای `find`. هم کندتره (کل آرایه رو میگرده) هم زشتتر. اگه یه دونه میخوای، `find` بزن.
## ترکیبشون با هم: قدرت واقعی اینجاست
توی پروژه واقعی هیچوقت یه متد تنها استفاده نمیشه. ببین:
```js
const totalDiscounted = products
.filter(p => p.inStock) // فقط موجودها
.map(p => p.price * 0.9) // اعمال تخفیف
.reduce((sum, price) => sum + price, 0); // جمع کل
```
سه خط، سه مرحله، کاملاً خوانا. همین منطق با حلقه `for` و متغیر کمکی حداقل ده خط میشد و وسطش یه `if` و یه `push` هم قاطی بود. این فرق کد تمیز با کد بههمریختهست.
یه نکته فنی: ترتیب زنجیره مهمه. اول `filter` بزن بعد `map`؛ اینطوری `map` روی آیتمهای کمتری اجرا میشه و توی لیستهای بزرگ واقعاً توی پرفورمنس فرق میذاره.
## جمعبندی
| متد | ورودی | خروجی | کِی استفاده کنی؟ |
|---|---|---|---|
| `map` | آرایه | آرایه همطول | تبدیل همه آیتمها |
| `filter` | آرایه | آرایه کوتاهتر | جدا کردن آیتمها با شرط |
| `reduce` | آرایه | یه مقدار واحد | جمع، گروهبندی، تجمیع |
| `find` | آرایه | یه آیتم یا undefined | پیدا کردن اولین مورد |
| `some` | آرایه | true / false | بررسی وجود شرط |
اگه تا امروز با `for` همهچی رو حل میکردی، از فردا برای هر تسک جدید اول از خودت بپرس: «این کار با کدومیکی از این پنجتا انجام میشه؟» بعد از دو هفته میبینی دستت خودش میره سمتشون.
## سوالات پرتکرار
**فرق `map` و `forEach` چیه؟**
`map` یه آرایه جدید برمیگردونه و برای تبدیل دادهست؛ `forEach` چیزی برنمیگردونه و فقط برای اجرای یه عملیات روی هر آیتم (مثلاً لاگ گرفتن یا ذخیره در دیتابیس) استفاده میشه. اگه خروجی `map` رو استفاده نمیکنی، داری اشتباه میزنی.
**`reduce` رو کِی واقعاً لازم دارم؟**
هر وقت خروجیات یه چیز واحد باشه نه یه لیست: جمع سبد خرید، میانگین نمرات، گروهبندی کاربران بر اساس شهر، یا ساخت یه آبجکت از روی آرایه. اگه با `map` و `filter` کارت راه افتاد، سراغ `reduce` نرو؛ سادگی همیشه برندهست.
**این متدها روی آرایه اصلی تأثیر میذارن؟**
نه. هر پنجتا Immutable هستن؛ یعنی آرایه اصلی رو تغییر نمیدن و خروجی جدید میسازن (بهجز `reduce` که اصلاً آرایه برنمیگردونه). همین ویژگیه که باعث میشه توی React و مدیریت state اینقدر محبوب باشن، چون state رو مستقیم دستکاری نمیکنن.
**برای آرایههای خیلی بزرگ کدوم سریعتره؟**
`some` و `find` بهمحض پیدا کردن جواب وایمیستن، پس روی دیتای بزرگ بهینهترن. توی زنجیرهها هم اول `filter` بزن تا `map` روی آیتم کمتری اجرا بشه. ولی صادقانه بگم: تا وقتی لیستت زیر چند هزار آیتمه، فرقشون رو حس نمیکنی؛ خوانایی کد مهمتره.
---
**من رضا برزخیام، توسعهدهنده فرانتاند از مشهد.** اگه سایتت نیاز به بازبینی فنی داره یا میخوای فروشگاهت رو با React یا وردپرس بسازی، [مشاوره اول رایگانه](https://rezabarzakhi.ir). نمونهکارهام رو هم میتونی توی همین سایت ببینی.
اگه با جاوااسکریپت کار میکنی، هر روز با آرایه سر و کار داری. لیست محصولات فروشگاه، آیتمهای سبد خرید، کامنتهای کاربرا، نتایج جستوجو؛ همهشون آرایهان. سؤال اینه: بلدی باهاشون درست کار کنی یا هنوز با حلقه `for` همهچی رو هندل میکنی؟
