JS Learning Area updates: looping code #10645

wbamberg · 2021-11-19T20:15:30Z

Part of #10337.

This PR updates the "Looping code" part of the JS Learning Area: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code.

The main thing here is to:

introduce for...of as the recommended way to iterate through a collection
briefly introduce map() and filter()
make sure all worked examples which can/should used for...of are doing so.

It's a bit tricky because we have already introduced for...of, map(), and filter() in the Arrays page, but I thought it's going to be easiest for readers just to present it again here.

I've also made a tiny update to the https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops page, to reflect updates to the learning area in mdn/learning-area#421.

github-actions · 2021-11-19T20:17:14Z

Preview URLs

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Learn/JavaScript/Building_blocks/Looping_code
Title: Looping code
on GitHub

No new external URLs

URL: /en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Loops
Title: Test your skills: Loops
on GitHub

No new external URLs

(this comment was updated 2021-11-27 05:25:39.480082)

hamishwillee · 2021-11-22T05:55:20Z

files/en-us/learn/javascript/building_blocks/looping_code/index.md

@@ -297,15 +428,17 @@ btn.addEventListener('click', function() {
  let searchName = input.value.toLowerCase();


hamishwillee · 2021-11-22T05:56:27Z

Is @teoli2003 on holiday? I'm hesitant to review if you can get someone with more expertise.

wbamberg · 2021-11-24T00:53:02Z

Is @teoli2003 on holiday? I'm hesitant to review if you can get someone with more expertise.

It's up to you, I'm happy for you to review this if you want, I'm sure you have plenty of expertise. Also this is introductory so reviewing for clarity and consistency are particularly important, and there shouldn't be anything technically very complex here.

hamishwillee · 2021-11-25T23:49:06Z

files/en-us/learn/javascript/building_blocks/looping_code/index.md

+2. Assign it to the variable `cat` and then run the code between the curly brackets `{}`.
+3. Get the next item, and repeat (2) until you've reached the end of the collection.
+
+Note that we have to use `let` for the `cat` variable, because we're assigning it to a new item each time we go round the loop.


Is this true? My understanding was that you could use const, let, or var because the scope of cat (for let and const) is within the loop. You can't use const if you then want to modify cat in the loop.

If so it might be worth modifying item 2 above. This kind of implies the variable is created once and reassigned to a new value on each loop. I think that is true for var, but not for let.

You're right! Apparently I don't understand const either!

hamishwillee · 2021-11-26T00:20:17Z

@wbamberg Really good. I am happy to merge as is except for my comment above #10645 (comment)

In terms of other things I noticed that we might want to look at

up the top "keeping me in the loop" example is all about the normal for loop and we don't mention for...of. It all makes sense, but you might want to consider introducing the concept earlier.
The discussion of while/do and do/while is all about the syntax and they are kind of presented as equal alternatives. My understanding is that the difference is that in one syntax the loop is always executed at least once while in the other it is only executed on the condition. That's a significant thing to note because it affects when you would choose them. Perhaps I'm thinking of another programming language :-).

Last of all, I did inject some layout changes which you can ignore. I just do this because shorter lines are easier to review in github diffs. I tend to break on sentences.

hamishwillee · 2021-11-26T00:20:53Z

files/en-us/learn/javascript/building_blocks/looping_code/index.md

-Loops, loops, loops. As well as being associated with [popular breakfast cereals](https://en.wikipedia.org/wiki/Froot_Loops), [roller coasters](https://en.wikipedia.org/wiki/Vertical_loop), and [musical production](<https://en.wikipedia.org/wiki/Loop_(music)>), they are also a critical concept in programming. Programming loops are all to do with doing the same thing over and over again, which is termed **iteration** in programming speak.
+Loops, loops, loops.
+As well as being associated with [popular breakfast cereals](https://en.wikipedia.org/wiki/Froot_Loops), [roller coasters](https://en.wikipedia.org/wiki/Vertical_loop), and [musical production](<https://en.wikipedia.org/wiki/Loop_(music)>), they are also a critical concept in programming.
+Programming loops are all to do with doing the same thing over and over again, which is called **iteration** in "programming speak".


FYI this is an actual minor change.

wbamberg · 2021-11-26T00:42:19Z

@wbamberg Really good. I am happy to merge as is except for my comment above #10645 (comment)

In terms of other things I noticed that we might want to look at

up the top "keeping me in the loop" example is all about the normal for loop and we don't mention for...of. It all makes sense, but you might want to consider introducing the concept earlier.

Yeah, I wasn't sure what to do about that. I couldn't really see how to adapt it to make it more for...of friendly. I rationalized keeping it as is by thinking that for..of loops have the same things (initialization, increment, condition), it's just they're not exposed. But maybe it would be better without all that farmer stuff?

The discussion of while/do and do/while is all about the syntax and they are kind of presented as equal alternatives. My understanding is that the difference is that in one syntax the loop is always executed at least once while in the other it is only executed on the condition. That's a significant thing to note because it affects when you would choose them. Perhaps I'm thinking of another programming language :-).

Yes, good point. I didn't look too closely at those, but while I am here it's worth adding that.

hamishwillee · 2021-11-26T00:50:34Z

But maybe it would be better without all that farmer stuff?

I would. I'm not sure it adds anything over what is in the "why bother" section. Also someone is going to complain about the farmer being a "he" one day.

wbamberg · 2021-11-27T03:25:51Z

OK, I have:

fixed for...of loops to use const: ddc7851
removed the farmer stuff (also opted to show all the JS for the inital "drawing circles" example, I thought it was helpful): bd1a60d
clarified that a do...while loop always runs at least once (it did actually say this, but I rewrote it to make is more obvious). I also updated the examples to be complete runnable snippets: 1348ae9

hamishwillee

Yes, heaps better. Particularly the removal of the farmer stuff at the top - that just felt like wasted time.

I was going to make a comment that we should also update "Which loop type should you use?" to mention that you use "do...while` loop if you have to run it once. But not sure that was needed - what is there now captures the flavour/intent.

JS Learning Area updates: looping code

6772686

wbamberg requested a review from a team as a code owner November 19, 2021 20:15

wbamberg requested review from teoli2003 and removed request for a team November 19, 2021 20:15

github-actions bot added the Content:Learn Learning area docs label Nov 19, 2021

wbamberg mentioned this pull request Nov 20, 2021

Update JS Loop tasks to include for...of mdn/learning-area#421

Merged

Update Test your skills page on loops

7266537

hamishwillee reviewed Nov 22, 2021

View reviewed changes

let->const

724003a

hamishwillee reviewed Nov 25, 2021

View reviewed changes

Mostly just very minor layout changes

931ba19

hamishwillee reviewed Nov 26, 2021

View reviewed changes

wbamberg added 3 commits November 26, 2021 17:39

Use const for for...of loop variable

ddc7851

Remove farmer

bd1a60d

Clarify difference between while and do...while loops

1348ae9

wbamberg added 2 commits November 26, 2021 21:21

Fix a typo

0297ba0

let->const

61303a6

hamishwillee approved these changes Nov 29, 2021

View reviewed changes

hamishwillee merged commit 7858327 into mdn:main Nov 29, 2021

wbamberg deleted the js-la-update-loops branch October 15, 2022 17:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JS Learning Area updates: looping code #10645

JS Learning Area updates: looping code #10645

wbamberg commented Nov 19, 2021 •

edited

Loading

github-actions bot commented Nov 19, 2021 •

edited

Loading

hamishwillee Nov 22, 2021

hamishwillee commented Nov 22, 2021

wbamberg commented Nov 24, 2021

hamishwillee Nov 25, 2021

hamishwillee Nov 25, 2021

wbamberg Nov 26, 2021

hamishwillee commented Nov 26, 2021

hamishwillee Nov 26, 2021

wbamberg commented Nov 26, 2021 •

edited

Loading

hamishwillee commented Nov 26, 2021

wbamberg commented Nov 27, 2021

hamishwillee left a comment

		@@ -297,15 +428,17 @@ btn.addEventListener('click', function() {
		let searchName = input.value.toLowerCase();

JS Learning Area updates: looping code #10645

JS Learning Area updates: looping code #10645

Conversation

wbamberg commented Nov 19, 2021 • edited Loading

github-actions bot commented Nov 19, 2021 • edited Loading

Preview URLs

Flaws

External URLs

hamishwillee Nov 22, 2021

Choose a reason for hiding this comment

hamishwillee commented Nov 22, 2021

wbamberg commented Nov 24, 2021

hamishwillee Nov 25, 2021

Choose a reason for hiding this comment

hamishwillee Nov 25, 2021

Choose a reason for hiding this comment

wbamberg Nov 26, 2021

Choose a reason for hiding this comment

hamishwillee commented Nov 26, 2021

hamishwillee Nov 26, 2021

Choose a reason for hiding this comment

wbamberg commented Nov 26, 2021 • edited Loading

hamishwillee commented Nov 26, 2021

wbamberg commented Nov 27, 2021

hamishwillee left a comment

Choose a reason for hiding this comment

wbamberg commented Nov 19, 2021 •

edited

Loading

github-actions bot commented Nov 19, 2021 •

edited

Loading

wbamberg commented Nov 26, 2021 •

edited

Loading