Get started with functions in JavaScript
Tags: javascript, functional, webdev, beginners
Published: 2021-01-07 15:12:52


Functions are one of the fundamental building blocks in JavaScript. A function in JavaScript is similar to a procedure - a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output. To use a function, you must define it somewhere in the scope from which you wish to call it.

## Function Definition

A function definition (also called a function declaration, or function statement) consists of the function keyword, followed by:

* The name of the function.
* A list of parameters to the function, enclosed in parentheses and separated by commas.
* The JavaScript statements that define the function, enclosed in curly brackets, {...}.

For example, the following code defines a simple function named square:

```javascript
function square(number) {
  return number * number;
}
```
The function ***square*** takes one parameter, called number. The function consists of one statement that says to return the parameter of the function (that is, number) multiplied by itself. The statement return specifies the value returned by the function: `return number * number;`

## Various ways of defining a function
1. Declaration notation: 
```javascript
function square(number) {
  return number * number;
}
```
2. Function as value:
 ```javascript
const square = function() {
    return number * number;
}
```
3. Using Arrow functions:
```javascript
const square = () => {
    return number * number;
}
```
The above definition can further be shortened to:
```javascript
const square = () => number * number;
```
Since this function contains only 1 line of code, we may safely omit the { } as well as the _return_ keyword. 
You can use any of the above mentioned ways to define a function named "**square**".

## Calling the function
Defining a function does not execute it. That's not fair, I have written so much code for nothing to be executed! Let's get into the magical way by which a function is _called_ and the function defined above gets executed.

Defining a function would name the function and specify what to do when the function is called. It prepares javascript understand what logic or code is to be run when this function is called.

Calling the function actually performs the specified actions with the indicated parameters. For example, if you define the function square, you could call it as follows:

```javascript
square(5);
```
The above statement would call the function with an _argument_ of value 5. The function executes its statements and returns the value 25.
However, this would still not display the returned value of 25 anywhere. In order to display this value, we can use console.log().
```javascript
let result = square(5);
console.log(result);
//25
```
or directly pass the function call within console.log()
```javascript
console.log(square(5));
//25
```
By this, we understand that console.log() is also a function which can take different types of arguments. However, this is a special function since it has a '.' dot parameter in between console and log.

## Argument and Parameter
An argument is a value (primitive or object) passed as input to a function.
A parameter is a named variable passed into a function. Parameter variables are used to import arguments into functions.

Let's simplify this using the above function's example. Within the function definition, we observed the variable named __number__ which was used within the _square_ function. The value - number, is called as the __parameter__ accepted by sqaure().
Similary, during the function call, we passed the value of _5_ to the function as `square(5);`. Here, the value 5 is referred as the __argument__ passed to square().

I hope this article was helpful in understanding the basics of functions in JavaScript.

Peace!