JavaScript: Functions
OWNER: PROFINGRID SIEBÖRGER
PRESENTER: DR M MOYO
I N F O R M AT I O N S Y S T E M S 2 0 2
Overview
•Define the term function
•Understand the purpose of functions
•Distinguish between in-built and user defined functions
•Create functions
•Call functions
•Use arguments and parameters
•Explore variable scope and lifetime
Functions
•Programs can be increasingly complex
•Manage complexity by splitting a program’s activities into named
sections
◦ “divide & conquer”
•Named sections/blocks of code allow us to use them by calling
(invoking) their name
•In JavaScript, these named sections/blocks are known as functions
Source: W3Schools
Functions
•JavaScript programs are written by combining new functions
(that you create yourself) and pre-packaged functions
•Pre-packaged functions that belong to JavaScript objects
are called methods
Advantages of Functions
•Enable reusability
•Avoid repeating code - efficiency
•Reduce errors - reliability
•Promote higher level thinking -
logic
Creating a function
•On the first line of a function, you create it, name it, and
indicate whether it accepts any parameters Same rules as for variables
•The reserved word function tells the interpreter that you
are creating a function
function myFunction(x, y)
Create it Name it Accepts parameters (optional)
Code executed by a function
•Use curly brackets {} to surround the code to be executed by the
function
•Opening curly bracket marks the start of the function’s code
•Closing curly bracket marks the end of the function’s code
function myFunction(){
code to execute…
}
Code executed by a function
•Browser will execute all the code inside the curly brackets when the
function is called
•When the browser gets to the closing curly bracket it knows the
function has ended
•Browser then executes the next line of code in the program
... function myFunction(){
... …
myFunction(); …
... }
...
Using functions
•Termed invoking or calling the function
•Simply use the function name along with the set of
parentheses (with or without arguments), ending with a
semicolon
...
...
myFunction();
...
...
Example
BMI = weight ÷ height 2
Function parameters
•To make your functions as flexible as possible, you can define parameters
•Functions can take any number of parameters
•The parameter list follows the function name and is enclosed in
parentheses
•Allows the function to import values to be used by the function
•Any value brought in as a parameter becomes a variable within the
function parameter
function myFunction(x)
Function parameters
•You do not use the var or let keyword when you set
parameters – JavaScript declares the variables automatically
•If you have more than one parameter, you need to separate
each parameter with a comma
parameters
function myFunction(x, y, z)
Passing arguments to parameters
•The terms "argument" and "parameter" are often used
interchangeably
•Good to differentiate between the parameter declaration and the
arguments passed in when the method is called
parameters
function myFunction(x, y, z) Or they could be
variables that contain
values
arguments let cow = 12;
... arguments
...
myFunction(1, 5, 8);
myFunction(cow, 5, 8);
...
...
Passing arguments to parameters
•Inside the function, the parameters (variables) await the assignment of
the argument values
•After the assignment, the parameters have associated values
•The transfer takes place in a left-to-right order
function myFunction(x, y, z)
myFunction(1, 5, 8);
Example
Variable Scope revisited
•Exist only during the lifetime of the function - their
existence is temporary
•Created when the function called and destroyed when it
exits
•If variables of the same name exist within other functions,
then there is no conflict - treated separately
Variable Scope revisited
•You can define and use local variables without cross-checking
with other parts of the program
•These variables have a scope (visibility) limited to their own
function - local scope
◦ variables created inside a function can only be used inside that function
•Variables created outside of a function can only be used inside
the function if they have been passed to it as an argument
{
let x = 1;
using x here
using y here
{
using x here
Local variables using y here
let y = 2;
using x and y here
}
using y here
using x here
}
Local variables
•Name clash of x, y and z does not cause a problem
function add(x, y){
let z = x + y;
}
function subtract(x, y){
let z = x - y;
}
function displayFullName(firstName, surname) {
alert(firstName + “ ” + surname);
}
Return Statements
•Above is a function that does something,
So far:
Passed values (arguments) INTO namely prints the full name to an alert box
functions via parameter lists
•Below is the function that returns a value,
Now:
Function can send a RESULT back namely, the full name, to the portion of code
via the return statement
Functions either perform an action that called it.
(do something) or return a value
The result can be used by the function getFullName(firstName, surname) {
program return firstName + “ ” + surname;
}
Return Statements
•Place the return statement as the last line of the function
before the closing curly bracket
•The returned value should be “consumed”
◦ i.e. used by the program function myFunction(x){
…
…
return name;
}
[Link](“Your name is: ” + myFunction(n));
Return Statements
•You can store what is returned in a variable:
fullName = getFullName(“Harry”, “Bing”);
“Harry Bing”
•You can call the function from anywhere you would use a variable:
alert(“Your name is: ” + getFullName(“Harry”, “Bing”));
Your name is Harry Bing
Better understand variable assignment
•When a variable is passed to a function, the value of the
variable is given to the function (not the variable itself).
let myNum = 4; function increment(x){
x++;
myNum = increment(myNum); return x;
}
Example
Storing functions as a variable
•A function expression can be stored as a variable
let prod = function (num1, num2) {return num1*num2};
alert(“The product is ” + prod(23, 45);
