diff --git a/curriculum/challenges/english/blocks/review-javascript-functions/6723c5b8601a40a100bb59c9.md b/curriculum/challenges/english/blocks/review-javascript-functions/6723c5b8601a40a100bb59c9.md index cde2bd721b3..75f3b63d757 100644 --- a/curriculum/challenges/english/blocks/review-javascript-functions/6723c5b8601a40a100bb59c9.md +++ b/curriculum/challenges/english/blocks/review-javascript-functions/6723c5b8601a40a100bb59c9.md @@ -5,13 +5,15 @@ challengeType: 31 dashedName: review-javascript-functions --- -# --description-- +# --interactive-- ## JavaScript Functions - Functions are reusable blocks of code that perform a specific task. - Functions can be defined using the `function` keyword followed by a name, a list of parameters, and a block of code that performs the task. +:::interactive_editor + ```js function addNumbers(x, y, z) { return x + y + z; @@ -20,6 +22,8 @@ function addNumbers(x, y, z) { console.log(addNumbers(5, 3, 8)); // Output: 16 ``` +::: + - Arguments are values passed to a function when it is called. - A function call is the process of executing a function in a program by specifying the function's name followed by parentheses, optionally including arguments inside the parentheses. - When a function finishes its execution, it will always return a value. @@ -27,6 +31,8 @@ console.log(addNumbers(5, 3, 8)); // Output: 16 - The `return` keyword is used to specify the value to be returned from the function and ends the function execution. - Default parameters allow functions to have predefined values that will be used if an argument is not provided when the function is called. This makes functions more flexible and prevents errors in cases where certain arguments might be omitted. +:::interactive_editor + ```js const calculateTotal = (amount, taxRate = 0.05) => { return amount + (amount * taxRate); @@ -35,8 +41,12 @@ const calculateTotal = (amount, taxRate = 0.05) => { console.log(calculateTotal(100)); // Output: 105 ``` +::: + - Function Expressions are functions that you assign to variables. By doing this, you can use the function in any part of your code where the variable is accessible. +:::interactive_editor + ```js const multiplyNumbers = function(firstNumber, secondNumber) { return firstNumber * secondNumber; @@ -45,10 +55,14 @@ const multiplyNumbers = function(firstNumber, secondNumber) { console.log(multiplyNumbers(4, 5)); // Output: 20 ``` +::: + ## Arrow Functions - Arrow functions are a more concise way to write functions in JavaScript. +:::interactive_editor + ```js const calculateArea = (length, width) => { const area = length * width; @@ -58,9 +72,13 @@ const calculateArea = (length, width) => { console.log(calculateArea(5, 10)); // Output: "The area of the rectangle is 50 square units." ``` +::: + - When defining an arrow function, you do not need the `function` keyword. - If you are using a single parameter, you can omit the parentheses around the parameter list. +:::interactive_editor + ```js const cube = x => { return x * x * x; @@ -69,14 +87,20 @@ const cube = x => { console.log(cube(3)); // Output: 27 ``` +::: + - If the function body consists of a single expression, you can omit the curly braces and the `return` keyword. +:::interactive_editor + ```js const square = number => number * number; console.log(square(5)); // Output: 25 ``` +::: + ## Scope in Programming - **Global scope**: This is the outermost scope in JavaScript. Variables declared in the global scope are accessible from anywhere in the code and are called global variables.