feat(add): js sugar

js/syntactic-sugar/src/async.ts

@@ -0,0 +1,50 @@
+// * ------------------------------------------------ async await
+
+{
+  const timeout = async (ms) => await new Promise((resolve) => setTimeout(resolve, ms));
+
+  const print = async () => {
+    await timeout(100);
+    console.log('Async Hello');
+    await timeout(200);
+    console.log('Async Again');
+  };
+
+  print();
+}
+
+// * ------------------------------------------------ Promise
+
+{
+  const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  const print = () => {
+    timeout(100)
+      .then(() => {
+        console.log('Promise Hello');
+      })
+      .then(() => timeout(200))
+      .then(() => {
+        console.log('Promise Again');
+      });
+  };
+
+  print();
+}
+
+// * ------------------------------------------------ Callback
+
+{
+  const timeout = (ms, callback) => setTimeout(callback, ms);
+
+  const print = () => {
+    timeout(100, () => {
+      console.log('Callback Hello');
+      timeout(200, () => {
+        console.log('Callback Again');
+      });
+    });
+  };
+
+  print();
+}

js/syntactic-sugar/src/decorator.ts

@@ -0,0 +1,82 @@
+{
+  // * ---------------- declaration
+
+  function log(target, name, descriptor) {
+    var oldValue = descriptor.value;
+
+    descriptor.value = function() {
+      console.log(`Calling ${name} with`, arguments);
+      const result = oldValue.apply(this, arguments);
+      console.log(`Result is ${result}`);
+      return result;
+    };
+
+    return descriptor;
+  }
+
+  // * ---------------- usage
+
+  class Tool {
+    @log
+    add(a, b) {
+      console.log(this);
+      return a + b;
+    }
+  }
+
+  console.log(new Tool().add(1, 2));
+}
+
+// Calling add with [Arguments] { '0': 1, '1': 2 }
+// Tool {}
+// Result is 3
+// 3
+
+// * ------------------------------------------------ alternative
+
+{
+  // * ---------------- HOF
+
+  const log = function(fn) {
+    return function(...args) {
+      console.log(`Calling ${fn.name} with`, arguments);
+      const result = fn.apply(this, args);
+      console.log(`Result is ${result}`);
+      return result;
+    };
+  };
+
+  // * ---------------- usage
+
+  class Tool {
+    add = log(function add(a, b) {
+      console.log(this);
+      return a + b;
+    });
+  }
+
+  console.log(new Tool().add(1, 2));
+}
+
+// * ------------------------------------------------ composition
+
+{
+  // * ---------------- HOF
+
+  const withLog = function(fn) {
+    return function(...args) {
+      console.log(`Calling ${fn.name} with`, arguments);
+      const result = fn.apply(this, args);
+      console.log(`Result is ${result}`);
+      return result;
+    };
+  };
+
+  // * ---------------- usage
+
+  const add = (a, b) => a + b;
+
+  const addWithLog = withLog(add);
+
+  console.log(addWithLog(1, 2));
+}

js/syntactic-sugar/src/syntax-es6.ts

