Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

JavaScript – Spread Operator & Rest Parameter

JavaScript - Spread
JavaScript - Spread

ב-Spread נוכל להשתמש על מנת לפזר את האיברים של מערך מסוים, נוכל להשתמש בו למשל על מנת לפזר את איבריו של מערך מסוים אל תוך מערך אחר.

חידוש נוסף ומעניין שנוסף לשפת JavaScript בגרסת ES6 הוא ה-Spread.
ב-Spread נוכל להשתמש על מנת לפזר את איבריו של מערך למשל.

בתור דוגמא ראשונית, בואו נפעל כמו בימים שלפני ES6.
נבחן מצב שבו ברצוננו להדפיס את כל איבריו של מערך נתון, אחת מהדרכים הפשוטות לעשות זאת היא באמצעות לולאה:

var myArray = [11, 22, 33, 44, 55];

for (var i = 0; i < myArray.length; i++){
    console.log(myArray[i]);
}

כעת נוכל לראות כיצד ה-Spread יכול לעזור לנו באופרציות דומות.

שימוש ב-Spread

ה-Spread הוא אופרטור שנראה כך – (), כלומר שמדובר ב-3 נקודות שמופיעות ברצף לפני שם המערך.
מטרתו של אופרטור זה היא לפזר את איבריו של מערך.
אם נרצה לפזר את איבריו של מערך לשם הדפסה למשל, נפשוט נוסיף את האופרטור לפני שם המערך:

var myArray = [11, 22, 33, 44, 55];

console.log(...myArray);

העתקת מערך קיים למערך חדש

שימוש חשוב נוסף הוא להעתיק את איבריו של המערך למערך אחר.

יש לזכור כי מערך הוא מסוג Reference Type, כלומר שאם ננסה להעתיק מערך קיים למערך חדש באופן רגיל –
שניהם ישבו באותו המיקום בזיכרון, וכאשר נשנה משהו באחד, זה ישתנה גם בשני.

שימו לב לקטע הקוד הבא שידגים זאת:

var myArray = [11, 22, 33, 44, 55var myArray = [11, 22, 33, 44, 55];
var newArray = myArray;

myArray[0] = 0; // משנה את האינדקס הראשון במערך הראשון

console.log('myArray:')
console.log(...myArray);

console.log('myArray:')
console.log(...newArray); // שני המערכים השתנו
JavaScript - Reference Type
JavaScript – Reference Type

כלומר שאם נשתמש ב-spread על מנת לפזר את איבריו של מערך אל תוך מערך חדש זה היה מונע זאת:

var myArray = [11, 22, 33, 44, 55];
var newArray = [...myArray];

myArray[0] = 0; // משנה את האינדקס הראשון במערך הראשון

console.log('myArray:')
console.log(...myArray);

console.log('\nnewArray:')
console.log(...newArray); // 
JavaScript - Rest Parameter
JavaScript – Rest Parameter

שימוש ב-Spread על אובייקטים

כשם שהשתמשנו ב-Spread על מערכים, כך נוכל לעשות גם עם אובייקטים.
כעת ניצור 2 אובייקטים ונפזר אותם באובייקט חדש.
כמובן שנוכל לפזר את שניהם בבת אחת, נעשה זאת על ידי הפרדה ביניהם באמצעות פסיק (,).
אין זה מן הנמנע גם שהאובייקט החדש יכיל פריטים עוד לפני כן.
שימו לב ל-Code Snippet הבא:

const obj1 = { a : 11, b : 22 };
const obj2 = { c : 33, d : 44 };

const newObj = {...obj1, ...obj2, e : 55}; // מעתיק את שני האובייקטים הראשונים לאובייקט חדש

console.log(newObj); 
JavaScript spread Object
JavaScript spread Object

שימו לב שאם היינו מנסים להדפיס את האובייקט כפי שהדפסנו את המערכים היינו מקבים שגיאה,
וזאת משום שאובייקט לא נתון לאיטרציות כמו מערך למשל, אין לו אינדקסים,
אך מה שכן ניתן לעשות – זה להשתמש בלולאת for in:

for (item in newObj) {
    console.log(newObj[item])
}

Rest Parameter

שימוש נוסף באופרטור () הוא כפרמטר Rest.
כאשר אנו משתמשים ב-Spread כפרמטר בפונקציה הוא נקרא Rest Parameter.
נוכל להשתמש בו למשל על מנת שנוכל לקבל מספר ערכים לא ידוע מראש בפונקציה שלנו.
בקטע הקוד הבא נדגים כיצד ניתן להשתמש בפרמטר Rest על מנת לקבל כמות לא ידועה מראש של ערכים לפונקציה שתחשב את הסכום שלהם על ידי שימוש ב-reduce:

function sum(...nums){
    return nums.reduce((currValue, currIndex) => currValue + currIndex);
}

console.log(sum(1, 5, 4)); // 10
console.log(sum(10, 30, 30, 30)); // 100

כלומר שמה שקרה כאן מאחורי הקלעים זה שנוצר לנו בתוך הפונקציה מערך שמורכב מהערכים ששלחנו לפונקציה,
וכמערך – לא הייתה לנו כל בעיה לבצע reduce על מנת לחשב את הסכום,
ולכן נוכל לקבל התוצאה הבאה:

JavaScript - Rest Parameter
JavaScript – Rest Parameter

דרך נוספת לשימוש היא לשלוח את הפרמטר לפונקציה.
נניח והפונקציה שלנו כתובה כך שהיא מקבלת 3 ערכים, כאשר נקרא לה, נוכל לשלוח לה Rest Parameter:

function sum(num1, num2, num3){
    return num1 + num2 + num3;
}

var myArr1 = [1, 5, 4];
var myArr2 = [10, 30, 30, 30];

console.log(sum(...myArr1)); // 10
console.log(sum(...myArr2)); // 70

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

אם כך, ראינו כיצד להשתמש ב-Spread Operator ו-Rest Parameter.
לקריאה מורחבת באתר MDN יש ללחוץ כאן

רוצים לשתף את המדריך?

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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

כתיבת תגובה

הזמינו אותי לכוס קפה
buy me coffee

אהבתכם את המדריך? פתר לכם תקלה? הזמינו את כותב המדריך לכוס קפה

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