-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: implementation for pipes with usage
- Loading branch information
1 parent
8c45a61
commit 5fe0b1e
Showing
1 changed file
with
97 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
# 11. what is Composition? create a pipe() | ||
|
||
The concept of "pipes" or "pipelining" in JavaScript is a functional programming concept where you pass the output of one function as the input to the next function, forming a pipeline of functions. Here are some real-world examples: | ||
|
||
1. **Data Transformation**: Suppose you have an array of objects representing users, and you want to transform this data in several steps (e.g., filter out inactive users, sort by last name, and then extract just the email addresses). Each of these steps could be a function, and you could use `pipes` to create a single function that performs all these transformations in order. | ||
|
||
2. **Middleware in Express.js**: In Express.js, middleware functions are used to handle requests and responses. These middleware functions are essentially a pipeline where each function receives a request and response object, does something with them (like checking if a user is authenticated), and then passes them on to the next middleware function. | ||
|
||
3. **Redux Middleware**: In Redux, middleware is used to handle side effects and asynchronous actions. Middleware functions in Redux form a pipeline where each function can inspect and modify actions before they reach the reducer. | ||
|
||
4. **Data Validation**: Suppose you have a form and you want to validate the input in several steps (e.g., trim whitespace, check if the input is empty, validate against a regex). Each of these steps could be a function, and you could use `pipes` to create a single validation function. | ||
|
||
5. **Mathematical Computations**: If you have a sequence of mathematical operations that need to be performed in a specific order, you can create a function for each operation and use `pipes` to combine them into a single function. | ||
|
||
In all these examples, the `pipes` function allows you to create modular, reusable functions and combine them in flexible ways. | ||
|
||
### Problem | ||
|
||
https://bigfrontend.dev/problem/what-is-composition-create-a-pipe | ||
|
||
# | ||
|
||
### Problem Description | ||
|
||
what is Composition? It is actually not that difficult to understand, see [@dan_abramov 's explanation](https://whatthefuck.is/composition). | ||
|
||
Here you are asked to create a `pipe()` function, which chains multiple functions together to create a new function. | ||
|
||
Suppose we have some simple functions like this | ||
|
||
```js | ||
const times = (y) => (x) => x * y; | ||
const plus = (y) => (x) => x + y; | ||
const subtract = (y) => (x) => x - y; | ||
const divide = (y) => (x) => x / y; | ||
``` | ||
|
||
Your `pipe()` would be used to generate new functions | ||
|
||
```js | ||
pipe([times(2), times(3)]); | ||
// x _ 2 _ 3 | ||
|
||
pipe([times(2), plus(3), times(4)]); | ||
// (x _ 2 + 3) _ 4 | ||
|
||
pipe([times(2), subtract(3), divide(4)]); | ||
// (x \* 2 - 3) / 4 | ||
``` | ||
|
||
**notes** | ||
|
||
1. to make things simple, functions passed to `pipe()` will all accept 1 argument | ||
|
||
# | ||
|
||
### Solution | ||
|
||
```js | ||
/** | ||
* @param {Array<(arg: any) => any>} funcs | ||
* @return {(arg: any) => any} | ||
*/ | ||
function pipe(funcs) { | ||
return function (n) { | ||
let result = n; | ||
for (let func of funcs) { | ||
result = func(result); | ||
} | ||
return result; | ||
}; | ||
} | ||
``` | ||
|
||
# | ||
|
||
### Usage | ||
|
||
```js | ||
const addTwo = (n) => n + 2; | ||
const divideByFive = (n) => n / 5; | ||
const multiplyByTwo = (n) => n * 2; | ||
const multiplyByThree = (n) => n * 3; | ||
|
||
const addTwoMultiplyByThree = pipe([addTwo, multiplyByThree]); | ||
console.log(addTwoMultiplyByThree(5)); // 21 | ||
|
||
const addTwoDivideByFive = pipe([addTwo, divideByFive]); | ||
console.log(addTwoDivideByFive(5)); // 1.4 | ||
|
||
const addTwoMultiplyByThreeDivideByFive = pipe([ | ||
addTwo, | ||
multiplyByThree, | ||
divideByFive, | ||
]); | ||
console.log(addTwoMultiplyByThreeDivideByFive(5)); // 6 | ||
``` |