Skip to content

Commit b334bcb

Browse files
last-endcodelast-endcode
committed
update
1 parent 5a5930e commit b334bcb

14 files changed

+299
-21
lines changed

‎ES6/08_arrow_functions_selectelement_this.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Arrow functions or Fat arrow functions
2+
// reg function : 'this' refers parent, left of the dot
3+
// arrow function : referes to it's cureent surrounding scope
4+
5+
// first example use re function
6+
7+
const btn = document.querySelector('.btn');
8+
// console.log(btn);
9+
10+
// Disini dia bisa merubah warna menggunakan reg function
11+
// karena this parentnya merujuk pada btn dot
12+
// btn.addEventListener('click', function () {
13+
// this.style.background = 'black';
14+
// });
15+
16+
// sedangkan menggunakan arrow dia akan error
17+
// karena sebuah this nya dia merujuk pada window obj()
18+
// btn.addEventListener('click', () => {
19+
// // console.log(this); global window obj {}
20+
// this.style.background = 'black';
21+
// });
22+
23+
// terkecuali kita membuat setTimeout 2seconds
24+
// bisa menggunakan arrow karna dalam setTimeout
25+
// arrow function merujuk pada sekitaran scope
26+
// sedangkan jika mnggunakan function dia bukn mrujuk
27+
// pada parrent tapi window global obj()
28+
btn.addEventListener('click', function () {
29+
setTimeout(() => {
30+
this.style.background = 'navy';
31+
}, 2000);
32+
});

‎ES6/09_defaultparameter_hoisting_gotchas.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// default paramaters, arrow function gothcas
2+
3+
const john = 'john';
4+
sayHi(); // not error cz john already declare
5+
const peter = 'peter';
6+
7+
function sayHi(person = john) {
8+
console.log(`Hi ${person}`);
9+
}
10+
11+
sayHello(); //error cz sayHello not declare
12+
const sayHello = (person = 'bobo') => console.log(`Hello ${person}`);

‎ES6/10_array_destructing.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Destructuring
2+
// faster/easier way to access/unpack values from arrays
3+
// objects into variables
4+
// Arrays
5+
6+
const fruits = ['orange', 'banana', 'lemon'];
7+
const friends = ['john', 'peter', 'bob', 'anna', 'kelly'];
8+
9+
const orange = fruits[0];
10+
const banana = fruits[1];
11+
const lemon = fruits[2];
12+
13+
// console.log(orange, banana, lemon);
14+
15+
// example array assign to friends
16+
// susan disini menjadi undefined karena index friend hanya
17+
// berisi 4 index 0-4 sehingga susan menjadi undefined
18+
// const [john, peter, bob, anna, kelly, susan] = friends;
19+
// console.log(john, peter, bob, anna, kelly, susan);
20+
21+
// dan untuk menskip misal peter anna di hilangkan
22+
// dalam pendeklarasian const hilangkan dgn comma
23+
const [john, , bob, , kelly] = friends;
24+
console.log(john, bob, kelly); //john, bob, kelly
25+
26+
/*
27+
note const [john, bob, ...] nama bebas karna mau nama apapun
28+
dia akan menghasilkan value yang berada dalam array friends
29+
30+
*/

‎ES6/11_swap_variables.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// Destructuring swap variables
2+
// faster/easier way to access/ unpack from arrays
3+
// objects into variables
4+
// arrays
5+
6+
let first = 'bob';
7+
let second = 'john';
8+
9+
// let temp = second;
10+
// second = first; //bob
11+
// first = temp; // john
12+
13+
// artinya adalah
14+
// second untuk first / john
15+
// first untuk second / bob
16+
[second, first] = [first, second];
17+
18+
console.log(first, second); // john bob

‎ES6/12_obj_destructuring.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Destructuring
2+
// faster/easier way to access/ unpack from arrays
3+
// objects into variables
4+
// objects
5+
6+
const bob = {
7+
first: 'bob',
8+
last: 'sanders',
9+
city: 'chicago',
10+
siblings: {
11+
sister: 'jane',
12+
},
13+
};
14+
15+
// sama dgn swap variable array tadi
16+
// dan disini juga bisa menggunakan first:firstName
17+
// firstName adalah semacam tag
18+
// dan tuk mengakses jane menggunakan function
19+
// siblings:{sister:nametag}
20+
const {
21+
first: firstName,
22+
last,
23+
city,
24+
siblings: { sister: favoriteSibling },
25+
} = bob;
26+
console.log(firstName, last, city, favoriteSibling);
27+
28+
// const firstName = bob.first;
29+
// const lastName = bob.last;
30+
// const sister = bob.siblings.sister;
31+
// console.log(firstName, lastName, sister);

