From b1760efed889f79cfefe603de9f444ad0152505e Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Wed, 20 Nov 2024 13:37:03 -0800 Subject: [PATCH] chore(curriculum): adding JS loops review page (#57248) Co-authored-by: Sem Bauke --- client/i18n/locales/english/intro.json | 3 +- .../6723c837cd3276aa73e6da25.md | 81 +++++++++++++++++++ 2 files changed, 83 insertions(+), 1 deletion(-) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index c4607862a24..fc50b720b52 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2791,7 +2791,8 @@ "review-javascript-loops": { "title": "JavaScript Loops Review", "intro": [ - "Review the JavaScript Loops concepts to prepare for the upcoming quiz." + "Before you are quizzed on the different JavaScript loops, you first need to review.", + "Open up this page to review the for...of loop, while loop, break and continue statements and more." ] }, "quiz-javascript-loops": { diff --git a/curriculum/challenges/english/25-front-end-development/review-javascript-loops/6723c837cd3276aa73e6da25.md b/curriculum/challenges/english/25-front-end-development/review-javascript-loops/6723c837cd3276aa73e6da25.md index 53480367918..9f409355672 100644 --- a/curriculum/challenges/english/25-front-end-development/review-javascript-loops/6723c837cd3276aa73e6da25.md +++ b/curriculum/challenges/english/25-front-end-development/review-javascript-loops/6723c837cd3276aa73e6da25.md @@ -9,7 +9,88 @@ dashedName: review-javascript-loops Review the concepts below to prepare for the upcoming quiz. +## Working with Loops +- **`for` Loop**: This type of loop is used to repeat a block of code a certain number of times. This loop is broken up into three parts: initialization statement, condition, and the increment/decrement statement. The initialization statement is executed before the loop starts. It is typically used to initialize a counter variable. The condition is evaluated before each iteration of the loop. An iteration is a single pass through the loop. If the condition is `true`, the code block inside the loop is executed. If the condition is `false`, the loop stops and you move on to the next block of code. The increment/decrement statement is executed after each iteration of the loop. It is typically used to increment or decrement the counter variable. + +```js +for (let i = 0; i < 5; i++) { + console.log(i); +} +``` + +- **`for...of` Loop**: This type of loop is used when you need to loop over values from an iterable. Examples of iterables would be arrays, and strings. + +```js +const numbers = [1, 2, 3, 4, 5]; + +for (const num of numbers) { + console.log(num); +} +``` + +- **`for...in` Loop**: This type of loop is best used when you need to loop over the properties of an object. This loop will iterate over all enumerable properties of an object, including inherited properties and non-numeric properties. + +```js +const fruit = { + name: 'apple', + color: 'red', + price: 0.99 +}; + +for (const prop in fruit) { + console.log(fruit[prop]); +} +``` + +- **`while` Loop**: This type of loop will run a block of code as long as the condition is `true`. + +```js +let i = 5; + +while (i > 0) { + console.log(i); + i--; +} +``` + +- **`do...while` Loop**: This type of loop will execute the block of code at least once before checking the condition. + +```js +let userInput; + +do { + userInput = prompt("Please enter a number between 1 and 10"); +} while (Number(userInput) < 1 || Number(userInput) > 10); + +alert("You entered a valid number!"); +``` + +## `break` and `continue` Statements + +- **Definition**: A `break` statement is used to exit a loop early, while a `continue` statement is used to skip the current iteration of a loop and move to the next one. + +```js +// Example of break statement +for (let i = 0; i < 10; i++) { + if (i === 5) { + break; + } + console.log(i); +} + +// Output: 0, 1, 2, 3, and 4 + +// Example of continue statement +for (let i = 0; i < 10; i++) { + if (i === 5) { + continue; + } + console.log(i); +} + +// Output: 0, 1, 2, 3, 4, 6, 7, 8, and 9 +``` # --assignment--