@@ -0,0 +1,119 @@
+// * ------------------------------------------------ for of
+
+{
+  const arr = [1, 2, 3];
+
+  for (const val of arr) {
+    console.log(val);
+  }
+}
+
+// * ---------------- for in
+
+{
+  const arr = [1, 2, 3];
+
+  for (const key in arr) {
+    const val = arr[key];
+    console.log(val);
+  }
+}
+
+// * ------------------------------------------------ string
+
+{
+  const language = 'JavaScript';
+
+  const str6 = `Hello ${language}`;
+  console.log(str6);
+}
+
+// * ---------------- in ES5
+
+{
+  var language = 'JavaScript';
+
+  var str5 = 'Hello' + ' ' + language;
+  console.log(str5);
+}
+
+// * ------------------------------------------------ array function
+
+{
+  const arrFn = (a) => a + 1;
+  console.log(arrFn(6));
+}
+
+// * ---------------- in ES5
+
+{
+  function fnFn(a) {
+    return a + 1;
+  }
+  console.log(fnFn(6));
+}
+
+// * ------------------------------------------------ class
+
+{
+  class Class6 {
+    val;
+    constructor(val) {
+      this.val = val;
+    }
+    log() {
+      console.log(this.val);
+    }
+  }
+  new Class6('hello').log();
+}
+
+// * ---------------- in ES5
+
+{
+  function Class5(val) {
+    this.val = val;
+  }
+  Class5.prototype.log = function() {
+    console.log(this.val);
+  };
+
+  new Class5('hello').log();
+}
+
+// * ------------------------------------------------ destructing
+
+{
+  const arr = [1, 2];
+  const [a, b] = arr;
+
+  const obj = { c: 3, d: 4, e: 5 };
+  const { c, ...d } = obj;
+
+  const arr2 = [6, 7, 8];
+  const [e, ...f] = arr2;
+
+  console.log(a, b, c, d, e, f);
+}
+
+// * ---------------- in ES5
+
+{
+  var arr = [1, 2];
+  var a = arr[0];
+  var b = arr[1];
+
+  var obj = { c: 3, d: 4, e: 5 };
+  var c = obj.c;
+
+  var d = {};
+  for (var k in obj) {
+    if (k !== 'c') d[k] = obj[k];
+  }
+
+  var arr2 = [6, 7, 8];
+  var e = arr2[0];
+  var f = arr2.slice(1);
+
+  console.log(a, b, c, d, e, f);
+}

js/syntactic-sugar/src/syntax-ts.ts

@@ -0,0 +1,116 @@
+// * ------------------------------------------------ Optional Chaining
+
+{
+  const data = { bar: { baz: console.log } };
+
+  type validData = typeof data | null;
+
+  const foo: validData = Math.random() ? data : null;
+
+  const x = foo?.bar?.baz();
+
+  console.log('x is', x);
+}
+
+// * ---------------- alternative
+
+{
+  const data = { bar: { baz: console.log } };
+
+  type validData = typeof data | null;
+
+  const foo: validData = Math.random() ? data : null;
+
+  const x =
+    foo === null || foo === undefined
+      ? undefined
+      : foo.bar === null || foo.bar === undefined
+      ? undefined
+      : foo.bar.baz();
+
+  console.log('x is', x);
+}
+
+// * ------------------------------------------------ Non-null assertion operator
+
+{
+  interface Entity {
+    name: string;
+  }
+
+  const validOrThrow = (e) => {
+    if (!e) throw 'your value is empty';
+  };
+
+  const process = (e?: Entity) => {
+    validOrThrow(e);
+
+    const name = e!.name;
+    console.log(name);
+  };
+
+  process({ name: 'Mick' });
+}
+
+{
+  interface Entity {
+    name: string;
+  }
+
+  const validOrThrow = (e) => {
+    if (!e) throw 'your value is empty';
+  };
+
+  const process = (e?: Entity) => {
+    validOrThrow(e);
+
+    const name = e !== undefined && e.name;
+    console.log(name);
+  };
+
+  process({ name: 'Mick' });
+}
+
+// * ------------------------------------------------ Nullish Coalescing
+
+{
+  const foo = null;
+  const bar = () => 'John';
+
+  const x = foo ?? bar();
+
+  console.log('x is', x);
+}
+
+// * ---------------- alternative
+
+{
+  const foo = null;
+  const bar = () => 'John';
+
+  const x = foo !== null && foo !== undefined ? foo : bar();
+
+  console.log('x is', x);
+}
+
+// * ------------------------------------------------ overload
+
+{
+  function simpleAdd(a: number): (b: number) => number;
+  function simpleAdd(a: number, b: number): number;
+  function simpleAdd(a, b?) {
+    if (b === undefined) return (b) => a + b;
+    return a + b;
+  }
+
+  const result = simpleAdd(1, 2);
+  console.log(result);
+
+  const semiAdd = simpleAdd(3);
+  const result2 = semiAdd(4);
+  console.log(result2);
+}
+
+// * ------------------------------------------------ Pattern matching
+
+// * not support