עידן יצחקיבואו נדבר על ההבדל בין map לבין forEach 😎.
במשפט אחד:
map מחזיר מערך לאחר שינוי ולא משנה את המערך שעליו הוא רץ ו-forEach משנה את המערך שעליו הוא רץ
ביותר ממשפט אחד:
function mapping() {
let arr = [
{
name: 'alf',
id: 1
},
{
name: 'bot',
id: 2
},
{
name: 'gar',
id: 3
},
{
name: 'nel',
id: 4
},
];
let newArr = arr.map(item => {
return {
name: item.name + '-new',
id: item.id,
color: 'red'
}
});
console.log(arr);
console.log(newArr)
}
mapping()פונקציה פשוטה וקצרה שיש בה:
- משתנה שהוא מערך של אובייקטים, לכל אובייקט יש name ו-id.
- משתנה נוסף ששווה למשתנה הראשון לאחר שעברנו עליו עם map ושינינו את השם והוספנו color בכל אובייקט.
- הדפסה של המשתנה הראשון והשני.
כך ניראת ההדפסה של המערכים:
[
{
"name": "alf",
"id": 1
},
{
"name": "bot",
"id": 2
},
{
"name": "gar",
"id": 3
},
{
"name": "nel",
"id": 4
}
]
[
{
"name": "alf-new",
"id": 1,
"color": "red"
},
{
"name": "bot-new",
"id": 2,
"color": "red"
},
{
"name": "gar-new",
"id": 3,
"color": "red"
},
{
"name": "nel-new",
"id": 4,
"color": "red"
}
]אפשר לראות שהמערך הראשון לא השתנה והמערך השני שווה למידע של הראשון לאחר השינויים שעשינו
נשנה את map ל- foreach ונראה מה יקרה (שימו לב, זה לא הולך לעבוד)
function mapping() {
let arr = [
{
name: 'alf',
id: 1
},
{
name: 'bot',
id: 2
},
{
name: 'gar',
id: 3
},
{
name: 'nel',
id: 4
},
];
let newArr = arr.forEach(item => { // WILL NOT WORK !!!!!
return {
name: item.name + '-new',
id: item.id,
color: 'red'
}
});
console.log(arr);
console.log(newArr)
}
mapping()התוצאה:
[
{
"name": "alf",
"id": 1
},
{
"name": "bot",
"id": 2
},
{
"name": "gar",
"id": 3
},
{
"name": "nel",
"id": 4
}
]
undefinedמה שקרה הוא, שהראשון לא השתנה והמערך השני לא קיים,
הסיבה היא, forEach רץ על האובייקטים במערך ומנסה לעשות את השינויים על האובייקט עצמו ולכן הוא לא מקבל את ה-return וכמובן שגם לא מחזיר כלום למערך החדש שלנו.
עכשיו נראה איך כן אפשר לשנות את המערך ועדיין נראה שיש בעיה:
function mapping() {
let arr = [
{
name: 'alf',
id: 1
},
{
name: 'bot',
id: 2
},
{
name: 'gar',
id: 3
},
{
name: 'nel',
id: 4
},
];
let newArr = arr.forEach(item => { // partial work !!!
item.name = item.name + '-new';
item.color = 'red';
});
console.log(arr);
console.log(newArr)
}
mapping()התוצאה:
[
{
"name": "alf-new",
"id": 1,
"color": "red"
},
{
"name": "bot-new",
"id": 2,
"color": "red"
},
{
"name": "gar-new",
"id": 3,
"color": "red"
},
{
"name": "nel-new",
"id": 4,
"color": "red"
}
]
undefinedאפשר לראות שהמערך הראשון שלנו השתנה והמערך השני עדיין לא מוגדר, כמו שאמרתי מקודם, הפונקציה של foreach לא מחזירה כלום ולכן אין טעם לנסות פעולה שכזו.
לסיכום:
אם אתם רוצים להעתיק את המערך עם שינויים בתוכו אבל בלי לפגוע במערך המקורי , אז MAP זה הכיוון.
אם אתם רוצים לשנות את המערך הנוכחי אז FOREACH הוא הכיוון ואז אין טעם להעתיק אותו למשתנה אחר בגלל שזה לא ישנה ויהיה מיותר.
זיכרו!! כשעושים משתנה שווה למשתנה אחר שהוא מערך המחשב לא מבצע העתקה של המערך אלא מיצר את המשתנה ונותן לא REF לאותו תא בזיכרון של המחשב.
זה אומר שאם יהיו לי 2 משתנים שמצביעים לאותו מערך, ברגע שנשנה את המערך באחד מהם, בעצם אנחנו משנים גם את השני.
אף אחד מהם לא באמת מחזיק במערך אלא רק מצביע על מקום בזיכרון שמחזיר את המערך וכל משתנה שיהיה שווה למערך הזה באצם יצביע לאותו מקום בדיוק בזיכרון.
