From b07b75ba0ebcb44755d9f22f3153e2d006679466 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Giftea=20=E2=98=95?= Date: Fri, 31 Oct 2025 20:32:54 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to Map method lesson (#63390) --- .../673362a34edda41dedf87623.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md b/curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md index 16db0b3532a..b00d0b1cf7f 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-higher-order-functions-and-callbacks/673362a34edda41dedf87623.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-is-the-map-method-and-how-does-it-work --- -# --description-- +# --interactive-- The `map` method is a powerful and widely used function in JavaScript that operates on arrays. It is designed to create a new array by applying a given function to each element of the original array. @@ -13,6 +13,8 @@ This method does not modify the original array but instead returns a new array c Here is an example of using the `map` method on an array of numbers: +:::interactive_editor + ```js const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((num) => num * 2); @@ -20,6 +22,8 @@ console.log(numbers); // [1, 2, 3, 4, 5] console.log(doubled); // [2, 4, 6, 8, 10] ``` +::: + To create a new array where each number is doubled, we are using the `map` method. The `map` method accepts a callback function where the function is called on every single element in the array. In this case, each number in the array will be multiplied by `2`. The result will be a new array of the numbers `2,4,6,8,10`. @@ -28,6 +32,8 @@ The callback function can accept up to three arguments. The first argument is the current element being processed. +:::interactive_editor + ```js const numbers = [3, 4, 5, 6, 7].map((element) => { console.log("Element:", element); @@ -35,8 +41,12 @@ const numbers = [3, 4, 5, 6, 7].map((element) => { }); ``` +::: + The second argument is the index of the current element being processed. +:::interactive_editor + ```js const numbers = [3, 4, 5, 6, 7].map((element, index) => { console.log("Element:", element); @@ -45,8 +55,12 @@ const numbers = [3, 4, 5, 6, 7].map((element, index) => { }); ``` +::: + The third argument is the array where `map` is being called on. +:::interactive_editor + ```js const numbers = [3, 4, 5, 6, 7].map((element, index, array) => { console.log("Element:", element); @@ -56,6 +70,8 @@ const numbers = [3, 4, 5, 6, 7].map((element, index, array) => { }); ``` +::: + Understanding and effectively using the `map` method can significantly improve your ability to work with arrays in JavaScript. In future lessons, we'll dive deeper into more advanced uses of `map` and explore how it can be a powerful tool for building dynamic and efficient programs. # --questions--