JavaScript - Understanding Functions
Tags: javascript, newbie, webdev, beginners
Published: 2023-09-25 20:58:48

A function is an instruction that takes some data, executes a defined and unique process, and returns the result. It's almost like a vending machine which you put money in and a drink comes out.

Two steps are necessary to use the function.
1. **Declare a function**
2. **Call a function**

## ◾️　Function Declaration
Functions can be declared using the "function" followed by a name and a pair of parentheses, which may contain argument if needed. And then write the tasks inside the curly braces {}.

```javascript
function $FUNCTION_NAME() {
  $STATEMENTS;
}

$FUNCTION_NAME(); // call a function
```

## ◾️　Function Expression
A function expression is very similar to a function declaration. A function expressions can be assigned to variables or used as arguments in other functions. It doesn't require a function name(anonymous functions).

```javascript
let $FUNCTION_NAME = function() {
  $STATEMENTS;
};

$FUNCTION_NAME(); // call a function
```

## ◾️　Function Call
You can call the function by just writing its name and parentheses. If arguments are required, they can be written in parentheses.


**Argument(/Parameters)**:
Functions can accept parameters, which allow you to pass specific value to the function when it's called. 

**Return Value**
By using return statement, you can return value to the code that called them. The returned value can be used in the code that called the function.

```javascript
// argument: width, height
function calculateArea(width,height) {
  // return the value
  return width * height;
}
// pass the value to function
// width:4, height:5
console.log(calculateArea(4,5)); //20
```

### ▫️　Hoisting
Hoisting is JavaScript's default behaviour of moving declarations to the top.

|Functions|Hoisting|Description|
|---|---|---|
|**Function Declarations**|○|You can call a function before it's defined in the code.|
|**Function Expressions**|×|You can call a function only after the line in which they are defined. Attempting to call a function expression before its definition will result in an error.|


## ◾️　Anonymous functions
Functions can also be defined without a name. These functions are called anonymous functions and used for code that only needs to run once within a task, rather than repeatedly being called by other parts of the script. These are often used as arguments to other functions, assigned to variables, or used as event handlers and listeners to perform a task when an event occurs.

```javascript
const squareArea = function(width,height) {
  return width * height;
}
```

## ◾️　Arrow Functions
Arrow functions are a function notation newly introduced in ES2015(ES6), and as the name suggests, functions are defined using `=>`. They are useful for short, one-line functions.

```javascript
let squareArea = (width,height) => {
  return width * height;
};

squareArea(4,5);
```

If the function has only one statement, you can omit the curly braces and the `return` keyword.

```javascript
let squareArea = (width,height) => width * height;
```

If the function has only one parameter, you can omit the parentheses.

```javascript
let sayHi = name => `Hi ${name}! How are you?`;
```