update

Author: last-endcode

ES6/08_arrow_functions_selectelement_this.js

@@ -0,0 +1,32 @@
+// Arrow functions or Fat arrow functions
+// reg function : 'this' refers parent, left of the dot
+// arrow function : referes to it's cureent surrounding scope
+
+// first example use re function
+
+const btn = document.querySelector('.btn');
+// console.log(btn);
+
+// Disini dia bisa merubah warna menggunakan reg function
+// karena this parentnya merujuk pada btn dot
+// btn.addEventListener('click', function () {
+//   this.style.background = 'black';
+// });
+
+// sedangkan menggunakan arrow dia akan error
+// karena sebuah this nya dia merujuk pada window obj()
+// btn.addEventListener('click', () => {
+//   // console.log(this); global window obj {}
+//   this.style.background = 'black';
+// });
+
+// terkecuali kita membuat setTimeout 2seconds
+// bisa menggunakan arrow karna dalam setTimeout
+// arrow function merujuk pada sekitaran scope
+// sedangkan jika mnggunakan function dia bukn mrujuk
+// pada parrent tapi window global obj()
+btn.addEventListener('click', function () {
+  setTimeout(() => {
+    this.style.background = 'navy';
+  }, 2000);
+});

ES6/09_defaultparameter_hoisting_gotchas.js

@@ -0,0 +1,12 @@
+// default paramaters, arrow function gothcas
+
+const john = 'john';
+sayHi(); // not error cz john already declare
+const peter = 'peter';
+
+function sayHi(person = john) {
+  console.log(`Hi ${person}`);
+}
+
+sayHello(); //error cz sayHello not declare
+const sayHello = (person = 'bobo') => console.log(`Hello ${person}`);

ES6/10_array_destructing.js

@@ -0,0 +1,30 @@
+// Destructuring
+// faster/easier way to access/unpack values from arrays
+// objects into variables
+// Arrays
+
+const fruits = ['orange', 'banana', 'lemon'];
+const friends = ['john', 'peter', 'bob', 'anna', 'kelly'];
+
+const orange = fruits[0];
+const banana = fruits[1];
+const lemon = fruits[2];
+
+// console.log(orange, banana, lemon);
+
+// example array assign to friends
+// susan disini menjadi undefined karena index friend hanya
+// berisi 4 index 0-4 sehingga susan menjadi undefined
+// const [john, peter, bob, anna, kelly, susan] = friends;
+// console.log(john, peter, bob, anna, kelly, susan);
+
+// dan untuk menskip misal peter anna di hilangkan
+// dalam pendeklarasian const hilangkan dgn comma
+const [john, , bob, , kelly] = friends;
+console.log(john, bob, kelly); //john, bob, kelly
+
+/* 
+note const [john, bob, ...] nama bebas karna mau nama apapun
+dia akan menghasilkan value yang berada dalam array friends
+
+*/

ES6/11_swap_variables.js

@@ -0,0 +1,18 @@
+// Destructuring swap variables
+// faster/easier way to access/ unpack from arrays
+// objects into variables
+// arrays
+
+let first = 'bob';
+let second = 'john';
+
+// let temp = second;
+// second = first; //bob
+// first = temp; // john
+
+// artinya adalah
+// second untuk first / john
+// first untuk second / bob
+[second, first] = [first, second];
+
+console.log(first, second); // john bob

ES6/12_obj_destructuring.js

@@ -0,0 +1,31 @@
+// Destructuring
+// faster/easier way to access/ unpack from arrays
+// objects into variables
+// objects
+
+const bob = {
+  first: 'bob',
+  last: 'sanders',
+  city: 'chicago',
+  siblings: {
+    sister: 'jane',
+  },
+};
+
+// sama dgn swap variable array tadi
+// dan disini juga bisa menggunakan first:firstName
+// firstName adalah semacam tag
+// dan tuk mengakses jane menggunakan function
+// siblings:{sister:nametag}
+const {
+  first: firstName,
+  last,
+  city,
+  siblings: { sister: favoriteSibling },
+} = bob;
+console.log(firstName, last, city, favoriteSibling);
+
+// const firstName = bob.first;
+// const lastName = bob.last;
+// const sister = bob.siblings.sister;
+// console.log(firstName, lastName, sister);

ES6/13.destructuring_function_param.js

@@ -0,0 +1,19 @@
+// Destructuring
+// faster/easier way to access/ unpack from arrays
+// objects into variables
+// objects
+
+const bob = {
+  first: 'bob',
+  last: 'sanders',
+  city: 'chicago',
+  siblings: {
+    sister: 'jane',
+  },
+};
+
+function printPerson({ first, last, city }) {
+  console.log(first, last, city);
+}
+
+printPerson(bob); //  bob sanders chicago

ES6/14_new_string_method.js

@@ -0,0 +1,26 @@
+// new string methods
+// startsWith(), endsWith(), includes(), repeat()
+
+const person = 'Peter Smith';
+const employee = '23456-EMP-PETER-SMITH';
+const manager = '23456-MAN-JOHN-DOE';
+
+// remember this case sensitive
+
+// startsWith()
+console.log(person.startsWith('Pe')); //true
+console.log(person.startsWith('pe')); //false
+// 6 and hitung dimulai dari 23456- sebelum EMP total 6
+console.log(employee.startsWith('EMP', 6)); //true
+
+//endsWith()
+console.log(manager.endsWith('DOE')); //true
+console.log(manager.endsWith('doe')); //false
+// hitung dari awal sampai sesudah john
+console.log(manager.endsWith('JOHN', 14)); //true
+
+// repeat()
+const theRepeat = (person, amount = 3) => person.repeat(amount);
+
+const multiple = theRepeat(person, 20);
+console.log(multiple);

