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

עבודה עם מערך ב- 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"]

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']