آشنایی بیشتر با متد پرکاربرد map در جاوااسکریپت

همانطور که احتمالا میدونید در جاوااسکریپت از متد map برای کار بر روی آرایه‌ها استفاده میشه. به این شکل که این متد یک آرگومان به صورت یک تابع کال‌بک دریافت کرده، آن را بر روی تک تک عناصر آرایه اعمال میکند و در پایان نتیجه را به صورت یک آرایه جدید بازمی‌گرداند. پس در واقع این تابع هیچ اثر جانبی بر روی آرایه‌ای که بر روی آن اجرا شده نمیذاره و فقط یک آرایه جدید میسازه و برمیگردونه. ساختار این متد به این شکله:

const myArray = [2, 4, 7, 10];
const resultArray = myArray.map(x => x * 2);
console.log(resultArray);
//  [4, 8, 14, 20]

در این مثال ساده، با استفاده از متد map هر عنصر از آرایه myArray را دوبرابر کرده و آرایه جدید رو در متغیر resultArray ذخیره کردیم.

به طور واضح مشخصه که این متد چقدر کار رو نسبت به استفاده از حلقه آسون میکنه و کد رو ساده‌تر میکنه. در واقع متد map به خودی خود امکان چرخیدن و تکرار در ساختاری مانند آرایه که خاصیت iterating رو داره فراهم میکنه و نیاز نیست حلقه تکرار رو خودمون تعریف کنیم.

در جاوااسکریپت متدهای پرکاربرد دیگه‌ای مانند forEach ،filter و reduce هم مشابه متد map عمل می‌کنند اما کاربرد و نتایج متفاوتی دارند. تابع ورودی متد map مجموعا سه پارامتر می‌تواند دریافت می‌کند که اولی اجباری و دو مورد بعدی اختیاری است. ساختار کلی آن به شکل زیر است:

myArray.map((value , index , array) => // ... )

مورد اول یعنی value مقدار هر عنصر، index اندیس هر عنصر و مورد آخر یعنی array خود آرایه اصلی را برمیگرداند که به این واسطه میتوان با استفاده از متد map بر روی آرایه اصلی هم تغییراتی ایجاد کرد که البته این عمل مرسوم نیست و به ندرت به کار میرود.

چند نکته در مورد متد map

این متد، تابع دریافتی رو به ترتیب از ابتدای آرایه تا انتها بر روی عناصر اعمال میکند.

طول (اندازه) آرایه‌ای که map برمیگرداند برابر است با طول اولیه آرایه‌ای که روی آن اجرا شده است. به این ترتیب شما نمیتوانید با تابع کال‌بک این متد، طبق شرایط آرایه ای با طول کمتر یا بیشتر دریافت کنید. پس تحت هر شرایطی متد map باید به ازای هر عنصر آرایه مورد نظر یک مقدار در آرایه تولیدی جدید برگرداند. تنها زمانی از map استفاده کنید که بخواهید طبق الگو مشخص عملیاتی را بر روی یک آرایه انجام داده و در نتیجه یک آرایه جدید برگردانید. در صورتی که هدف شما مطابق عملکرد map نیست شاید بهتر باشد از forEach استفاده کنید.

اگر با استفاده از آرگومان سوم تغییراتی روی آرایه اصلی اعمال شود مانند حذف عنصر، به جای عنصر حذف شده مقدار undefined درون آرایه جدید قرار می‌گیرد.