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 (לא מספר – 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 ולהכיר שימושים נוספים שקיימים.
בהצלחה!

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

רק רגע! :)
כשאני לא כותב פוסטים ב-CodeBrain אני מספק שרותי פיתוח, ייעוץ והדרכה.
אם נראה לך שאני האיש המתאים עבורך, כדאי שנדבר :)