> For the complete documentation index, see [llms.txt](https://huang-jason.gitbook.io/web-general/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huang-jason.gitbook.io/web-general/stack-fe-glossary.md).
# STACK = FE Glossary
## 1. Event-driven
JS = \[1] single thread programming, \[2] non-blocking by the event-driven mechanism.
| Batch programming language | Multi-thread programming | Event driven |
| --------------------------- | ------------------------ | -------------------------------------------------------- |
| executes codes line by line | | event loop, continuously check which event is triggered. |
| debug easier | race condition | used in OS |
|  | event-loop is single thread. |
| -------------------------------- | ---------------------------- |
#### 3 elements in event-loop
1. event queue
2. event loop
3. event handler
| Action | Scenario |
| ---------------------------------------------------------------------------------------------------- | -------------------------------- |
| 1. Events, like click and type, will be accumulated in the queue. |  |
| 2. The loop detects events and sends one to the handler. Then, the control is passed to the handler. |  |
| 3. The handler processes the event, and returns the control back to the loop. |  |
| Repeat 2 |  |
| Repeat 3 |  |
#### Process & thread
* process has many threads.
* Threads in a process share memory via sockets.
#### Stack & Heap
| Stack | Heap |
| ------------- | -------------------------------------- |
| static memory | dynamic memory, determined at run time |
| variable | function, pointers |
| | slower, but memory efficient. |
## 2. Async pattern
### 2.1 callback hell
```javascript
const jcampPeaks = () => {
setTimeout(() => {
console.log('1. Read a JCAMP file.')
setTimeout(() => {
console.log('2. Extract XYDATA.')
setTimeout(() => {
console.log('3. Peak pickings.')
setTimeout(() => {
console.log('4. Send peaks back.')
}, 500);
}, 500);
}, 500);
}, 500);
};
jcampPeaks();
console.log('This is a JCAMP peak-picking process.')
```
### 2.2 Promise
```javascript
// define a CB return promise
const asyncAction = (lIdx, str) => {
const idx = lIdx + 1;
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log(`${idx}. ${str}`);
resolve(idx);
}, 500);
});
return promise;
};
```
#### 2.2.1 then / catch
```javascript
const jcampPeaks = () => {
const idx = 0;
asyncAction(idx, 'Read a JCAMP file.')
.then(idx => asyncAction(idx, 'Extract XYDATA.'))
.then(idx => asyncAction(idx, 'Peak pickings.'))
.then(idx => asyncAction(idx, 'Send peaks back.'))
.catch(err => (
console.error(err)
));
};
jcampPeaks();
console.log('This is a JCAMP peak-picking process.');
```
#### 2.2.2 async / await
```javascript
const jcampPeaks = async () => {
const idx0 = 0;
const idx1 = await asyncAction(idx0, 'Read a JCAMP file.');
const idx2 = await asyncAction(idx1, 'Extract XYDATA.');
const idx3 = await asyncAction(idx2, 'Peak pickings.');
const idx4 = await asyncAction(idx3, 'Send peaks back.');
};
jcampPeaks();
console.log('This is a JCAMP peak-picking process.');
```
#### 2.2.3 generator
```javascript
function* jcampPeaks() {
const idx0 = 0;
const idx1 = yield asyncAction(idx0, 'Read a JCAMP file.');
const idx2 = yield asyncAction(idx1, 'Extract XYDATA.');
const idx3 = yield asyncAction(idx2, 'Peak pickings.');
const idx4 = yield asyncAction(idx3, 'Send peaks back.');
}
const co = require('co');
co(jcampPeaks);
console.log('This is a JCAMP peak-picking process.');
```
## 3. Middleware
extend functionality without modifying the code.
## 4. HOF / HOC
#### 4.1. HOF
* A function that **accepts** and/or **returns** another function is called a higher-order function. (reusability)
* remember local scope.
* ex: map, reduce, filter.
```javascript
const add = (x) => (y) => x + y;
result = add(10)(20);
const add10 = add(10);
result = add10(20);
```
#### 4.2. HOC
```javascript
const Decoration = (props) => (
{props.children}
);
const ButtonWithDecoration = () => (
);
```
## 5. React & Redux
react: one-way data binding.
redux-action: plain object
redux-reducer: pure function without side effect
```
state = reducer(action, state)
```
#### 5.1. Why immutable
side effects = \[1] less predictable \[2] harder to test.
#### 5.2. Functional programming
* stateless
* immutable
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://huang-jason.gitbook.io/web-general/stack-fe-glossary.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.