קטגוריות
JavaScript

האופרטור spread ב- JavaScript

מה זה האופרטור spread, איך אפשר להשתמש בו ב- JavaScript, מתי נשתמש בו ואיך השימוש ב- spread יכול להקל עלינו את הכתיבה

עבודה עם מערך ב- JavaScript יכולה להיות מאתגרת לפעמים, אחד הפיצ'רים החדשים שנוספו לנו ב- es6 זה האופרטור החדש spread מאפשר לנו לפרוס מערך.

למה צריך את האופרטור spread? אפרט את הסיבות לכך ואציג דוגמאות בפוסט זה.

איחוד מערכים עם spread

כאשר יש לנו 2 מערכים (או יותר) אנחנו יכולים לאחד אותם למערך אחד בקלות:

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

let uniteArr = [...arr1, ...arr2];
console.log(uniteArr);
// [1, 2, 3, 4, 5, 6]

שליחת פרמטרים לפונקציה

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

function printParameters (a, b, c) {
	console.log(`a: ${a}, b: ${b}, c: ${c}`);  
}

// example 1: with regular parameters
printParameters('David', 'Dana', 'Itzik');
// a: David, b: Dana, c: Itzik

//--------------

// example 2: using array
let arr = ['David', 'Dana', 'Itzik'];
printParameters(arr);
// a: David,Dana,Itzik, b: undefined, c: undefined

//--------------

// example 3: using array and spread
printParameters(...arr);
// a: David, b: Dana, c: Itzik

בקטע הקוד שראינו יש לנו פונקציה (printParameters) שמקבלת 3 פרמטרים ומדפיסה אותם. הדגמתי את ההבדלים בשימוש בפונקציה.

בדוגמא הראשונה הפונקציה מקבלת 3 פרמטרים בצורה רגילה ומדפיסה אותם כפי שציפינו.

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

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

שימו לב שניתן לשלב את הפרמטר rest עם האופרטור spread כמו בדוגמא הבאה:

function printParameters (...items) {
	console.log(items);  
}

let arr = ['David', 'Dana', 'Itzik'];
printParameters(...arr)
// ["David", "Dana", "Itzik"]

יצירת עותק של מערך קיים באמצעות spread

ניתן להשתמש באורפרטור spread על מנת לייצר עותק של מערך קיים

let myArr = ['David', 'Itay', 'Haim'];
let myArrCopy = [...myArr];

console.log(myArrCopy)
// ['David', 'Itay', 'Haim']

בהזדמנות זאת אני רוצה להדגים מה יקרה אם ננסה פשוט לייצר עותק באמצעות השמה רגילה ולהציג את ההבדלים

let myArr = ['David', 'Itay', 'Haim'];
let myArrCopy = myArr;

console.log(myArrCopy)
// ['David', 'Itay', 'Haim']

myArr.push ('Eyal');
console.log(myArrCopy)
// ['David', 'Itay', 'Haim', 'Eyal']

שימו לב שהוספה של Eyal למערך myArr השפיעה גם על myArrCopy. זה קרה בגלל שכאשר משתמשים בהשמה עם מערכים אז לא נוצר עותק אמיתי אלא רק קישור למערך הקיים. כאשר משתמשים באופרטור spread מתבצעת העתקה ושינוי של המערך המקורי (myArr) לא תשפיע על המערך שהועתק (myArrCopy).

שתף:

כתיבת תגובה

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