JS Functions
A JavaScript function is an area of code that performs a certain task.
When “something” calls or invokes a JavaScript function, it is executed.
Example
// Function to compute the product of p1 and p2
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript Function Syntax
A JavaScript function is defined using the function keyword, a name, and parenthesis ().
Function names can include letters, figures, underscores, and dollar signs (the same rules apply as variables).
Parentheses may contain parameter names separated by commas: (parameter1, parameter2,…)
The code to be run by the function is enclosed in curly brackets: {}
function name(parameter1, parameter2, parameter3) {
// code to be executed
}
The function definition contains a list of function parameters enclosed by parentheses ().
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
When “something” invokes (calls) the function, the code inside will run:
- When an event takes place, such as a user clicking a button
- When JavaScript code invokes it
- Automatically (self invoked)
This tutorial will cover function invocation in great detail later on.
Function Return
JavaScript will terminate the function’s execution upon encountering a return statement.
JavaScript will “return” to run the code after the invoking statement if the function was called from a statement.
Functions often compute a return value. The return value is “returned” back to the “caller”:
Example
Perform the multiplication of two numbers and provide the outcome:
// Function is called, the return value will end up in x
let x = myFunction(4, 3);
function myFunction(a, b) {
// Function returns the product of a and b
return a * b;
}
Why Functions?
You can reuse code by using functions.
It is possible to write code that has multiple uses.
The same code can yield different outcomes if you use different arguments.
The () Operator
The function is called by the () operator:
Example
Fahrenheit to Celsius conversion:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius(77);
A function that is accessed with the wrong parameters may give the following error:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius();
A function is returned when it is accessed without the() symbol, not the function result:
Example
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
let value = toCelsius;
Note
The aforementioned examples demonstrate that toCelsius denotes the function object and toCelsius() denotes the function result.
Functions Used as Variable Values
Functions, like variables, can be utilized in any type of formula, assignment, or computation.
Example
Instead of using a variable to store a function’s return value:
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";
In following sections of this lesson, functions will be covered in great detail.
Local Variables
Declared variables inside of JavaScript functions are local to that function.
Access to local variables is restricted to the function itself.
Example
// code here can NOT use carName
function myFunction() {
let carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName
Variables with the same name can be used in different functions because local variables are only recognized inside their respective routines.
When a function begins, local variables are generated, and they are removed when the function is finished.