Looping Over Objects and Maps

In the last video, you paired up N26’s scheduled and actual departure times, such as the 23:10 that left at 23:14. The gap in each pair shows how late that departure was, and the report’s next section adds those minutes up per route. The operations team reads it to see which route had the worst night. The Python script keeps the totals in a dictionary, keyed by route.

Adding up the minutes is the job of the exercise after this lesson. Here, you’ll start from the finished totals and port the loops that print them. The direct port of a dictionary loop fails in JavaScript, and the fix gives you a choice that Python makes for you. You’ll loop over an object’s keys, values, and pairs and find out when JavaScript’s Map is the closer match for a Python dictionary. Start with the loop a Pythonista writes first.

Loop Over an Object Like a Dictionary

The Python script holds last night’s totals in a dictionary and prints them. Looping over a dictionary directly gives you its keys, so the first version of the report section prints each route:

Language: Python
delay_totals = {"N3": 11, "N7": 26, "N26": 16}
for route in delay_totals:
    print(route)

It prints N3, N7, and N26, in the order the routes went in. In JavaScript, you use a plain object where Python uses a dictionary. You write it with braces, and keys that are valid names need no quotes. Since for...of is how JavaScript loops over an array’s items, the natural port loops over the object the same way. Predict what this JavaScript version prints:

Language: JavaScript
const delayTotals = { N3: 11, N7: 26, N26: 16 };
for (const route of delayTotals) {
  console.log(route);
}

JavaScript stops before the loop prints anything:

Language: Program Output
TypeError: delayTotals is not iterable

The error uses a word you know from Python. An iterable is a value a loop can walk through, and Python’s for loop over a number fails with TypeError: 'int' object is not iterable in the same way. What differs is which values count. Arrays and strings are iterable in JavaScript too, but a plain object isn’t, and that’s on purpose.

Python made keys the default for a dictionary loop. JavaScript uses plain objects both as dictionaries and as records, such as a stop with name and slack properties, and there’s no single right answer to what looping over one should give. It could be the keys, the values, or the pairs, so JavaScript doesn’t guess. You state which one you want.

Choose Keys, Values, or Pairs

Python’s dictionaries give you the three choices as methods: .keys(), .values(), and .items(). JavaScript gives you the same three, but as methods of Object itself rather than of each object, so you pass them the object you want. Two of the names match Python’s, Object.keys() and Object.values(); the third is Object.entries(), not items(), the same name an array uses for its index-and-item pairs. Here’s what each one returns for the route totals:

Locked learning resources

Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Locked learning resources

The full lesson is for members only. Join us and get access to thousands of tutorials and a community of expert JavaScript developers.

Unlock This Lesson

Already a member? Sign-In

Become a Member to join the conversation.