Initial commit

README.md

@@ -0,0 +1,18 @@
+# Art of JS
+
+> Learn the art of Javascript, with simple, to the point examples
+
+### Topics:
+1. [Array functions](array-func/index.js)
+2. [Arrow functions](arrow-func/index.js)
+3. [Bind Call Apply](bind-call-apply/index.js)
+4. [Closures](closures/index.js)
+5. [Default parameters](default-params/index.js)
+6. [Desctructuring](destruct/index.js)
+7. [Function currying](func-curry/index.js)
+8. [Functional programming](func-prog/index.js)
+9. [Let Const Var](let-const-var/index.js)
+10. [Object literals](object-literals/index.js)
+11. [Promises](promises/index.js)
+12. [Spread](spread/index.js)
+13. [Template literals](template-literals/index.js)

app.js

@@ -0,0 +1,83 @@
+window.demoLibs = {};
+function onBtnClick(key) {
+  window.demoLibs[key] && window.demoLibs[key]();
+}
+const ulList = document.createElement('ul');
+document.body.appendChild(ulList);
+[
+    {
+        key: 'func-prog',
+        name: 'Functional Programming',
+        src: './func-prog/index.js',
+    },{
+        key: 'array-func',
+        name: 'Array Functions',
+        src: './array-func/index.js',
+    },{
+        key: 'arrow-func',
+        name: 'Arrow Functions',
+        src: './arrow-func/index.js',
+    },{
+        key: 'bind-call-apply',
+        name: 'Bind Call Apply',
+        src: './bind-call-apply/index.js',
+    },{
+        key: 'let-const-var',
+        name: 'Let Const Var',
+        src: './let-const-var/index.js',
+    },{
+        key: 'destruct',
+        name: 'Destructuring',
+        src: './destruct/index.js',
+    },{
+        key: 'spread',
+        name: 'Spread',
+        src: './spread/index.js',
+    },{
+        key: 'promises',
+        name: 'Promises',
+        src: './promises/index.js',
+    },{
+        key: 'default-params',
+        name: 'Default Parameters',
+        src: './default-params/index.js',
+    },{
+        key: 'template-literals',
+        name: 'Template Literals',
+        src: './template-literals/index.js',
+    },{
+        key: 'object-literals',
+        name: 'Object Literals',
+        src: './object-literals/index.js',
+    },{
+        key: 'func-curry',
+        name: 'Function Currying',
+        src: './func-curry/index.js',
+    },{
+        key: 'closures',
+        name: 'Closures',
+        src: './closures/index.js',
+    },
+].sort((a, b) => {
+    const nameA = a.name.toLowerCase();
+    const nameB = b.name.toLowerCase();
+    if (nameA < nameB) return -1;
+    else if (nameA > nameB) return 1;
+    else return 0;
+}).forEach(item => {
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.setAttribute('id', item.key);
+    a.setAttribute('href', '#');
+    a.setAttribute('onclick', `onBtnClick('${item.key}')`);
+    a.text = item.name;
+    li.appendChild(a);
+    ulList.appendChild(li);
+
+    if (item.src) {
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.src = item.src;
+        document.body.appendChild(script);
+    }
+});

array-func/index.js

@@ -0,0 +1,134 @@
+(function(context) {
+
+  function demoForEach(items, func) {
+    // Use of Arrow function
+    items.forEach(func || (item => console.log(item)));
+  }
+
+  function demoFilter(items, func) {
+    // Use of Arrow function
+    return items.filter(func || (item => item.type === 'veg'));
+  }
+
+  function demoMap(items) {
+    return items.map(item => {
+      // Use of template string literals
+      item.name = `chopped: ${item.name}`;
+      return item;
+    });
+  }
+
+  function demoReduce(bread, fillings, sauce) {
+    const initial = { sandwich: {
+      bread: bread,
+      sauce: sauce,
+      fillings: []
+    }};
+
+    return fillings.reduce((res, item) => {
+      res.sandwich.fillings.push(item.name);
+      return res;
+    }, initial);
+  }
+
+  function demo() {
+    console.log('\n\nARRAY FUNCTIONS');
+
+    const breads = [
+      'Wheat bread',
+      'Honey oat bread',
+    ];
+
+    const sauces = [
+      'Mayo',
+      'Mustard',
+      'Mint'
+    ];
+
+    const fillings = [
+      {
+        'name': 'Cheese',
+        'type': 'veg'
+      },
+      {
+        'name': 'Cucumber',
+        'type': 'veg'
+      },
+      {
+        'name': 'Tomatoes',
+        'type': 'veg'
+      },
+      {
+        'name': 'Chicken',
+        'type': 'non-veg'
+      },
+      {
+        'name': 'Lettuce',
+        'type': 'veg'
+      }
+    ];
+
+    console.log('Available Ingredients -----------------');
+    console.log('Breads -----------------');
+    demoForEach(breads);
+    console.log('Fillings ---------------');
+    demoForEach(fillings);
+    console.log('Sauces -----------------');
+    demoForEach(sauces);
+
+    const bread = demoFilter(breads, b => b === 'Wheat bread');
+    const sauce = demoFilter(sauces, b => b === 'Mustard');
+
+    const vegFillings = demoFilter(fillings);
+    const choppedFillings = demoMap(vegFillings);
+
+    console.log('Final Ingredients -----------------');
+    demoForEach(bread);
+    demoForEach(vegFillings, f => console.log(f.name));
+    demoForEach(sauce);
+
+    /**
+     * Expected output
+     * {
+     *  sandwich: {
+     *    bread: '...',
+     *    fillings: [ item1, item2, ...]
+     *    sauce: [...]
+     *  }
+     * }
+     */
+
+    const sandwich = demoReduce(bread, choppedFillings, sauce);
+
+    console.log('Here is your Sandwich! -----------------');
+    console.log(sandwich);
+
+    reduceExampleExtra();
+  };
+
+  function reduceExampleExtra() {
+    const input = [
+      {
+        id: '1234',
+        'name': 'John Doe',
+        'age': 27,
+      },{
+        id: '5678',
+        'name': 'James Bond',
+        'age': 31,
+      },
+    ];
+    const output = input.reduce((acc, emp) => {
+      // Use of object destructuring
+      const { name, age } = emp;
+      // Use of object literals
+      acc[emp.id] = { name, age };
+      return acc;
+    }, {});
+
+    console.log(input);
+    console.log(output);
+  }
+
+  (context || this).demoLibs['array-func'] = demo;
+})(window);

arrow-func/index.js

@@ -0,0 +1,28 @@
+(function(context) {
+
+  function printUpperCase() {
+    const self = this;
+    console.log(self);
+    self.string = self.string.toUpperCase();
+    return function() {
+      console.log(this); // window this
+      console.log(this.string);
+      console.log(self.string);
+    }
+  }
+
+  function printUpperCaseFatArrow() {
+    console.log(this);
+    this.string = this.string.toUpperCase();
+    return () => console.log(this.string);
+  }
+
+  function demo() {
+    console.log('\n\nARROW FUNCTIONS');
+
+    printUpperCase.call({ string: 'Hello John Doe' })();
+    printUpperCaseFatArrow.call({ string: 'Hello John Doe' })();
+  };
+
+  (context || this).demoLibs['arrow-func'] = demo;
+})(window);

bind-call-apply/index.js

@@ -0,0 +1,62 @@
+(function(context) {
+
+  const personJohnDoe = {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 28,
+    getFullName: function() {
+      console.log(`${this.firstName} ${this.lastName}`);
+    }
+  }
+
+  const personJamesBond = {
+    firstName: 'James',
+    lastName: 'Bond',
+  };
+
+  function print(shouldIndent) {
+    const lb = shouldIndent ? '\n' : '';
+    console.log(`${this.firstName} ${lb}${this.lastName}, ${lb}${this.age}`);
+  }
+
+  function greet(language, firstName, lastName) {
+    let greet = 'Hello';
+    if (language === 'es') {
+      greet = 'Hola';
+    }
+    console.log(`${greet}, ${firstName} ${lastName}`);
+  }
+
+  function bindDemo() {
+    console.log('\nBIND ----------');
+    print.bind(personJohnDoe)();
+    personJohnDoe.getFullName();
+    personJohnDoe.getFullName.bind(personJamesBond)();
+    const printJohnDoeWithIndent = print.bind(personJohnDoe, true);
+    printJohnDoeWithIndent();
+  }
+
+  function callDemo() {
+    console.log('\nCALL ----------');
+    print.call(personJohnDoe);
+    print.call(personJohnDoe, true);
+    personJohnDoe.getFullName.call(personJamesBond);
+  }
+
+  function applyDemo() {
+    console.log('\nAPPLY ----------');
+    print.apply(personJohnDoe);
+    print.apply(personJohnDoe, [true]);
+    greet.apply(this, ['es', 'Sumeet', 'Sarkar']);
+  }
+
+  function demo() {
+    console.log('\n\nBIND CALL APPLY');
+    bindDemo();
+    callDemo();
+    applyDemo();
+    // real world apply/ call demo
+  };
+
+  (context || this).demoLibs['bind-call-apply'] = demo;
+})(window);

closures/index.js

@@ -0,0 +1,35 @@
+(function(context) {
+
+  function successCallback(data) {
+    return function() {
+      const minimumAge = 21;
+      data = JSON.parse(data);
+      if (data.age < minimumAge) {
+          return `Deny User - Age less than ${minimumAge}`;
+      }
+      return 'Allow User';
+    }
+  }
+
+  function longRunningTask(url, success, failure) {
+    if(url) {
+      return success('{\"name\":\"John Doe\",\"age\":27}');
+    } else {
+      return failure(404, 'no resource found');
+    }
+  }
+
+  function failureCallback(error, reason) {
+    return function() {
+      console.log(`${error} - ${reason}`);
+    }
+  }
+
+  function demo() {
+    console.log('\n\nCLOSURES');
+    const returnVal = longRunningTask('sample-url', successCallback, failureCallback);
+    console.log(returnVal());
+  };
+
+  (context || this).demoLibs['closures'] = demo;
+})(window);