Locked learning resources

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

Unlock This Lesson

Locked learning resources

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

Unlock This Lesson

Looping Over Items With for...of

Looping Over Items With for…of

In this lesson, you ported the first loop of the night-bus report from Python to JavaScript.

  • Python’s for delay in delays: becomes for (const delay of delays) { ... }. The word is of, parentheses wrap the header, and braces mark the body, because JavaScript doesn’t read indentation.
  • You always declare the loop variable. Python’s assignment creates a name; JavaScript keeps declaring (const or let) and assigning apart.
  • Leaving out the declaration, as you would in Python, is a ReferenceError in an ES module. The "type": "module" in your project’s package.json makes every .js file in your project an ES module, and ES modules always run in strict mode.
  • Strict mode turns some silent mistakes, like this one, into errors. Under the older “sloppy” rules, the assignment would quietly create a global variable, even inside a function, where Python would keep the name local. Those rules still apply to the REPL and to CommonJS, Node’s older module format: a .js file that uses require() in a project without "type": "module", or any .cjs file.
  • const works because JavaScript creates a fresh variable on every pass and sets it once, where Python rebinds one name on every pass. let works too, but const is what JavaScript developers write when the body doesn’t reassign it.
  • for...of works on strings too, one character per pass, as Python’s for does.

The finished code:

Language: JavaScript
const delays = [4, 0, 12];
for (const delay of delays) {
  console.log(delay);
}

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

00:00 In this lesson, you’ll port the first loop of the night-bus report to JavaScript, and find out why a loop that’s fine in Python stops JavaScript cold. The list holds last night’s delays at route N26’s stops, in minutes.

00:16 The team reads them each morning to see where the bus fell behind. The loop takes each delay in turn and prints it. Run it, and Python prints all three. The real report has hundreds of stops, but three are enough here.

00:34 Now open the JavaScript version and port it line by line. The list becomes an array, declared with const, and a semicolon ends the line. Next comes the loop header.

00:47 In the course intro, the loop kept Python’s in, and Node printed zero, one, two. The word JavaScript developers use here is of. Parentheses wrap the header, as they wrap an if condition.

01:02 Braces wrap the body, because JavaScript doesn’t read indentation. And print() turns into console.log(). That’s the loop you’d write coming from Python.

01:15 Python’s header declares nothing, so neither does this port. What happens when Node runs it? Your turn: pause the video and predict.

01:29 Node stops before printing anything: ReferenceError, delay is not defined.

01:36 The caret points at the delay in the loop header.

01:41 Python runs its version happily. In Python, the loop assigns each item to delay, and assignment creates the name. JavaScript keeps two steps apart: const or let declares a name, and an assignment only fills in a name that already exists.

01:58 Here, delay was never declared.

02:02 Under JavaScript’s older rules, called sloppy mode, that isn’t an error. Put the loop inside a function, in an old-style script, to see the harm. Same loop, now wrapped in a function and called once.

02:17 Python keeps delay inside its function. Sloppy JavaScript makes delay a global, so the name leaks out to the whole program. Strict mode refuses, with the error you saw.

02:31 ES modules, which your project gets from "type": "module", always run in strict mode. Old-style scripts without it, and the REPL, keep the sloppy rules.

02:42 So the fix is to declare delay, right in the loop header.

02:49 Put const in that slot, the way JavaScript developers write it. But a const can’t be reassigned, and delay takes three values, one per pass.

02:58 So does this loop run now, or does const stop it? Your turn: pause the video and predict.

03:11 It runs, and Node prints the same three delays as Python.

03:17 Here’s why. Python reuses one name, delay, and rebinds it on every pass. JavaScript creates a fresh delay on every pass instead, and sets it once.

03:30 The first holds 4. The second, a new variable, holds 0. The third holds 12. Nothing is ever reassigned, so const has no reason to complain. You could write let, and it would still work.

03:48 But JavaScript developers reach for const when the body never reassigns the variable.

03:55 You’ve ported the first loop of the night-bus report. So here’s the rule: loop with for...of, and always declare the loop variable, with const unless the body reassigns it.

04:08 The same loop works on a string, one character per pass, as in Python. And in a module, leaving out the declaration is an error, not a silent leak. Next up is a text lesson, Telling for...of and for...in Apart.

04:26 There, you’ll find out why the intro’s loop printed zero, one, two, and what that loop is for.

Become a Member to join the conversation.