> For the complete documentation index, see [llms.txt](https://ret2basic.gitbook.io/ctfnote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ret2basic.gitbook.io/ctfnote/computer-science/html-css-javascript-and-react/javascript/functions.md).

# Functions

Since ES6, there are three equivalent ways of defining functions:

**Method 1: The usual way**

```javascript
function rectangleArea(width, height) {
  let area = width * height;
  return area;
}
```

**Method 2: Function expressions**

```javascript
const rectangleArea = function(width, height) {
  let area = width * height;
  return area;
};
```

Using `const` is a convention.

**Method 3: Arrow functions**

```javascript
const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};
```

Arrow functions can be refactored into single line:

```javascript
const rectangleArea = (width, height) => width * height;
```

If there is only one parameter, parentheses are omitted:

```javascript
const squareNum = num => num * num;
```

Array functions are oftentime used for writing quick anonymous functions. Here is an example from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):

```javascript
const materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

console.log(materials.map(material => material.length));
// Expected output: Array [8, 6, 7, 9]
```

The meaning of => is similar to a "mapping" in mathematics.

{% hint style="info" %}
It doesn't matter which method you choose, just make sure you recognize them since different developers use different methods.
{% endhint %}