🔹 JavaScript Array map()

تابع ()map در جاوااسکریپت یکی از مهم‌ترین و پرکاربردترین متدهای آرایه است که برای تغییر، پردازش و تولید آرایه‌ای جدید از داده‌ها استفاده می‌شود — بدون اینکه آرایه اصلی تغییر کند.

🔸 تعریف و کاربرد

()map روی هر عنصر از آرایه اصلی اجرا می‌شود و خروجی هر بار را در یک آرایه جدید قرار می‌دهد.

📘 ساختار کلی:

array.map(function(currentValue, index, array) {
  // return مقداری که در آرایه جدید قرار می‌گیرد
})

📌 ()map همیشه یک آرایه جدید برمی‌گرداند و آرایه اصلی را تغییر نمی‌دهد.

🔹 مثال ۱: دو برابر کردن اعداد

const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);

console.log(doubled);

📌 خروجی:

[2, 4, 6, 8]

✅ آرایه numbers بدون تغییر باقی مانده و آرایه جدید doubled ساخته شده.

🔹 مثال ۲: به حروف بزرگ تبدیل کردن رشته‌ها

const fruits = ["apple", "banana", "cherry"];
const upperFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(upperFruits);

📌 خروجی:

["APPLE", "BANANA", "CHERRY"]

🔹 مثال ۳: استخراج یک ویژگی از آبجکت‌ها

const users = [
  { name: "Ali", age: 25 },
  { name: "Sara", age: 30 },
  { name: "Reza", age: 22 }
];

const names = users.map(user => user.name);

console.log(names);

📌 خروجی:

["Ali", "Sara", "Reza"]

✅ فقط خاصیت name از هر آبجکت گرفته شده و در یک آرایه جدید ذخیره شده.

🔹 مثال ۴: استفاده از index

const numbers = [10, 20, 30];
const formatted = numbers.map((num, index) => `Item ${index + 1}: ${num}`);

console.log(formatted);

📌 خروجی:

["Item 1: 10", "Item 2: 20", "Item 3: 30"]

✅ دومین پارامتر index شماره اندیس هر عنصر است.

🔹 مثال ۵: map در React

در React معمولاً از ()map برای نمایش لیست داده‌ها استفاده می‌شود:

const users = ["Ali", "Sara", "Reza"];

function App() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default App;

📌 هر عنصر از آرایه به یک <li> تبدیل می‌شود.
ویژگی key برای شناسایی یکتای هر آیتم ضروری است.

🔹 مثال ۶: استفاده زنجیره‌ای با سایر متدها

const numbers = [1, 2, 3, 4, 5];
const result = numbers
  .map(num => num * 2)
  .filter(num => num > 5);

console.log(result);

📌 خروجی:

[6, 8, 10]

✅ ابتدا همه اعداد دو برابر شدن، بعد اعداد بزرگ‌تر از ۵ فیلتر شدن.

🔹 تفاوت map و forEach

🔹 مثال مقایسه:

const nums = [1, 2, 3];

const doubled = nums.map(n => n * 2); // [2, 4, 6]
nums.forEach(n => console.log(n * 2)); // فقط چاپ می‌کند

✅ نکته‌ها

• ()map همیشه طول آرایه خروجی برابر با آرایه اصلی دارد.

• اگر در تابع map چیزی return نکنی، مقدار undefined در خروجی قرار می‌گیرد.

• تغییرات روی آرایه اصلی انجام نمی‌شود.

• در React، پرکاربردترین متد برای render کردن لیست‌ها است.

✅ خلاصه

✅ نتیجه:
()map یکی از متدهای قدرتمند و پرکاربرد جاوااسکریپت است که به شما اجازه می‌دهد آرایه‌ها را به سادگی پردازش کنید و از آن در React برای رندر کردن داده‌ها استفاده کنید.