# 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


---

# Agent Instructions: 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:

```
GET https://huang-jason.gitbook.io/web-general/stack-fe-glossary.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.