Function in JavaScript

In this article, you’ll learn about what is Functions , why we use function and when to use function in JavaScript and more.

In programming world, you may required some piece of code again and again while developing software. It’s not good idea to write same code throughout different parts of program.

Function are introduce to overcome this problem, which saves your time from copying, pasting, and repeating the same code throughout different parts of your program.

Instead of looking for the different parts where your code could be, you only have to look at one particular place which makes your code more readable.

JavaScript also has a huge number of inbuilt functions. For example, Math.sqrt() is a function to calculate the square root of a number.

Here, you learn about how can you create an user-defined functions. A function have mainly three parts. Let’s understand each of them one by one.

Function Declaration

To create a function we can use a function declaration.

It looks like this:

function areaofsquare(parameter1,parameter2,..) // function declaration 
 {
      //block of code
 }
areaofsquare();  //function call

Let’s understand

• We declare the function with the keyword function. This keyword tells JavaScript that we are trying to define a function.
• In the next step, you give the name to function as per your convenience. Remember in JavaScript they are case sensitive the best is to use camelCase.
• The body of function is written within {}

Calling a Function

In the above program, we have declared a function named areaofsquare(). To use that function, we need to call it.

Here’s how you can call the above areaofsquare() function.

Parameters vs Arguments

• Parameters are variables listed as a part of the function definition.
• Arguments are values passed to the function when it is invoked.

An argument is the value of a parameter.

Here a and b are parameters and values passed (4, 2) are the arguments.

Function Return

The return statement can be used to return the value to a function call.

The return statement denotes that the function has ended. Any code after return is not executed.

function areaofsquare(a) 
 {
      return a*a;   //25
 }
areaofsquare(5); 

In above example, areaofsquare() will return a product of values of passed as argument. In above case which is 5 and result returned 25.

If nothing is returned, the function returns an undefined value.

Q. Write an Program To Sum of Two Numbers

// program to add two numbers
// declaring a function
function add(a, b) {
    return a + b;
}

// take input from the user
let number1 = parseFloat(prompt("Enter first number: "));
let number2 = parseFloat(prompt("Enter second number: "));

// calling function
let result = add(number1,number2);

// display the result
console.log("The sum is " + result);

Nested Functions

In JavaScript, a function can have one or more inner functions. These nested functions are in the scope of outer function. Inner function can access variables and parameters of outer function. However, outer function cannot access variables defined inside inner functions.

function ShowMessage(firstName)
{
    function SayHello() {
        console.log("Hello " + firstName);
    }

    return SayHello();
}

ShowMessage("Steve");

Function hoisting

In JavaScript, you can use a function before declaring it. Let’s understand

ShowMessage(); // a hoisting example

function ShowMessage{
    console.log('an hoisting example');
}

This feature is called hoisting.

Function hoisting is a mechanism that the JavaScript engine physically moves function declarations to the top of the code before executing them.

Having fun learning JavaScript!