# Session 4: Functions
[slide online](https://hackmd.io/@e8KGkGmbTPWKGH_D_dy9DA/Bk4MApZws)
---
## Regular function declaration
```javascript
function [name]([param[, param[, ... param]]]) {
statements
[return [returnValue]]
}
```
---
## Function invocation
```javascript
someFunction([param[, ...param]])
```
---
## Arrow function declaration
```javascript
[const fnName = ]([param[, param[, ... param]]]) => {
statements
[return [returnValue]]
}
[const fnName = ]([param[, param[, ... param]]]) => returnValue
```
---
## Parameters
### Passed by value vs passed by reference
```mermaid
flowchart TB
0(Arguments)-->1(Passed by reference)
0-->2(Passed by value)
1-->3(Array)
1-->4(Object)
2-->5(Everything else)
```
---
## Parameters
### Spreading
```javascript
const arr = [item1, item2];
const fn1 = (item1, item2) => {
// statements
};
fn(...arr);
```
---
## Parameters
### Destructuring > Array
```javascript
const arr = [item1, item2];
const fn1 = ([item1, item2]) => {
// statements
};
fn(arr);
```
---
## Parameters
### Destructuring > Object
```javascript
const obj = {
key1: "value 1",
key2: "value 2",
};
const fn1 = ({ item1, item2 }) => {
// statements
};
fn(obj);
```
---
## Parameters
### Rest parameters
```javascript
const fn1 = (param1, param2, ...restOfParams) => {
// statements
};
const fn2 = (...allArguments) => {
// statements
};
```
---
## Parameters
### Default arguments
```javascript
const fn = (arg1, arg2 = defaultArg2, arg3) => {
// statements
};
```
---
## `this`
- Refers to an object
- Which object depends on the context
---
## Function (type)
### Main instance methods
- `<function>.bind(<thisValue>)`
- `<function>.apply(<thisValue>[, <arguments>])`
- `<function>.call(<thisValue>[, <arg1>[, ...<argn>]])`
---
## Arrow functions vs Regular functions
- Arrow functions don't have a `this` binding of their own
- As a result:
- `call`, `bind`, and `apply` aren't suitable for them
- cannot be used as constructors
- not suitable as instance methods
---
## Interesting patterns
### Callback
```javascript
const getSomeData = (path, callback) => {
const someData = getFrom(path);
if (callback) {
return callback(someData);
}
return someData;
};
const processData = (data) => {
// statements
};
getSomeData("/some/path", processData);
```
---
## Interesting patterns
### Composition
```javascript
const fn1 = (input1) => {
// do something with input1
return fn1Result;
};
const fn2 = (input2) => {
// do something with input2
return fn2result;
};
const fn3 = (input3) => {
// do something with input3
return fn3result;
};
const finalResult = fn3(fn2(fn1(initialInput)));
```
---
## Interesting patterns
### Composition
```mermaid
flowchart LR
0(fn1)--returns-->1(fn1Result)
1--input for-->2(fn2)
2--returns-->3(fn2result)
3--input for-->4(fn3)
4--returns-->5(fn3result)
```
---
## Interesting patterns
### Recursion
```javascript
const factorial = (n) => {
return n === 1 ? 1 : n * factorial(n - 1);
};
```
---
## Interesting patterns
### Currying
```javascript
const fn1 = (input1) => {
// [statements]
return (input2) => {
// [statements]
[return fn2result]
}
}
const finalResult = fn1(input1)(input2);
```
---
## Interesting patterns
### Currying
```mermaid
flowchart LR
0(input1)--input for-->1(fn1)
1--returns-->2(fn2)
2--has access to-->0
3(input2)--input for-->2
2--returns-->4(finalResult)
```
---
## Asynchronous functions
### Promises
```mermaid
flowchart TB
0(Promise)--represents-->1(Async action that may produce a value when completed)
0--has-->2(States)
2-->3(Pending)
2-->4(Settled)
4-->5(Fulfilled)
4-->6(Rejected)
```
---
## Asynchronous functions
### Promises > Main instance methods
- `<promise>.then(<callback>)`
- `<promise>.catch(<callback>)`
- `<promise>.finally(<callback>)`
---
## Asynchronous functions
### Promises
```javascript
const responsePromise = fetch("https://www.reddit.com/r/javascript.json");
responsePromise
.then((res) => res.json())
.then((json) => console.log(json))
.catch((err) => console.error(err));
.finally(() => console.log("Settled"))
```
---
## Asynchronous functions
### `async` / `await`
```javascript
const fetchRedditPosts = async () => {
const response = await fetch("https://www.reddit.com/r/javascript.json");
return response.json();
};
```
---
## Wraping up
- Topics covered
- Functions
- Exercises
- Next session
- Coming up...
- Schedule
---
{"metaMigratedAt":"2023-06-17T15:30:17.700Z","metaMigratedFrom":"YAML","title":"Session 4: Functions","breaks":true,"contributors":"[{\"id\":\"7bc28690-699b-4cf5-8a18-7fc3fddcbd0c\",\"add\":4592,\"del\":0}]"}