ES2018 – פירוק ובנייה של אובייקט

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

const someArray = ['a', 'b', 'c'];
const  [x,...y] = someArray; 
console.log(x); // a
console.log(y); // ["b", "c"]

מה אלו שלוש הנקודות המוזרות האלו? מדובר במה שאומר לנו בעצם – ״כל השאר״. הדבר הזה בעצם אומר ש-x יקבל את האיבר הראשון במערך ו-y יקבל את כל השאר.

הנה דוגמה נוספת:

const someArray = ['a', 'b', 'c', 'd', 'e', 'f'];
const  [x,y,z,...allOthers] = someArray; 
console.log(x); // a
console.log(y); // b
console.log(z); // c
console.log(allOthers); // ["d", "e", "f"]

פה מי שמקבל את ׳כל השאר׳ – כלומר את שלוש הנקודות הוא הקבוע allOthers.

בתקן החדש אנחנו לוקחים את זה גם לאוביקטים אבל עם טוויסט קטן – כיוון שאין משמעות לאיבר ראשון או איבר שני (בכל זאת, אובייקט), אז השם של המשתנה חייב להיות לשם התכונה. אם אני רוצה למשל לקחת את תכונת a של אובייקט someObject אני צריך לקרוא למשנה בשם שלו. למשל:

const someObject = {a: 1, b: 2, c: 3};
const {a, ...rest} = someObject;
console.log(a); // 1
console.log(rest); // {b: 2, c: 3}

והנה עוד דוגמה – שימו לב שהסדר של התכונות לא מעניין – רק השם

const someObject = { someProp2: 'someValue2', someProp1: 'someValue1',someProp3: 'someValue3', };
const {someProp2, ...rest} = someObject;
console.log(someProp2); // someValue2
console.log(rest); // {someProp1: "someValue1", someProp3: "someValue3"}

נכון פשוט? תרגלו בעצמכם פה:

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

function myFunction ({arg1, arg2, ...others}) { // rest operator
  console.log(arg1);
  console.log(arg2);
  console.log(others);
}

myFunction({arg1: 'value1', arg2: 'value2', arg3: 'value3', arg4: 'value5'});

אפשר להשתמש באופרטור … כדי ליצור אובייקטים חדשים. שימו לב למשל:

const myObj = {a: 1, b: 1, c: 1,}

const newObj = {...myObj, d: 4}
console.log(newObj); // {a: 1, b: 1, c: 1, d: 4}

מה שקרה כאן שהכנסתי את האובייקט באמצעות … והוא פרס אותו אוטומטית לאובייקט החדש. למה זה טוב? הו הו הו – למירג׳וג׳ אובייקטים למשל!

const myObj = {a: 1, b: 1, c: 1,}
const myObj2 = {d: 1, e: 1, f: 1,}

const newObj = {...myObj, ...myObj2}
console.log(newObj); // {a: 1, b: 1, c: 1, d: 1, e: 1, f: 1,}

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

const myObj1 = {a: 1, b: 1, c: 1,}
const myObj2 = {a: 2, e: 2}

const newObj1 = {...myObj1, ...myObj2}
console.log(newObj1); // {a: 2, b: 1, c: 1, e: 2}

const newObj2 = {...myObj2, ...myObj1}
console.log(newObj2); // {a: 1, e: 2, b: 1, c: 1}

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

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