All you need to know about functions in JavaScript
Tags: javascript, webdev, codenewbie, programming
Published: 2022-03-18 22:35:10

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 in `parenthesis`

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 value `Emmanuel` (which is the argument) is **copied to the local variable** `userName` (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 value `Emmanuel` 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 two `parameters`: `text` and `from`
- 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`. The `argument` should be seperated by a `,` (comma)
- Below, we passed **two arguments**: `How is the day going?`, and `Emmanuel`
- The first argument `How is the day going?` will be copied to the first parameter `text`
- The second argument `Emmanuel` will be copied to the second parameter `from`.
- Now, anywhere we use the `parameter` `text` and `from` 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 of `undefined` to the `from` 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 the `value` to be `returned`
- 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 be `undefined`

#### 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 the `expression` to be evaluated `firstNum + 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 the `arguments` the argumets get copied into the `parameters`, and the expression will be evalued. 
- Since we want to now use the value, we use the `return` statement which will be stored in the `retrndVal` 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 a `variable`.
- When there is no `expression` following the `return`, 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](https://twitter.com/emmanuelfkumah)
Written with love from Ghana