3.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3</title>
  <script>const {log, clear} = console;</script>
  <script src="fx.js"></script>
</head>
<body>

10. 비동기/동시성 프로그래밍
<script>
const add10 = (a, callback) => {
  setTimeout(() => callback(a + 10), 1000);
};

add10(5, res => {
  add10(res, res => {
    add10(res, res => {
      // log(res);
    });
  });
});

const add5 = a =>
  new Promise(resolve => setTimeout(_ => resolve(a + 5), 1000));

const pa = add5(5)
  .then(add5);
// pa.then(log);
</script>
- 비동기를 값으로 만드는 Promise
- 값으로서의 Promise 활용
<script type="module">
const go1 = (a, f) =>
  a instanceof Promise ?
    a.then(f) :
    f(a);

const add3 = a => a + 3;

// go1(add3(3), log);
//
// go1(add5(3), log);
</script>

- 합성 관점에서의 Promise
<script type="module">
const f = a => a + 5;
const g = a => a - 5;
const g2 = a => Promise.resolve(a - 5);
log(f(g(5)));
// log(f(g2(5)));
// log(f(g()));
// [1, 2, 3, 4].map(g).map(f).forEach(a => log(a));
// [].map(g).map(f).forEach(a => log(a));

Array.of(5).map(g).map(f).forEach(a => log(a));

Promise.resolve(5).then(g2).then(f).then(a => log(a));

// f(g(x)) = f(g(x))
// f(g(x)) = g(x)

Promise.resolve()
  .then(a => isNaN(a) ? Promise.reject(0) : a + 10)
  .then(a => a + 100)
  .catch(a => a)
  .then(log);
</script>

- go, pipe, reduce에서 비동기 제어
<script type="module">

const res1 = go(
  [1, 2, 3],
  map(a => a * a),
  filter(a => a % 2));

log(res1);

const res2 = go(
  Promise.resolve([1, 2, 3]),
  map(a => a * a),
  filter(a => a % 2));

log(res2);
res2.then(log);
</script>

</body>
</html>