for...of ו-for...in ב-JavaScript: מעבר על מערכים ואובייקטים

שתי לולאות, שני תפקידים שונים

ל-JavaScript יש שתי צורות לולאה שנראות כמעט זהות אבל עושות דברים שונים מאוד. for...of עוברת על הערכים של אובייקט איטרבילי. for...in עוברת על המפתחות של אובייקט. הבדל של מילה קטנה אחת, והתנהגות שונה לגמרי.

הנה כל הסיפור בדוגמה אחת:

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {
    console.log(fruit);
}

for (const key in fruits) {
    console.log(key);
}

הלולאה הראשונה מדפיסה apple, banana, cherry: הערכים. השנייה מדפיסה 0, 1, 2: המפתחות, כמחרוזות. בחרו בלולאה הלא נכונה ותבזבזו עשר דקות בתהייה למה המערך שלכם מלא במספרים.

for...of: ערכים מכל דבר איטרבילי

for...of היא הלולאה שתשתמשו בה הכי הרבה. היא עובדת על כל מה ש-JavaScript מחשיבה איטרבילי: מערכים, מחרוזות, Map, Set, NodeList, גנרטורים ועוד.

const scores = [92, 87, 73, 100];
let total = 0;

for (const score of scores) {
    total += score;
}

console.log("ממוצע:", total / scores.length);

בלי להתעסק עם אינדקסים, בלי scores[i]. מבקשים כל ערך, ומקבלים כל ערך. גם מחרוזות הן איטרביליות, ו-for...of עוברת עליהן תו אחרי תו:

for (const char of "hi!") {
    console.log(char);
}

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

קבלת האינדקס עם for...of

הדבר היחיד ש-for...of לא נותנת ישירות הוא המיקום. כשצריך אותו, שלבו את הלולאה עם entries():

const names = ["Rosa", "Boris", "Ada"];

for (const [index, name] of names.entries()) {
    console.log(`${index}: ${name}`);
}

names.entries() מפיקה זוגות [index, value], והפירוק (destructuring) בצד ההגדרה מפצל אותם לשני משתנים. בדרך כלל זה נקי יותר מלחזור ללולאה קלאסית for (let i = 0; ...) רק כי צריך את i.

for...in: מפתחות של אובייקט

for...in נבנתה בשביל אובייקטים רגילים. היא עוברת על מפתחות המחרוזת שניתנים למנייה:

const user = {
    name: "Rosa",
    age: 30,
    city: "Lisbon",
};

for (const key in user) {
    console.log(key, "->", user[key]);
}

שימו לב שמקבלים את המפתח, לא את הערך. כדי לקרוא את הערך ניגשים שוב לאובייקט עם user[key]. כל מפתח הוא מחרוזת, גם אם הוא נראה כמו מספר.

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

const user = { name: "Rosa", age: 30 };

for (const key in user) {
    if (Object.hasOwn(user, key)) {
        console.log(key, user[key]);
    }
}

Object.hasOwn(user, key) מדלגת על כל מה שעבר בירושה. בקוד מודרני רוב המפתחים נמנעים מ-for...in לגמרי ומשתמשים במקומה ב-Object.keys, Object.values או Object.entries, וזה מביא אותנו לחלק הבא.

הדרך המודרנית לעבור על אובייקט

במקום for...in, שלבו את for...of עם אחת מפונקציות העזר של Object.*. בחרו את זו מבין השלוש שמתאימה למה שאתם צריכים:

const user = { name: "Rosa", age: 30, city: "Lisbon" };

for (const key of Object.keys(user)) {
    console.log("מפתח:", key);
}

for (const value of Object.values(user)) {
    console.log("ערך:", value);
}

for (const [key, value] of Object.entries(user)) {
    console.log(`${key} = ${value}`);
}

Object.entries נוחה במיוחד: פירוק הזוג [key, value] נקרא כמעט כמו שפה רגילה. ומכיוון שהמתודות האלה מחזירות רק את המאפיינים של האובייקט עצמו שניתנים למנייה, אין צורך לדאוג מזבל שעבר בירושה.

אל תשתמשו ב-for...in על מערכים

זה חוקי טכנית, אבל זה מכשיל אנשים:

const nums = [10, 20, 30];
nums.tag = "scores";

for (const key in nums) {
    console.log(key);
}

מקבלים 0, 1, 2, וגם tag. כל מאפיין שמישהו הצמיד למערך, או ל-Array.prototype דרך polyfill, יופיע גם הוא. המפתחות הם מחרוזות, ולכן key + 1 משרשר במקום לחבר. וסדר המעבר לא מובטח להתאים לסדר המערך בכל מקרי הקצה.

כלל אצבע:

• ערכים של מערך? for...of arr.
• אינדקס וערך של מערך? for...of arr.entries().
• רק אינדקס, לספירה? לולאה קלאסית for (let i = 0; i < arr.length; i++).
• מפתחות או זוגות של אובייקט? Object.keys(obj) / Object.entries(obj) עם for...of.

בקיצור: for...in היא כלי נישתי. for...of יחד עם פונקציות העזר של Object מכסות את כל מה שצריך.

break ו-continue עובדות בשתיהן

שתי הלולאות תומכות בכלים הרגילים ליציאה מוקדמת:

const numbers = [1, 2, 3, 4, 5, 6];

for (const n of numbers) {
    if (n % 2 === 0) continue;
    if (n > 4) break;
    console.log(n);
}

continue מדלגת לאיטרציה הבאה, ו-break יוצאת מהלולאה לגמרי. זו הסיבה העיקרית להעדיף את for...of על פני .forEach(): ב-callback של forEach אי אפשר לעשות break מהלולאה, אבל ב-for...of אפשר.

סיכום זה לצד זה

const arr = ["a", "b", "c"];
const obj = { x: 1, y: 2, z: 3 };

// Values of an array:
for (const v of arr) console.log(v);         // a, b, c

// Index and value of an array:
for (const [i, v] of arr.entries()) console.log(i, v);

// Keys of an object:
for (const k of Object.keys(obj)) console.log(k);

// Key and value of an object:
for (const [k, v] of Object.entries(obj)) console.log(k, v);

ארבע לולאות, ארבעה תפקידים, מודל חשיבה אחד: אם אתם רוצים ערכים ממשהו איטרבילי, השתמשו ב-for...of. אם אתם רוצים לעבוד עם המאפיינים של אובייקט, עברו דרך Object.keys / Object.values / Object.entries, גם כן עם for...of. השאירו את for...in למקרה הנדיר שבו באמת רוצים כל מפתח מחרוזת של אובייקט שניתן למנייה, בירושה או לא.

הבא בתור: Truthy ו-Falsy

כל לולאה וכל if ב-JavaScript שואלים בסוף אותה שאלה: האם הערך הזה נחשב אמת? התשובה לא תמיד ברורה: מחרוזות ריקות, אפס, null ו-undefined מתנהגים אחרת ממה שאולי הייתם מצפים. ערכי truthy ו-falsy הם הנושא הבא.