Hello World, often in JavaScript programming, you might want to perform certain actions a number of times on your website.
For instance, you might want to display the current time when the user navigates to any page within the website.
To achieve that,typically, you write the set of statements to be executed on all the pages of your website. This is not very optimal as it introduces a lot of code repetition.
To avoid this code repetition, you should opt for a function
. Function allows you to write the code only once and call it at any part of your website you need it.
In this article, we will learn about
-How to define a function.
-How to execute a function
-Function parameters,arguments, returning a function etc.
What is a function
Function in JavaScript is a procedure - a set of statements that performs a task or calculates a value.
It provides an effective way to structure larger programs,saves you repetitive coding, and makes your code easier to understand.
It also helps to give names to subprograms, and to separate these subprograms from each other.
For a procedure to qualify as a function, it should accept an input and return an output, and there should be an clear relationship between the input and the output.
What problem is function solving?
Assuming you have a website with several pages, and you want to display the current time to the user on each page he visits.
Typically,the set of statements to be executed might look like the below:
let now = new Date();
let hour = now.getHours();
let min = now.getMinutes();
console.log("Time is ", hour + ":" + min)
These statements will be repeated on each page of the website to display the time of day. With this approach, we will introduce a lot of code repetition in our program violating the principle of DRY (Don't repeat yourself).
A better approach is to use a function. With function
you write the set of statements only once, give it a name, and anytime you call the name, the block of code (set of statements) will be executed.
Defining a function
To define a function (also called function declaration), follow these steps:
An open declaration statement that includes the:
-
function
keyword - the
name
of the function - A list of
parameters
to the function, enclosed in paratheses()
and separated by commas. - An opening and closing curly braces
{...}
to enclose the set of statements
Syntax for a function
Below is the synxtax for a function:
function name(parameter1, parameter2, ...parameterN){
//block of code or set of statements to be executed
}
Example of a function to display a welcome message to the user will be written as below:
function greetUser(){
alert("Welcome user"); // statement to be executed
}
Function Declarations
Let's write the initial set of statements to display time on each page the user visits using a function
function showTime(){
let now = new Date();
let hour = now.getHours();
let min = now.getMinutes();
console.log("Time is ", hour + ":" + min)
}
The code to show time has now been packaged as a function
. Here are the parts:
- The
function
keyword - The name giving to the function
showTime
- Parentheses
()
that identify it as a function - An curly bracket
{}
to enclose the body of the function. The body is where the statements to be executed or tasks to be done will be written
By convention, the function
name should be in camelCase, and must start with a verb that demonstrate the action to be performed. Eg. showTime
, fetchData
, getResult
.
Calling or invoking the function
A function will be executed only when it is called.Calling a function is also known as invoking a function.
To call a function, write its name followed by
arguments
enclosed inparenthesis
The syntax is as below:
functionName(arguments)
Let's invoke or call the showTime
function we have defined.
showTime()
The call to showTime()
executes the set of statements in the function's body (between the {}
).
- Writing
showTime()
is now the only code you'll need in order to make the whole block execute
Example 2: Defining and calling a function
The task is to show a welcome message to the vistor on each page visit.
Let's see how to achieve that using a function
function greetUser(){
alert("Welcome to my site"); //code to display the welcome message
}
To display the welcome message, we call the function by name greetUser
followed by the ()
like below:
greetUser()
- We can now use the function
greetUser
anywhere in the code by calling it - If we need to change or modify the set of statement in the body of the function,** we will modify the code in one place** (where the function was declared), and the change will take effect anywhere the function was called.
Passing data to function
When calling a function, the parentheses that is written after the function name doesn't have to be empty. If you put some data inside the parentheses, you can pass that data to the function body.
The data you are passing to the function is termed argument
.
An argument is the value that is passed to the function when it is called.
functionName(argument)
Let's call the greetUser
function and pass it some argument (data)
greetUser("Emmanuel")
In the code above, we are passing the data Emmanuel
to the function's body. However, the data Emmanuel
needs to be assigned to a variable before it can be used in our function. The variable is termed parameter
A parameter is the variable listed inside the parentheses in the function declaration
Expanding the greetUser
function to enable us pass some data to it
function greetUser(userName){
alert("Welcome to my site" + " " + userName)
}
/* calling the function */
greetUser("Emmanuel")
- When the
greetUser
is called, the given valueEmmanuel
(which is the argument) is copied to the local variableuserName
(which is the parameter).- In the function's body, you can now use the passed data (argument) by simply writting the local variable (parameter)
- Anytime the
userName
variable is used in the function's body, the valueEmmanuel
will be outputted.
As mentioned earlier, a function makes a statements of code reuasable.
- If we want to pass a different data to the function, we only need to change the
argument
.
greetUser('Stephen')
- Now calling
greetUser('Stephen')
will output
Welcome to my site Stephen
Passing multiple data(values) to a function
We can pass more than one data or value to a function, to be executed in the function's body.
With such situations, we need to have two or more local variables (parameters
) to store the arguments
(data to be passed).
- In the code below, the function
showMessage
has twoparameters
:text
andfrom
- We then call the function
showMessage()
and pass the actual data we want to display when the code is executed. - These data are the
arguments
. Theargument
should be seperated by a,
(comma) - Below, we passed two arguments:
How is the day going?
, andEmmanuel
- The first argument
How is the day going?
will be copied to the first parametertext
- The second argument
Emmanuel
will be copied to the second parameterfrom
. - Now, anywhere we use the
parameter
text
andfrom
in the function's body, we are basically outputing the data or arguments we passed to the function - We can now use the
showMessage
function several times, each time passing it different data.
See the code as below
function showMessage(text,from){
alert(text + " Sender : " + from)
}
// calling the function and passing the actual data
showMessage("How is the day going?","Emmanuel");
showMessage("I'll be there at 1:00pm.", "Daniel");
Now anywhere we call the function,the output will be either
How is the day going? Sender: Emmanuel
I'll be there at 1:00pm. Sender: Daniel
Accessing outer variables
A function can access any variable which is not defined in the code block, these are outer or global variables.
let timeOfDay = "Evening"
function greetUser(){
alert('Good' + " " + timeOfDay)
}
greetUser()
The output will be
Good Evening
Passing default values
You can declare a function and give it some parameter
. However, when you call or invoke the function and do not provide it with an argument
or data, the local variable (parameter
) will store the value undefined
For instance
function showMessage(text,from){
console.log(text + " Sender : " + from)
}
showMessage("How are you today")
- Because only one argument was passed to the function, the first argument will be copied to the first parameter
text
. - A second parameter
from
was provided, but no argument was passed to it - Because no data has been copied to the parameter
from
, the code will still run, but will assign the value ofundefined
to thefrom
parameter.
The output of the function will be
How are you today Sender : undefined
To avoid outputting undefined
, we can specify the "default value" to use for a parameter if no value
was passed
- We assign a default value to use for the
from
parameter using the=
.
Let's rewrite the code, and assign a default value of anonymous
to the from
parameter
function showMessage(text, from = "anonymous"){
console.log(text + " Sender : " + from)
}
showMessage("How are you today")
Now the output will be
How are you today Sender: anonymous
Returning a value
A function can return a value to be used as the result.
When a function is called, it implicitly returns undefined
unless you clearly specify the value to return.
For example
function showMessage(message){
console.log(message)
}
const result = showMessage("Hello World");
console.log ("The return value will be ",result)
The output will be
"Hello World"
"The return value will be " undefined
- In the
showMessage
function, we did not specify thevalue
to bereturned
- Doing so,
undefined
is the value that is implicitly returned - The value is now stored in the
result
variable, hence when we console.log the returned valued witll beundefined
Specifying a return value
To specify a return value, you should use the return
statement followed by an expression
return expression
Let's see an example
function addNum(firstNum, secondNum){
return firstNum + secondNum;
}
const retrndVal = addNum(2, 5);
console.log('The value we get back will be ', retrndVal)
The output will be
"The value we get back will be "
7
- first we used the
return
statement followed by theexpression
to be evaluatedfirstNum + secondNum
- The expression will be evaluated first, and since we want to output the value of the expression, we used the
return
statement - When the function
addNum
is called, we passed it thearguments
the argumets get copied into theparameters
, and the expression will be evalued. - Since we want to now use the value, we use the
return
statement which will be stored in theretrndVal
variable. - The
return
statement can be in any place of the function.During execution, the function stops at the return, evaluates the expression, and the value is returned to the calling code or assigned to avariable
. - When there is no
expression
following thereturn
, it causes the function to exit immediately.
Summary
- Function in JavaScript is a procedure - a set of statements that performs a task or calculates a value
- To declare a function use the
function
keyword - A function will only perform a task when it is called
- Call a function using
functionName()
- Get a value from a function using the
return
statement
I trust, this article gave you a better appreciation of function? Did you learn anything new, do you have some suggestions to add ? I will love to hear from you. Dont forget to share this article on all your social platforms.
Follow me on Twitter @emmanuelfkumah
Written with love from Ghana
Top comments (0)