ES6/15_for_of_loop.js

@@ -0,0 +1,26 @@
+// for of - loops through the values of an iterable objc
+// string, arrayy, map, set , etc - not object
+// unlike foreach - we can use break , continue
+
+const fruits = ['apple', 'orange', 'banana', 'peach'];
+const longName = 'john smith pepper III';
+let shortName = '';
+
+for (const letterName of longName) {
+  if (letterName === ' ') {
+    continue;
+  } else {
+    shortName += letterName;
+  }
+}
+// console.log(shortName); //johnsmithpepperIII
+
+for (const fruit of fruits) {
+  if (fruit === 'banana') {
+    // continue;
+    break;
+  }
+  console.log(fruit); // apple, orange, peach
+  // jika continue banana dilewat
+  // jika break stop sampai orange
+}

ES6/16_spread_operator.js

@@ -0,0 +1,24 @@
+// Spread operator
+// Allows an iterable to spread / expand individually inside reciever
+// Split into single items and copy them
+
+const udemy = 'udemy';
+
+const letter = [...udemy]; // [ 'u', 'd', 'e', 'm', 'y' ]
+
+// console.log(letter);
+
+const boys = ['john', 'peter', 'bob'];
+const girls = ['susan', 'anna'];
+const bestFriend = 'arnold';
+
+const friend = [...boys, ...girls, bestFriend];
+console.log(friend);
+// [ 'john', 'peter', 'bob', 'susan', 'anna', 'arnold' ]
+
+// reference
+// const newFriends = friend;
+const newFriends = [...friend]; //but if use spread friend still use originall array
+newFriends[0] = 'jane';
+console.log(newFriends); //john will change be jane
+console.log(friend); //john will change be jane cz with allocate same memory if use re-assign

ES6/17_spreadoperator_objects.js

@@ -0,0 +1,12 @@
+// spread operator....
+// Allows an iterable to spread/expand indvidually inside reciever
+// split into single items and copy them.
+// ES2018/ ES8
+
+const person = { name: 'mugiwara', job: 'pirates' };
+let copyPerson = { ...person };
+console.log(copyPerson);
+// dan tuk menambah obj bisa langsung
+copyPerson = { ...person, age: '25', name: 'rorona zoro' };
+console.log(copyPerson); // {name:'rorona zoro',job:'pirates',age:25}
+console.log(person); //still orignal {name:'mugiwara',job:'pirates'}

ES6/18_spread_obj.js

@@ -0,0 +1,13 @@
+const title = document.querySelectorAll('h1');
+const result = document.querySelector('.result');
+
+// solusi harus dibuatkan array krna masih node-list
+// kemudian baru bisa menggunakan map,
+// gunakan template string dan jgnlupkan .join
+const titles = [...title]
+  .map((item) => `<span>${item.textContent}</span>`)
+  .join('');
+// console.log(titles); // array [h1,h1,h1]
+
+result.innerHTML = titles;
+// JavaScripthtml5css3

ES6/19_spread_function-argument.js

@@ -0,0 +1,16 @@
+const numbers = [90, 34, 78, 54, 556];
+
+// will error because you should spread operator
+// console.log(Math.max(numbers)); // NaN
+// console.log(Math.max(...numbers)); //556
+
+// example again use function
+// actually concept still same
+
+const fullName = ['mugiwara no', 'lutfy'];
+const person = (firstName, lastName) => {
+  console.log(`Hello ${firstName} ${lastName}`);
+};
+
+// person(fullName[0], fullName[1]);
+person(...fullName); //effective use spread

ES6/20_rest_operator.js

@@ -0,0 +1,33 @@
+// Rest operator
+// collcets the items
+// note jangan menyimpan rest di depan
+// selalu simpan rest operator di belakang selalu
+
+// arrays
+const shp = ['mugiwara', 'zoro', 'sanji'];
+const [pirates, second, ...rest] = shp;
+// mugiwara zoro [ 'sanji' ]
+// console.log(pirates, second, rest);
+
+// obj
+const person = {
+  name: 'shanks',
+  member: 'RHP',
+};
+
+const { name: firstName, member, ...rest_ } = person;
+// console.log(firstName, member, rest_); //shanks RHP {}
+
+// function
+const allbanking = [10, 10, 10];
+function getPerson(fullName, ...banking) {
+  console.log(fullName, banking);
+  let total = 0;
+  for (const value of banking) {
+    total += value;
+  }
+  console.log(`Hello ${fullName} your banking is ${total}`);
+}
+
+getPerson(person.name, 10, 10, 10);
+getPerson(person.name, ...allbanking);

ES6/index.html

@@ -4,28 +4,14 @@
     <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>
+    <style></style>
   </head>
   <body>
-    <button class="btn">click me</button>
+    <h1>JavaScript</h1>
+    <h1>html5</h1>
+    <h1>css3</h1>
+    <div class="result"></div>
   </body>
-  <!-- <script src="./06_arrow_functions_basics.js"></script> -->
-  <script src="./07_arrow_functions_object_this.js"></script>
+  <!-- <script src="18_spread_obj.js"></script> -->
+  <script src="20_rest_operator.js"></script>
 </html>