JavaScript Functions

A function is a group of statements that perform specific tasks and can be kept and maintained separately form main program. Functions provide a way to create reusable code packages which are more portable and easier to debug.

Defining and Calling a Function

The declaration of a function start with the function keyword, followed by the name of the function you want to create, followed by parentheses i.e. () and finally place your function's code between curly brackets {}.

Syntax-:

function functionName() {
    // Code to be executed
}

Example of Code

<script>
    // Defining function
    function sayHello() {
        document.write("Hello, welcome to this website!");
    }  
    // Calling function
    sayHello(); // Prints: Hello, welcome to this website!
</script>

Output

Adding Parameters to Functions

You can specify parameters when you define your function to accept input values at run time. The parameters work like placeholder variables within a function; they're replaced at run time by the values (known as argument) provided to the function at the time of invocation.

Syntax-:
function functionName(parameter1, parameter2, parameter3) {
    // Code to be executed
}

Example of Code

<script>
    // Defining function
    function displaySum(num1, num2) {
        var total = num1 + num2;
        document.write(total);
    }
    // Calling function
    displaySum(6, 20); // Prints: 26
    document.write("<br>");
    displaySum(-5, 17); // Prints: 12
</script>

Output

Returning Values from a Function

A function can return a value back to the script that called the function as a result using the return statement. The value may be of any type, including arrays and objects.

The return statement usually placed as the last line of the function before the closing curly bracket and ends it with a semicolon.

<script>
    // Defining function
    function getSum(num1, num2) {
        var total = num1 + num2;
        return total;
    }
    // Displaying returned value
    document.write(getSum(6, 20) + "<br>"); // Prints: 26
    document.write(getSum(-5, 17)); // Prints: 12
</script>

Output

Working with Function Expressions

The syntax that we've used before to create functions is called function declaration. There is another syntax for creating a function that is called a function expression.

<script>
    // Function Declaration
    function getSum(num1, num2) {
        var total = num1 + num2;
        return total;
    }
    document.write(getSum(2, 3) + "<br>"); // Prints: 5
    // Function Expression
    var getSum = function(num1, num2) {
        var total = num1 + num2;
        return total;
    }
    document.write(getSum(4, 6)); // Prints: 10
</script>

Output

Understanding the Variable Scope

However, you can declare the variables anywhere in JavaScript. But, the location of the declaration determines the extent of a variable's availability within the JavaScript program i.e. where the variable can be used or accessed. This accessibility is known as variable scope.

<script>
    // Defining function
    function greetWorld() {
        var greet = "Hello World!";
        document.write(greet);
    }
    greetWorld(); // Prints: Hello World!
    document.write(greet); // Uncaught ReferenceError: greet is not defined
</script>

Output