Learn how to build and design websites with our tutorials.

JavaScript Functions Tutorial

View Tutorial Contents


What Is A JavaScript Function?

A Javascript function is a block of code that is made so that it performs a particular task when it is invoked, aka called upon. A Javascript is invoked when an event occurs. An event is when the web browser does something or when a user does something.

JavaScript functions can be referenced by name from anywhere in JavaScript as many times as you want. This saves you time by not having to rewrite a lot of the same JavaScript to perform tasks.

In JavaScript, functions are considered and treated as values. This means that they can be assigned to variables, changed and stored in arrays just like any other value.

JavaScript functions can also be defined within another function.

Defining JavaScript Functions

JavaScript functions are defined with the function keyword.

There are several ways to define JavaScript functions.


JavaScript Function Declarations

One method used to create a function is a Function Declaration. The basic syntax is shown below.


function functionName(parameter1, parameter2, parameter3, ...) {
    // code to be executed
}

The function keyword defines the function and is followed by the name of the function immediately followed by parenthesis. Next are curly brackets that contain the code that is to be executed.

This type of function is called a named function because the function has a name.

Declared functions are not executed immediately, they must be invoked (called upon).

To call a function, simply reference the name of the function, immediately followed by parenthesis.

The example below shows the syntax to call upon the function within the JavaScript code.


function functionName(parameter1, parameter2, parameter3, ...) {
    // code to be executed
}

functionName();

The example below is of a declared function that is called upon with the use of the onclick event within the <button> tag. Clicking the button calls the function, which displays an alert box with the message "Hello".


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<button onclick="clickButton()">Click Here</button>

<script>

function clickButton(){
	alert("Hello");
}

</script>
</body>
</html>

Click the button below to call the function.

The example below invokes the function within the JavaScript.


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

function clickButton(){
	alert("Hello");
}
	
clickButton();

</script>
</body>
</html>

The parenthesis that immediately follow the named function allow you to pass values as arguments into the function.

The example below passes an argument to the function. The function will display an alert box with the message "Hello John".


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

function clickButton(name){
	alert("Hello " + name);
}
	
clickButton("John");

</script>
</body>
</html>


JavaScript Function Expressions

Another method that can be used to define a function is to create a function expression, also called an anonymous function because the function does not have a name. A function expression assigns an anonymous function to a variable.

Below is the syntax for creating a function expression.


<script>

var variableName = function(){
	// code to be executed
};

</script>

Notice that the syntax example ends with a semicolon (;). That is because this is a JavaScript statement and statements need to end in a semicolon. There is no need to end blocks of code, the part that begins and ends with curly brackets ({executable code...}) , with a semicolon.

The example below is of a function expression that is called upon by referencing the variable name immediately followed by parenthesis.


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var sayHello = function(){
	alert("Hello");
};

sayHello();

</script>
</body>
</html>

The function expression above will display an alert box with the message "Hello".


JavaScript Named Function Expressions

Another method that can be used to define a function is a named function expression. A named function expression assigns a named function to a variable.

The syntax for creating a named function expression is shown below.


var variableName = function functionName(){
	// code to be executed
};

The example below is of a named function expression that is called upon by referencing the variable name immediately followed by parenthesis.


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

var sayBye = function bye(){
  alert("Bye");
};

sayBye();

</script>
</body>
</html>

The named function expression above will display an alert box with the message "Bye".


JavaScript Function() Constructors

A function can also be defined using the constructor Function() along with the new operator.

The syntax to that is used to define a function using Function() constructor along with the new operator.


var variableName = new Function(argument1, argument2, ..., "Function Body...");

The example below is of a JavaScript Function() constructor that is referenced by the variable name immediately followed by parenthesis.


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

<meta charset="utf-8" />
<title>Your Page Title</title>
<style>
</style>
</head>
<body>

<script>

">var hi = new Function('alert("Hi Again!");');

hi();

</script>
</body>
</html>

The JavaScript Function() constructor above will display an alert box with the message "Hi Again!".