Functions are a set of instructions that perform a specific action or calculate a specific value.
Function definition syntax:
function function_name([parameter [, ...]]){
// Instructions
}
A function definition begins with the function keyword followed by the name of the function. A function name follows the same rules as a variable name: it can only contain numbers, letters, underscores, and dollar signs ($), and must begin with a letter, underscore, or dollar sign.
The function name is followed by a list of parameters in parentheses. Even if the function has no parameters, then empty brackets just go. Then, in curly braces, comes the body of the function containing a set of instructions.
Let’s define the simplest function:
function hello(){
console.log("Hello Metanit.com");
}
This function is called hello(). It takes no parameters and all it does is print the string “Hello Metanit.com” to the browser console.
In order for the function to do its job, we need to call it. The general syntax for calling a function is:
function_name(parameters)
When calling, after the name of the called function, the list of parameters is indicated in brackets. If the function has no parameters, empty parentheses are specified.
For example, let’s define and call the simplest function:
<!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>easywptutorials.com function definition </title>
</head>
<body>
<script>
// function definition
function hello(){
console.log("Hello Metanit.com");
}
// function call
hello();
</script>
</body>
</html>
In this case, the function hello takes no parameters, so empty parentheses are specified when calling it:
hello();
Functions in JavaScript
A distinctive feature of functions is that they can be called multiple times in different places in the program:
// function definition
function hello(){
console.log("Hello Metanit.com");
}
// function call
hello();
hello();
hello();
Variables and constants as functions
Just as simple values (numbers, strings, etc.) are assigned to constants and variables, they can also be assigned to functions. Then, through such a variable or constant, you can call the function assigned to it:
<!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>easywptutorials.com function definition </title>
</head>
</head>
<body>
<script>
// function definition
function hello(){
console.log("Hello from Metanit.com");
}
// passing a reference to the hello function to the message constant
const message = hello;
message(); // we call the function, the reference to which is stored in the message constant
</script>
</body>
</html>
By assigning a function to a constant or variable:
const message = hello;
then we can call this function by the name of the constant/variable:
message();
We can also dynamically change the functions that are stored in a variable:
function goodMorning(){
console.log("Good morning");
}
function goodEvening(){
console.log("Good evening");
}
let message = goodMorning; // assign the goodMorning function to the message variable
message(); // Good morning
message = goodEvening; // change function in variable
message(); // Good evening
Anonymous functions
It is not necessary to give functions a specific name. You can use anonymous functions:
let message = function(){
console.log("Hello JavaScript");
}
message();