The fundamental building block of programming is a function. It simplifies coding exercises and tasks because you can reuse them repeatedly with repeating codes. To succeed in web and application development, you need to understand these fundamental ideas fully.

Read on to learn more about JavaScript functions.

Understanding JavaScript Function

Imagine a restaurant where every customer receives a friendly greeting. The salutation reads as follows: “Welcome and rest assured that you will have a good time. We appreciate you choosing us to sate your hunger.”

Think about how this restaurant serves 100 customers daily and how you need to create a welcoming application for them. If you are unfamiliar with functions, you may be preparing to write a specific line of code 100 times to get it right because you have 100 clients.

The simplest way to complete this task is by using functions, even though a for loop and if statements would be required to make it much more optimized.

In JavaScript, a function is a collection of statements that, when called, carry out an action or compute a value for an unlimited time.

JavaScript Function Syntax and Features

In JavaScript, a function is initialized by using the function keyword, followed by the custom function name, parentheses(), and curly brackets.

If the function requires them, the parameters stay in parentheses, and the method and execution plan are in curly brackets.

function anyName(parameter1, parameter2 {
  // code to be executed
}

We’ll employ anyName() to call this function. It should be noted that any function that accepts arguments must also accept parameters. A function argument is a value supplied to obtain the function’s output. You can address it an independent variable.

For instance, since the function above has two parameters, calling it will require two arguments.

anyName(arg1, arg2)

So let’s embed this function example in an HTML file and view the results in a browser.

On your VSC, create an index.html file. Enter the following code:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>

<p>This example calls a function that performs an addition operation and returns the result:</p>

<p id="dmo"></p>

<script>

// the function below will return the value of p1 and p2

function myFunction(p1, p2) {
  return p1 + p2;
}

// Output code, the call to function requires arguments since the function has parameters 

document.getElementById("dmo").innerHTML = myFunction(14, 23);
</script>

</body>
</html>

Ensure codes are entered correctly, then right-click and select open with a browser to view code output.

Alternatively, if you want to run this in your VSC environment, as we have in previous studies, create an index.js file and enter the following code:

// Function to add p1 and p2
function add_function(p1, p2) {
    var and = p1 + p2;
    console.log(ans)
  }


// call to  Function 
  add_function(6, 4)

To run code, click f5 on your computer and always select the node debugger mode.

What is Function Return?

A function’s return statement provides quick access to the answer you need to move on to the next problem. When another caller makes a request, a function responds by processing the request and returning a value to the caller. 

Let’s say you are working on a task that always demands the value of multiple prime numbers to execute.

// initializing x as a variable holding the returned value of myfunction 
let x = myFunction(3, 5); 

 
function myFunction(a, b) {
  return a + b;            
}
// the return value here is stored in x
console.log(x)

// we call the x into action in our next line of code where it checks the mod value
if (x % 2 == 1){
let c = x%2
    console.log(c, "undertaking was successful")

}

else{
    console.log("failed, changing the argument virtues might help")
}

Note: Reusing code is made simple when you use functions. You only need to define the function code once and use it many times. The time it would take to write new codes from scratch is saved by using functions, which are short statements you can use whenever the need arises.

The same code can be executed more than once with different arguments to produce different results. Keep in mind that variables declared inside a JavaScript function are regarded as “local” to that function and can only be accessed from within the function.

Conclusion

In this article, you learned about functions and some of their features. You will get better when you practice more, so ensure you create as many functions as possible. In our next article, we will look at JavaScript objects.

Categorized in:

JavaScript