From 4fffd22107625126fe6a1ecbd98d34d951f37df1 Mon Sep 17 00:00:00 2001 From: Clarence Bakosi Date: Thu, 30 Oct 2025 11:23:38 +0100 Subject: [PATCH] feat(curriculum): Add interactive examples to What Are Arrow Functions, and How Do They Work (#63274) Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> --- .../673284d5e52ef81a2169b097.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/curriculum/challenges/english/blocks/lecture-working-with-functions/673284d5e52ef81a2169b097.md b/curriculum/challenges/english/blocks/lecture-working-with-functions/673284d5e52ef81a2169b097.md index d3f316ac4ee..ae0cca8f452 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-functions/673284d5e52ef81a2169b097.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-functions/673284d5e52ef81a2169b097.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-arrow-functions-and-how-do-they-work --- -# --description-- +# --interactive-- In the previous lesson, you learned how to work with functions, which are reusable pieces of code that help make your code more modular, easier to maintain, and more efficient. All previous examples used the regular function syntax, like this: @@ -54,6 +54,8 @@ function greetings name console.log("Hello, " + name + "!"); These types of one line functions only work if you are using the arrow function syntax. Another key concept is the `return` statement. Here is an example of using the arrow function syntax to calculate the area: +:::interactive_editor + ```js const calculateArea = (width, height) => { const area = width * height; @@ -63,14 +65,22 @@ const calculateArea = (width, height) => { console.log(calculateArea(5, 3)); // 15 ``` +::: + We are creating a variable inside the function called `area` and then returning that variable. But we could clean up our code a bit and return the calculation itself: +:::interactive_editor + ```js const calculateArea = (width, height) => { return width * height; }; + +console.log(calculateArea(5, 3)); // 15 ``` +::: + If you tried to remove the curly braces and place the calculation on the same line, then you would get an `Uncaught SyntaxError: Unexpected token 'return'` message: ```js