Skip to content

Commit ce65bf5

Browse files
last-endcodelast-endcode
committed
update
1 parent aff5b93 commit ce65bf5

12 files changed

+235
-186
lines changed

‎Objects/03_this_basics.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
const shp_list = {
2-
firstName: 'mugiwara no',
3-
lastName: 'luffy',
4-
sayToHello: function () {
5-
console.log(`Hello captain ${this.firstName} ${this.lastName}`);
1+
// this basics
2+
// point from objects
3+
4+
const mugiwara = {
5+
name: 'lutfy',
6+
memberShp: true,
7+
sayHi: function () {
8+
console.log(`hello ${this.name} your ${this.memberShp} from SHP`);
69
},
710
};
811

9-
// this keyword get value object dari dalam object itu sndiri
10-
shp_list.sayToHello();
12+
mugiwara.sayHi(); //hello lutfy your true from SHP
13+
console.log(this); // here {} this windows

‎Objects/03a_this_advanced.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
defaults to global - window
3+
arrow functions - pump the breaks
4+
*/
5+
6+
// console.log(this);
7+
8+
function showThis() {
9+
console.log(this);
10+
}
11+
12+
const john = {
13+
name: 'john',
14+
usetFunctionThis: showThis,
15+
};
16+
17+
const boby = {
18+
name: 'boby',
19+
usetFunctionThis: showThis,
20+
};
21+
22+
// print with the obj
23+
john.usetFunctionThis(); // {name: "john", usetFunctionThis: ƒ}
24+
boby.usetFunctionThis(); //{name: "boby", usetFunctionThis: ƒ}
25+
26+
// Tapi jika tanpa object dot notation
27+
// atau hanya function normal
28+
// otomatis dia akan menghasilkan default window global
29+
showThis(); // Window
30+
31+
// contoh
32+
const btn1 = document.querySelector('.btn-1');
33+
const btn2 = document.querySelector('.btn-2');
34+
35+
// addEvent
36+
// btn1.addEventListener('click', showThis);
37+
btn2.addEventListener('click', showThis);
38+
39+
// ketika diklik btn1/btn2 dia akan menghasilkan
40+
// element <button class="btn-1">button 1</button>
41+
// karena langsung merujuk pada showThis
42+
43+
// tapi jika
44+
btn1.addEventListener('click', function () {
45+
showThis(); // window menjadi normal
46+
});

‎Objects/04_factory_function.js

+19-37
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,28 @@
1-
// blue print
2-
// factory function and constructor functions
3-
// factory functions for return obj & based on parameter
4-
//
1+
// A factory function is any function which is not a class or constructor that returns a (presumably new) object.
2+
// In JavaScript, any function can return an object. When it does so without the new keyword,
3+
// it’s a factory function.
54

6-
// *** remember heres not dynamic
7-
// here if add text i love js for john
8-
// its good but how for bobby, or 3000 obj with name?
9-
// for solution you need factory functions
10-
11-
// const john = {
12-
// firstName: 'john',
13-
// lastName: 'doe',
14-
// fullName: function () {
15-
// console.log(`my full name is ${this.firstName} ${this.lastName}
16-
// i love js`);
17-
// },
18-
// };
19-
20-
// const bob = {
21-
// firstName: 'bob',
22-
// lastName: 'walker',
23-
// fullName: function () {
24-
// console.log(`my full name is ${this.firstName} ${this.lastName}`);
25-
// },
26-
// };
27-
28-
// ***** Factory Function
29-
function createPerson(firstName, lastName) {
5+
// create function
6+
function createMemberShp(firstName, lastName) {
7+
// remember use return here
308
return {
319
firstName: firstName,
3210
lastName: lastName,
3311
fullName: function () {
34-
console.log(`My name is ${this.firstName} ${this.lastName} i love JS`);
12+
console.log(`Hello ${this.firstName} ${this.lastName}`);
3513
},
3614
};
3715
}
3816

39-
const john = createPerson('john', 'doe');
40-
john.fullName();
41-
const bob = createPerson('bob', 'walker');
42-
bob.fullName();
43-
const susy = createPerson('susy', 'kane');
44-
susy.fullName();
45-
const kelly = createPerson('kelly', 'jane');
46-
kelly.fullName();
17+
// dont forget field argument cz function use param
18+
const lutfy = createMemberShp('mugiwara no', 'luttfy');
19+
lutfy.fullName(); // Hello mugiwara no luttfy
20+
const zoro = createMemberShp('Roronoa', 'Zorro');
21+
zoro.fullName(); //Hello Roronoa Zorro
22+
23+
/*****
24+
Cara ini lebih efektif dibandingkan harus membuat object
25+
seperti membuat object lutfy terlebih dahulu, dilanjut
26+
dengan object zoro terlebih dahulu jika harus membuat 3000 lebih
27+
tidak efektif juga jadi factory funciton adalah solusinya..
28+
******/

‎Objects/05_constructor_function.js

+21-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,30 @@
1+
//we need a "blueprint" for creating many objects of the same "type".
12
// constructor function
23
// new - creates new object, points to it, omit return
3-
function person(firstName, lastName) {
4+
5+
// create constructor function
6+
function MemberSHP(firstName, lastName) {
7+
// * use this for new instance & assign use param
48
this.firstName = firstName;
59
this.lastName = lastName;
610
this.fullName = function () {
7-
console.log(`my full name is ${this.firstName} ${this.lastName}`);
11+
console.log(`Hello ${this.firstName} ${this.lastName}`);
812
};
9-
console.log(this);
13+
// console.log(this);
1014
}
1115

12-
// access obj use new
16+
// create blue print use NEW keyword
17+
const lutfy = new MemberSHP('mugiwara no', 'lutfy');
18+
lutfy.fullName(); // Hello mugiwara no lutfy
19+
const zoro = new MemberSHP('Rorona', 'Zoro');
20+
zoro.fullName(); //Hello Rorona Zoro
21+
22+
/*
23+
CATATAN
24+
jika this.firstName di hapus this nya maka obj yang dibuat menjadi undefined
25+
misal this.firstName = firstName menjadi firstName = firstName
26+
otomatis hasilnya menjadi Hello undefined lutfy, karena parameter pertama tidak merujuk
27+
pada objek yang dibuat, dan selalu ingat bahwa point dari object adalah karena this,
28+
dan this merujuk pada object yang dibuat, dan objek yang dibuat merujuk pada this.
1329
14-
const john = new person('john', 'doe');
15-
john.fullName();
16-
const boby = new person('boby', 'walker');
17-
boby.fullName();
18-
const susy = new person('susy', 'dane');
19-
susy.fullName();
30+
*/

‎Objects/06_constructor_property.js

+37-21
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
1-
// all objects in JS have access to constructor
2-
// property that returuns a constructor function that created it
3-
// built in constructor function
4-
// arrays and functions are object in JS
1+
/* All Objects in JS have access to constructor
2+
property that returns a constructor function that created it
3+
// built in constructor functions
4+
// arrays and functions are objects in javascript
5+
*/
56

6-
function person(firstName, lastName) {
7+
// create constructor function
8+
function MemberSHP(firstName, lastName) {
9+
// * use this for new instance & assign use param
710
this.firstName = firstName;
811
this.lastName = lastName;
912
this.fullName = function () {
10-
console.log(
11-
`my full name is ${this.firstName} ${this.lastName}, i love JS`
12-
);
13+
console.log(`Hello ${this.firstName} ${this.lastName}`);
1314
};
15+
// console.log(this);
1416
}
1517

16-
// here example constructor function
17-
// *** obj, array, function
18+
// create blue print use NEW keyword
19+
const lutfy = new MemberSHP('mugiwara no', 'lutfy');
1820

19-
const john = new person('john', 'doe');
20-
// console.log(john.constructor);
21+
// check constructor property
22+
console.log(lutfy.constructor);
23+
const thisArray = [];
24+
console.log(thisArray.constructor);
25+
const thisObj = {};
26+
console.log(thisObj.constructor);
27+
const thisFunc = function () {};
28+
console.log(thisFunc.constructor);
2129

22-
const bob = {};
23-
console.log(bob.constructor);
24-
const list = [];
25-
console.log(list.constructor);
26-
const peter = function () {};
27-
console.log(peter);
30+
/* output:
31+
ƒ MemberSHP(firstName, lastName) {
32+
// * use this for new instance & assign use param
33+
this.firstName = firstName;
34+
this.lastName = lastName;
35+
this.fullName = function () {
36+
console.log(`Hello $…
37+
38+
ƒ Array() { [native code] }
39+
ƒ Object() { [native code] }
40+
ƒ Function() { [native code] }
41+
42+
*/
2843

29-
// example here can new instance will same constructor
30-
const jane = new john.constructor('jane', 'edward');
31-
jane.fullName();
44+
// dan sekarang kita bisa menggunakan constructor
45+
// dgn nilai yang sudah ada
46+
const zoro = new lutfy.constructor('rorona', 'zoro');
47+
zoro.fullName(); //Hello rorona zoro

‎Objects/07_prototype_property.js

+22-19
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
1-
function Banking(fullName, initialBalance) {
2-
this.name = fullName;
3-
this.balance = initialBalance;
4-
// function
1+
function Banking(value, initial_balance) {
2+
this.value = value;
3+
this.balance = initial_balance;
4+
this.bank = 'mandiri';
55
}
66

7-
// here you can create New prototype
8-
Banking.prototype.bank = 'Mandiri';
9-
Banking.prototype.deposit = function (amount) {
10-
this.balance += amount;
7+
// create Prototype
8+
Banking.prototype.banks = 'Mandiri Syariah';
9+
10+
// Selalu perhatikan stiap membuat obj parameter const func
11+
const john = new Banking(20, 200);
12+
console.log(john); // Banking { value: 20, balance: 200, bank: 'mandiri' }
13+
console.log(john.banks); // Mandiri Syariah
14+
15+
// create new prototype again
16+
Banking.prototype.deposite = function (amount) {
17+
this.balance *= amount;
1118
console.log(
12-
`Hello ${this.name} your balance on the bank ${this.bank} for now is ${this.balance}`
19+
`Hello your value is ${this.value} with balance ${this.balance} on bank ${this.banks}`
1320
);
1421
};
15-
const kelly = new Banking('kelly', 2000);
16-
const jane = new Banking('jane', 0);
17-
18-
console.log(kelly);
19-
console.log(jane);
20-
kelly.deposit(2200);
21-
jane.deposit(10560000);
2222

23-
// output:
24-
// Hello kelly your balance on the bank Mandiri for now is 4200
25-
// Hello jane your balance on the bank Mandiri for now is 10560000
23+
// print deposite
24+
john.deposite(4000);
25+
/*output : Hello your value is 20 with balance 800000 on bank Mandiri Syariah */
26+
const boby = new john.constructor(1000, 5000);
27+
boby.deposite(150000);
28+
// output: Hello your value is 1000 with balance 750000000 on bank Mandiri Syariah

‎Objects/08_ES6_Class_syntax.js

+14-20
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
1-
// ES6
2-
// Basic constructor 01-07 chapter
3-
4-
class Account {
1+
class Banking {
52
// constructor
6-
constructor(fullName, initialBalance) {
7-
this.name = fullName;
8-
this.balance = initialBalance;
3+
constructor(value, initial_balance) {
4+
this.value = value;
5+
this.balance = initial_balance;
96
}
10-
// prototype here will input to constructor
11-
bank = 'Mandiri Indonesia';
12-
// function
7+
8+
// And here you can add same like prototype too
9+
bank = 'mandiri syariah';
10+
// For Method here
1311
deposite(amount) {
14-
this.balance += amount;
12+
this.balance *= amount;
1513
console.log(
16-
`Hello ${this.name} your balance on ${this.bank} is Rp. ${this.balance} `
14+
`Your value is ${this.value} with balance ${this.balance} on bank ${this.bank}`
1715
);
1816
}
1917
}
2018

21-
// field object don't forget create new
22-
const kelly = new Account('kelly jane', 20000);
23-
console.log(kelly);
24-
kelly.deposite(40000);
25-
// output: Hello kelly jane your balance on Mandiri Indonesia is Rp. 60000
19+
const mugiwara = new Banking(20, 4500);
2620

27-
const jenny = new Account('jenny edward', 15000);
28-
jenny.deposite(15000);
29-
// Hello jenny edward your balance on Mandiri Indonesia is Rp. 30000
21+
console.log(mugiwara); // Banking { value: 20, balance: 4500 }
22+
console.log(mugiwara.value); //20
23+
mugiwara.deposite(2000); // Your value is 20 with balance 9000000

‎Objects/09.call.js

+22-26
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
1-
// call method,
21
// you can write a method that can be used on different objects.
32

4-
const john = {
5-
name: 'john',
6-
age: 25,
7-
greeting: function () {
8-
console.log(this);
9-
console.log(`My name is ${this.name} and my age is ${this.age}`);
10-
},
11-
};
3+
function memberShp(city, country) {
4+
return `Hello ${this.name} ${this.last} your from SHP from ${city} ${country}`;
5+
}
126

13-
const susy = {
14-
name: 'susy',
15-
age: 30,
7+
const lutfy = {
8+
name: 'mugiwara',
9+
last: 'no lutfy',
1610
};
1711

18-
// u can use two option: like function this
19-
// or use object
20-
function greeting() {
21-
console.log(this);
22-
console.log(`Your name is ${this.name} and age is ${this.age}`);
23-
}
24-
25-
greeting.call(susy);
26-
// Your name is susy and age is 30
12+
const zoro = {
13+
name: 'rorona',
14+
last: 'zoro',
15+
};
2716

28-
// or you can use this one
29-
john.greeting.call(susy);
30-
// My name is susy and my age is 30
17+
// call function.call(targetobject)
18+
let leader = memberShp.call(lutfy);
19+
console.log(leader); //Hello mugiwara no lutfy your from SHP
20+
let deputy_leader = memberShp.call(zoro);
21+
console.log(deputy_leader); //Hello rorona zoro your from SHP
3122

32-
// and for create again use argument
33-
john.greeting.call({ name: 'peter walker', age: 68 });
23+
// **** Use argument
24+
// bisa ditambahkan dalam function memberShp
25+
// semisal city, country
26+
leader = memberShp.call(lutfy, 'batak', 'indonesia');
27+
console.log(leader); //
28+
deputy_leader = memberShp.call(zoro, 'bandung', 'japan');
29+
console.log(deputy_leader); // Hello rorona zoro your from SHP from bandung japan

0 commit comments

Comments
 (0)