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"}

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

See the Pen 2018 rest in objects by Ran Bar-Zik (@barzik) on CodePen.

אפשר לקחת את זה הלאה לפונקציות – אם אני רוצה לפרק אובייקט שאני מקבל ולהשתמש בתכונות הידועות שלו כמשתנים, כל מה שעלי לעשות זה להכניס את ה-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'});

See the Pen 2018 Object destructuring abnd collecting other objects by Ran Bar-Zik (@barzik) on CodePen.

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

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,}

See the Pen 2018 Object literal creation by Ran Bar-Zik (@barzik) on CodePen.

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

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}

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

See the Pen 2018 Object literal merge by Ran Bar-Zik (@barzik) on CodePen.

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