JavaScript function() call | Return value, declaration, parameters | Examples

Definition: A Javascript Function used to perform a particular task. For example, adding numbers, Multiplication, etc. Any Programming language function is just a piece of code designed to do some task and make it reusable.

The JavaScript function is executed on call. This means when the code needed this functionality then has to invoke it.

JavaScript function call

Syntax of Function

See below syntax of JavaScript function as parameters.

Any JavaScript function is declared with the function keyword, followed by a name and parentheses ().

Code is placed inside the curly { } brackets.

function name([param[, param[, ... param]]]) {
   statements
}
  • name: The function name. It could be whatever you want.
  • param: The parameters to be passed to the function. (optional)
  • statements: A code and logic for this function.

Javascript function examples

Let’s see some simple function examples:

AutoLoad function example

It defines a function called sayHello that takes no parameters.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function codeAddress() {
                alert('Hello Function');
            }
        // Auto load when page loaded
        window.onload = codeAddress;
        </script>
    </head>
    <body>
       <p> Javascript function example</p>
       
    </body>
</html>

Output: A alert message will popup after page load.

AutoLoad function example output

Function with Parameters/Arguments

Let’s see the example where passing a 2 number in function and show the result in the HTML document.

<!DOCTYPE html>
<html>
    <body>
        
        <h2>JavaScript Functions Example</h2>
        
        
        <p id="demo"></p>
        
        <script>
            function myFunction(no1, no2) {
                return no1 + no2;
            }
        //Passing the numbers to funciton
        document.getElementById("demo").innerHTML = myFunction(1, 6);
            </script>
        
    </body>
</html>

Output:

Function with Parameters Arguments output

JavaScript function call

A function will execute when it’s called. There are many ways to call a function in JavaScript’s html.

  • A click by users clicks a button (event occurs)
  • Called from JavaScript code
  • Automatically (self invoked)

Let’s see the example of the keyword JavaScript function call in HTML

On the click input button, the “sayHello()” function will call and print the value in the HTML document.

<html>
    <head>
        <script type = "text/javascript">
            function sayHello() {
                document.write ("Hello there!");
            }
        </script>
        
    </head>
    
    <body>
        <p>Click to call the function</p>
        <input type = "button" onclick = "sayHello()" value = "Say Hello">
    </body>
</html>

Output: Click on button see output and example.

Javascript Function Return value

The function can return a value, for that you have to write code inside a function. If you write a return statement in the function then the function will stop executing.

So, there is 2 thing can happen first Javascript function can return value or second stop the execution after a certain condition.

Let’s see the example of adding 2 numbers with return value and the return value is “returned” back to the “caller“. The function can return a string, number, boolean, etc type of values.

Let’s see the return Statement example

<!DOCTYPE html>
<html>
    <body>
        
        <h2>JavaScript multiplication Function</h2>
        
        <p id="demo"></p>
        
        <script>
            var x = myFunction(3, 3);
            document.getElementById("demo").innerHTML = x;
            
            function myFunction(a, b) {
                return a * b;
            }
        </script>
        
    </body>
</html>


Question: What is the Javascript function default value?

From ES6/ES2015, default parameters is in the language specification.

function read_file(file, delete_after = false) {
  // Code
}

Default function parameters allow formal parameters to be initialized with default values if no value or undefined is passed.

Question: What Javascript function declaration vs expression?

Answer: Just as Variable Declarations must start with “var”, Function Declarations must begin with “function”.

function myFunction(a, b) {
                return a * b;
            }

A JavaScript function can also be defined using an expression.

var x = function (a, b) {return a * b};

Source and More details: https://medium.com/@mandeep1012/function-declarations-vs-function-expressions-b43646042052

Error: What is JavaScript function not defined or undefined?

Answer: A very basic mistake can throw an error in JavaScript. One is not closing a script tag properly.

Wrong way

<script src="jQuery/jquery...." type="text/javascript"/>

Right Way

<script src="jQuery/jquery...." type="text/javascript"> </script>

Source: https://coderanch.com/t/647019/languages/basic-Javascript-function-defined

Question: Why Functions is needed?

Answer: There are several advantage of use of function, some are:-

  • Reuse code: Define the code once, and use it many times.
  • Get many results: Use different arguments, to produce different results.

Function defining rules

  • Function names can contain letters, digits, underscores, and dollar signs.
  • The name must start with a letter, underscore( _ ), or dollar( $ ) sign.
  • Function name which should be unique.
  • A list of parameters enclosed within parentheses and separated by commas.
  • All code (statement) should be enclosed within curly braces {}.

There is a lot to learn about JavaScript functions, we have covered the most important concepts in this tutorial.

Do comment if you have any doubt and suggestion with example on this tutorial.

Note: The All  Javascript function basics Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.