Spread Operator ב-JavaScript

Spread Operator הוא תחביר שהגיע ל-JavaScript בתקן ES6 הדי ותיק.
מפתחים ב-JavaScript? אל תפספסו.

מיום ליום מתכנתים שכותבים ב-JavaScript מבינים את משמעות החידושים שהגיעו לשפה הפופולרית בתקן ES6 שכבר נמצא איתנו לא מעט זמן, על חלקם כבר כתבתי מאמר, למשל Arrow Functions ו-Destructuring.
מאמר זה יעסוק בחידוש נוסף – Spread Operator, תחביר זה מאפשר לנו "לפשט" מערכים ואובייקטים בצורה קלה ומהירה.

הטמעה במערך קיים

נתחיל עם דוגמה פשוטה, נאמר שאנו רוצים להטמיע את האבירים של מערך אחד כחלק ממערך שני, הדוגמה הבאה אמורה לעבוד, לא?

var arr1 = [1, 2, 3];
var arr2 = [arr1, 4, 5, 6];

לצערנו לא. הנה הפלט שיצא ב-console:

תוצאה לא רצויה, המערך הוכנס כמערך ולא כאיברים מופשטים.
תוצאה לא רצויה, המערך הוכנס כמערך ולא כאיברים מופשטים.

המערך arr1 אמנם הוכנס אל arr2 אבל הוא הוכנס כמערך, ולא "פושט" לכדי איברים.
הנה המערך בצורתו המלאה:

ערכו המלא של המערך.
ערכו המלא של המערך.

ניתן לראות שהאיבר הראשון במקום 0 מכיל מערך, שמערך זה מכיל את האיברים של מערך arr1.
זה לא מה שרצינו, אז מהו הפיתרון? Spread Operator (תראו מופתעים).

שלוש נקודות, זה כל מה שצריך:

var arr1 = [1, 2, 3];
var arr2 = [...arr1, 4, 5, 6];

והתוצאה:

עכשיו הכל תקין, המערך שהכנסנו "הופשט" ואיבריו הוכנסו אל המערך.
עכשיו הכל תקין, המערך שהכנסנו "הופשט" ואיבריו הוכנסו אל המערך.

בדיוק מה שרצינו, מערך אחד המכיל את תוכן 2 המערכים.

גם באובייקטים

ניתן לראות את אותו המקרה, גם באובייקטים.
ללא שימוש ב-Spread Operator:

var obj1 = {a: 1, b: 2};
var obj2 = {obj1, c: 3, d: 4};

והתוצאה שמתקבלת ב-console:

האובייקט הוכנס לאובייקט השני כאובייקט.
האובייקט הוכנס לאובייקט השני כאובייקט.

ובשימוש ב-Spread Operator:

var obj1 = {a: 1, b: 2};
var obj2 = {...obj1, c: 3, d: 4};

והתוצאה:

עכשיו הכל תקין, האובייקט שהכנסנו "הופשט".
עכשיו הכל תקין, האובייקט שהכנסנו "הופשט".

ערך מקסימלי/מינימלי

לא פעם נרצה לדעת מהו הערך הגבוה או הנמוך ביותר במערך.
מי שמתעקש, יכול ליצור איזה סקריפט קצרצר שיעשה זאת, אבל כמעט תמיד יש דרך נכונה וחכמה יותר, בטח במקרה זה.
הרי בשביל מה יש את Math.max ו- Math.min?

var arr1 = [21, -15, 12, 23, -2, 7];
var min = Math.min(arr1);

וזוהי התוצאה כאשר מדפיסים ב-console:

מתקבל NaN.
מתקבל NaN.

אז מדוע התקבל NaN (לא מספר – Not-A-Number)?

פשוט מאוד, המתודה min מצפה לקבל מספרים ובמקרה הזה היא קיבלה מערך.
אותם שלוש נקודות יעשו את ההבדל:

var arr1 = [21, -15, 12, 23, -2, 7];
var min = Math.min(...arr1);

והתוצאה שציפינו לקבל:

כעת מתקבל הערך המינימלי ביותר.
כעת מתקבל הערך המינימלי ביותר.

גם בפונקציות

נניח ונרצה להעביר לפונקציה הבאה איברים של מערך כארגומנט:

function sum(a, b) {
  return a + b;
}
var numbers = [3, 7];

כבר הספקתם להבין שהתחביר הבא לא יספק את התוצאה הרצויה:

sum(numbers);

והתוצאה המתקבלת:

העברת המערך כארגומנט בצורה זו מספקת לנו תוצאה לא רצויה.
העברת המערך כארגומנט בצורה זו מספקת לנו תוצאה לא רצויה.

וכעת שימוש בשלוש נקודות הקסם:

sum(...numbers);

והתוצאה:

הפונקציה החזירה את הערך הרצוי.
הפונקציה החזירה את הערך הרצוי.

סיכום

אין ספק שבשנים האחרונות JavaScript מתחדשת בתחבירים שנועדו להקל על מפתחים, Spread Operator הוא אחד מהם.
אני ממליץ לקרוא בהרחבה על Spread Operator ולהכיר שימושים נוספים שקיימים.
בהצלחה!

נהנת ממאמר זה? הירשם לרשימת התפוצה וקבל עדכונים על מאמרים חדשים!


כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *