update

Author: last-endcode

ES6/01_var_let_const.js

@@ -0,0 +1,35 @@
+// var, let , const
+// update, redifine
+
+// menggunakan var tidak masuk akal
+// karena dia bisa redifine ulang
+var name = 'dncode';
+console.log(name); //dncode
+name = 'john doe';
+console.log(name); //john doe
+var name = 'orange';
+console.log(name); // orange
+
+// **** let
+console.log('**************LET****************');
+let names = 'jane';
+console.log(names);
+names = 'susy';
+console.log(names); // susy
+// let names = 'orange'; // will error but this make sense!
+
+console.log('**************CONST****************');
+const person = 'codeone';
+console.log(person); //codeone
+// person = 'codetwo'; //will error but this make sense!
+const firstName = {
+  name: 'john doe',
+};
+
+console.log(firstName.name);
+// redefine again for object its CAN
+firstName.name = 'Edward NewGate';
+console.log(firstName.name); // Edward NewGate
+// add obj
+firstName.address = 'Blue Sea';
+console.log(firstName);

ES6/02_global_scope.js

@@ -0,0 +1,32 @@
+// global
+let names = 'dncode';
+let result = 'true';
+
+if (true) {
+  let names = 'john doe inside if';
+  console.log(`this is true`);
+}
+
+console.log(names);
+/* output:
+this is true
+dncode
+
+if will print for first cz true
+and names still dncode because let names on if statement is local variable not global
+*/
+
+// example again
+{
+  let shpName = 'mugiawara no lutfy';
+  console.log(`${shpName} & ${names}`);
+}
+
+{
+  let shpName = 'mugiawara no lutfy';
+  console.log(`${shpName} & ${names}`);
+}
+
+// outpus is: dncode will print cause is global variable
+// mugiawara no lutfy & dncode
+// mugiawara no lutfy & dncode

ES6/03_template_string.js

@@ -0,0 +1,12 @@
+// template string
+
+let names = 'mugiwara no lutfy';
+const member = 'shp';
+const yearsAge = 2001;
+
+const printhere = `Hello my name is ${names} and member from ${member.toUpperCase()} and my ages is ${
+  2020 - yearsAge
+}`;
+console.log(printhere);
+
+// Hello my name is mugiwara no lutfy and member from SHP and my ages is 19

ES6/04_template_html.js

@@ -0,0 +1,19 @@
+const shpList = {
+  names: 'lutfy',
+  pirates: 'shp',
+  members: ['zoro', 'sanji', 'nami'],
+};
+
+const content = document.getElementById('info-content');
+
+// field content use innerHTML
+content.innerHTML = `
+<p>${shpList.names} ${shpList.pirates.toUpperCase()}</p>
+<ul>List member from ${shpList.pirates.toUpperCase()}
+${shpList.members
+  .map((item) => {
+    return `<li>${item.toUpperCase()}</li>`;
+  })
+  .join('')}
+</ul>
+`;

ES6/05_template_tag.js

@@ -0,0 +1,19 @@
+const content = document.getElementById('content');
+
+const person = {
+  name: 'john doe',
+  job: 'developer',
+};
+
+const quote = modifedStyle`Hello my name is ${person.name.toUpperCase()} and my job as ${person.job.toUpperCase()} `;
+content.innerHTML = quote;
+
+// function modifedStyle
+function modifedStyle(text, ...vars) {
+  // console.log(text, vars);
+  const awesomeText = text.map((item, index) => {
+    return `${item} <strong class="blue">${vars[index] || ''}</strong>`;
+  });
+
+  return awesomeText.join('');
+}

ES6/06_arrow_functions_basics.js

@@ -0,0 +1,62 @@
+// arrow functions or fat arrow functions
+// no name, always expressions, assign to varibles
+// not function keyword
+// 'this'
+
+// function sayHi() {
+//   console.log(`Hello World`);
+// }
+// sayHi();
+
+// const hello = function (name) {
+//   console.log(`Hello ${name}`);
+// };
+// hello('john');
+
+// function triple(value1, value2) {
+//   return value1 * value2 * 3;
+// }
+
+const helloMan = () => console.log(`Hello World !`);
+helloMan();
+
+// one parameter
+const double = (value) => value * 20;
+const result = double(20);
+console.log(result);
+
+// two parameter
+// remember use { return }
+const multiple = (num1, num2) => {
+  const result = num1 * num2;
+  return result;
+};
+
+const sum = multiple(100, 10);
+console.log(sum);
+
+// return obj
+// disini menggunakan ({obj})
+// agar js tidak bingung shingga dibutuhkan ()
+const obj = () => ({ name: 'john', age: 25 });
+const person = obj();
+console.log(person);
+
+// example again use filter
+const numbers = [20, 30, 40, 50];
+
+const highNumber = numbers.filter((number, index) => {
+  console.log(index); //print index 0,1,2,3
+  return number < 20; // false [] cz small then 20 not there is no
+});
+console.log(highNumber);
+
+// addEventListener
+const btn = document.querySelector('.btn');
+
+btn.addEventListener(
+  'click',
+  () => (
+    (btn.style.background = 'black'), (btn.style.textTransform = 'uppercase')
+  )
+);

ES6/07_arrow_functions_object_this.js

@@ -0,0 +1,28 @@
+// Arrow functions or Fat Arrow Functions
+// reg function : 'this' refers parent, left of the dot
+// arrow function: referes to it's current surrounding scope
+
+const bob = {
+  firstName: 'bobo',
+  lastName: 'smith',
+  sayName: function () {
+    console.log(this);
+    setTimeout(() => {
+      console.log(this);
+      console.log(`Hello my name is ${this.firstName} ${this.lastName}`);
+    }, 2000);
+  },
+};
+
+const anna = {
+  firstName: 'anna',
+  lastName: 'sanders',
+  sayName: () => {
+    console.log(this);
+    console.log(`Hello my name is ${this.firstName} ${this.lastName}`);
+  },
+};
+
+// invoke
+bob.sayName();
+// anna.sayName();

ES6/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      body {
+        text-transform: capitalize;
+        display: grid;
+        place-items: center;
+        min-height: 100vh;
+      }
+
+      .btn {
+        background: red;
+        color: #fff;
+        border-radius: 0.5rem;
+        text-transform: capitalize;
+        cursor: pointer;
+        font-size: 1.5rem;
+        padding: 1rem 4rem;
+      }
+    </style>
+  </head>
+  <body>
+    <button class="btn">click me</button>
+  </body>
+  <!-- <script src="./06_arrow_functions_basics.js"></script> -->
+  <script src="./07_arrow_functions_object_this.js"></script>
+</html>