> 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                                               |

| ![](/files/-Lq83V0HDaXZK2tfqPnx) | 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.                                    | ![](/files/-Lq83V0JyetbwMQrlLbq) |
| 2. The loop detects events and sends one to the handler. Then, the control is passed to the handler. | ![](/files/-Lq83V0Lp_gi0Zfn9KV2) |
| 3. The handler processes the event, and returns the control back to the loop.                        | ![](/files/-Lq83V0NDp8pZW0jUi--) |
| Repeat 2                                                                                             | ![](/files/-Lq83V0PZzK5-PRiqc4k) |
| Repeat 3                                                                                             | ![](/files/-Lq83V0RmVYSnTjO2RoM) |

#### 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.

![](/files/-Lq83V0T5ExjdRJR1s1V)

## 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) => (
  <div className="card-decoration">
    {props.children}
  </div>
);

const ButtonWithDecoration = () => (
  <Decoration>
    <button>Save</button>
  </Decoration>
);
```

## 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