JavaScript Functions

Functions are one of the fundamental building blocks in JavaScript. It is a block of code designed to perform a particular task.

In this tutorial, you will learn about JavaScript function with the help of examples.

JavaScript provides many built-in functions such as alert() and console.log().

In this tutorial, you will learn how to develop custom functions.

A function is declared using the function keyword.

A function is a block of code that performs a specific task.

Contents hide
Syntax
Function call
Syntax
Example
Advantage of JavaScript function

Syntax

function name(parameter1, parameter2, parameter3) {
  // code to be executed
//return value
}

Before we use a function, we need to define it.

A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().

The code to be executed, by the function, is placed inside curly brackets: {}

The body of function is written within {}.

JavaScript Functions can have 0 or more arguments. The parentheses may include parameter names separated by commas: (parameter1, parameter2, …)

The function name must be a valid JavaScript identifier. Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).

It is better to write a descriptive name for your function. For example, if a function is used to add two numbers, you could name the function add or addNumbers.

Inside the function, the arguments (the parameters) behave as local variables.

Function arguments are the values received by the function when it is invoked.

Function can also return value using return keyword. You will learn about returning value from function in next chapter.

Function call

It is also known as function invocation.

To use a function, you need to call it.

To call a function, you use its name followed by arguments enclosing in parentheses as shown below:

Syntax

functionName(arguments);

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Function Example</title>
</head>

<body>
    <script>
        function msg() {
            alert("hello! this is message");
        }  
    </script>
    <input type="button" onclick="msg()" value="call function" />
</body>

</html>

Advantage of JavaScript function

  1. Code reusability: Define the code once, and use it many times. You can call a function several times so it save coding.
  2. Functions allow a programmer to divide a big program into a number of small and manageable functions.
  3. Dividing a complex problem into smaller chunks makes your program easy to understand and reusable.
  4. Less coding: You don’t need to write many lines of code each time to perform a common task. You can use the same code many times with different arguments, to produce different results.
  5. Function increases readability.

In next chapter you will learn about how to return value from function and how to pass arguments in function.