‎ES6/13.destructuring_function_param.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Destructuring
2+
// faster/easier way to access/ unpack from arrays
3+
// objects into variables
4+
// objects
5+
6+
const bob = {
7+
first: 'bob',
8+
last: 'sanders',
9+
city: 'chicago',
10+
siblings: {
11+
sister: 'jane',
12+
},
13+
};
14+
15+
function printPerson({ first, last, city }) {
16+
console.log(first, last, city);
17+
}
18+
19+
printPerson(bob); // bob sanders chicago

‎ES6/14_new_string_method.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// new string methods
2+
// startsWith(), endsWith(), includes(), repeat()
3+
4+
const person = 'Peter Smith';
5+
const employee = '23456-EMP-PETER-SMITH';
6+
const manager = '23456-MAN-JOHN-DOE';
7+
8+
// remember this case sensitive
9+
10+
// startsWith()
11+
console.log(person.startsWith('Pe')); //true
12+
console.log(person.startsWith('pe')); //false
13+
// 6 and hitung dimulai dari 23456- sebelum EMP total 6
14+
console.log(employee.startsWith('EMP', 6)); //true
15+
16+
//endsWith()
17+
console.log(manager.endsWith('DOE')); //true
18+
console.log(manager.endsWith('doe')); //false
19+
// hitung dari awal sampai sesudah john
20+
console.log(manager.endsWith('JOHN', 14)); //true
21+
22+
// repeat()
23+
const theRepeat = (person, amount = 3) => person.repeat(amount);
24+
25+
const multiple = theRepeat(person, 20);
26+
console.log(multiple);

‎ES6/15_for_of_loop.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// for of - loops through the values of an iterable objc
2+
// string, arrayy, map, set , etc - not object
3+
// unlike foreach - we can use break , continue
4+
5+
const fruits = ['apple', 'orange', 'banana', 'peach'];
6+
const longName = 'john smith pepper III';
7+
let shortName = '';
8+
9+
for (const letterName of longName) {
10+
if (letterName === ' ') {
11+
continue;
12+
} else {
13+
shortName += letterName;
14+
}
15+
}
16+
// console.log(shortName); //johnsmithpepperIII
17+
18+
for (const fruit of fruits) {
19+
if (fruit === 'banana') {
20+
// continue;
21+
break;
22+
}
23+
console.log(fruit); // apple, orange, peach
24+
// jika continue banana dilewat
25+
// jika break stop sampai orange
26+
}

‎ES6/16_spread_operator.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Spread operator
2+
// Allows an iterable to spread / expand individually inside reciever
3+
// Split into single items and copy them
4+
5+
const udemy = 'udemy';
6+
7+
const letter = [...udemy]; // [ 'u', 'd', 'e', 'm', 'y' ]
8+
9+
// console.log(letter);
10+
11+
const boys = ['john', 'peter', 'bob'];
12+
const girls = ['susan', 'anna'];
13+
const bestFriend = 'arnold';
14+
15+
const friend = [...boys, ...girls, bestFriend];
16+
console.log(friend);
17+
// [ 'john', 'peter', 'bob', 'susan', 'anna', 'arnold' ]
18+
19+
// reference
20+
// const newFriends = friend;
21+
const newFriends = [...friend]; //but if use spread friend still use originall array
22+
newFriends[0] = 'jane';
23+
console.log(newFriends); //john will change be jane
24+
console.log(friend); //john will change be jane cz with allocate same memory if use re-assign

‎ES6/17_spreadoperator_objects.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// spread operator....
2+
// Allows an iterable to spread/expand indvidually inside reciever
3+
// split into single items and copy them.
4+
// ES2018/ ES8
5+
6+
const person = { name: 'mugiwara', job: 'pirates' };
7+
let copyPerson = { ...person };
8+
console.log(copyPerson);
9+
// dan tuk menambah obj bisa langsung
10+
copyPerson = { ...person, age: '25', name: 'rorona zoro' };
11+
console.log(copyPerson); // {name:'rorona zoro',job:'pirates',age:25}
12+
console.log(person); //still orignal {name:'mugiwara',job:'pirates'}

0 commit comments

Comments
 (0)