A JavaScript function is a block of code designed to perform a particular task.
A JavaScript function is executed when "something" invokes it [calls it].
Example
// Function to compute the product of p1 and p2
function myFunction[p1, p2] {
return p1 * p2;
}
Try it Yourself »
JavaScript Function Syntax
A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses [].
Function names can contain letters, digits, underscores, and dollar signs [same rules as variables].
The parentheses may include parameter names separated by commas:
[parameter1, parameter2, ...]
The code to be executed, by the function, is placed inside curly brackets: {}
function name[parameter1, parameter2, parameter3] {
// code to be executed
}
Function parameters are listed inside the parentheses [] in the function definition.
Function arguments are the values received by the function when it is invoked.
Inside the function, the arguments [the parameters] behave as local variables.
Function Invocation
The code inside the function will execute when "something" invokes [calls] the function:
- When an event occurs [when a user clicks a button]
- When it is invoked [called] from JavaScript code
- Automatically [self invoked]
You will learn a lot more about function invocation later in this tutorial.
Function Return
When JavaScript reaches a return statement, the function will stop executing.
If the function was invoked from a statement, JavaScript will "return" to execute the code after the invoking statement.
Functions often compute a return value. The return value is "returned" back to the "caller":
Example
Calculate the product of two numbers, and return the result:
let x = myFunction[4, 3]; // Function is called, return value will end up in x
function myFunction[a, b] {
return a * b;
// Function returns the product of a and b
}
The result in x will be:
12
Try it Yourself »
Why Functions?
You can reuse code: Define the code once, and use it many times.
You can use the same code many times with different arguments, to produce different results.
Example
Convert Fahrenheit to Celsius:
function toCelsius[fahrenheit] {
return [5/9] * [fahrenheit-32];
}
document.getElementById["demo"].innerHTML = toCelsius[77];
Try it Yourself »
The [] Operator Invokes the Function
Using the example above, toCelsius refers to the function object, and toCelsius[] refers to the function result.
Accessing a function without [] will return the function object instead of the function result.
Example
function toCelsius[fahrenheit] {
return [5/9] * [fahrenheit-32];
}
document.getElementById["demo"].innerHTML = toCelsius;
Try it Yourself »
Functions Used as Variable Values
Functions can be used the same way as you use variables, in all types of formulas, assignments, and calculations.
Example
Instead of using a variable to store the return value of a function:
let x = toCelsius[77];
let text = "The temperature is " + x + " Celsius";
You can use the function directly, as a variable value:
let text = "The temperature is " + toCelsius[77] + " Celsius";
Try it Yourself »
You will learn a lot more about functions later in this tutorial.
Local Variables
Variables declared within a JavaScript function, become LOCAL to the function.
Local variables can only be accessed from within the function.
Example
// code here can NOT use carName
function myFunction[] {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Try it Yourself »
Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.
Local variables are created when a function starts, and deleted when the function is completed.
Test Yourself With Exercises
Exercise:
Execute the function named myFunction.
function myFunction[] {
alert["Hello World!"];
}
;
Start the Exercise
What is a best practice for placement functions in JavaScript?
What counts better practice, put functions before invocation or after?
//Invocation BEFORE declaration
const myValue = getMyValue[];
function getMyValue[] {
return 'Hello World!';
}
OR
//Invocation AFTER declaration
function getMyValue[] {
return 'Hello World!';
}
const myValue = getMyValue[];
There many things that can be done "as I prefer", but for most of them exists best practice, or pros and cons for the decision.
As a cons of a second method, I can say that if all functions are on top, then when I open a file, it takes more time to understand briefly what the file supposed to do, because the "logical flow" exist at the bottom of the file and I need to scroll.