Skip to content

Commit 6cd8b09

Browse files
fauzanahmad11fauzanahmad11
committed
SCOPE
1 parent 4b46ba9 commit 6cd8b09

File tree

5 files changed

+323
-0
lines changed

5 files changed

+323
-0
lines changed

‎function-anonymous.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Function Anonymous</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
padding: 2rem;
18+
}
19+
20+
p {
21+
padding: .5rem 0;
22+
}
23+
24+
div {
25+
width: 100%;
26+
height: 100vh;
27+
background-color: rgb(0, 195, 255);
28+
font-weight: 800;
29+
font-size: 2rem;
30+
font-family: sans-serif;
31+
text-transform: uppercase;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
color: #0e0e0e;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<script>
42+
/*
43+
## Anonymous Function
44+
● Sebelumnya kita selalu membuat function dengan nama
45+
● Kita juga bisa membuat function tanpa nama function, atau istilahnya adalah anonymous function
46+
● Kita bisa buat anonymous function dalam sebuah variable atau bisa juga kita buat ketika mengisi parameter
47+
*/
48+
49+
// Kode : Anonymous Function di Variable
50+
let say = function (name) {
51+
console.log(`Hello ${name}`);
52+
}
53+
54+
say("Fauzan");
55+
56+
// Kode : Anonymous Function di Parameter
57+
function giveMeName(callback) {
58+
callback("Fauzan");
59+
}
60+
61+
giveMeName(function (name) {
62+
console.log(`Hello ${name}`);
63+
});
64+
</script>
65+
</body>
66+
67+
</html>

‎function-dalam-function.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Function dalam Function</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
padding: 2rem;
18+
}
19+
20+
p {
21+
padding: .5rem 0;
22+
}
23+
24+
div {
25+
width: 100%;
26+
height: 100vh;
27+
background-color: rgb(0, 195, 255);
28+
font-weight: 800;
29+
font-size: 2rem;
30+
font-family: sans-serif;
31+
text-transform: uppercase;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
color: #0e0e0e;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<script>
42+
/*
43+
## Function dalam Function
44+
● Tidak ada batasan dimana kita bisa membuat function
45+
● Termasuk jika kita ingin membuat function di dalam sebuah function, kita bisa melakukannya
46+
● Function yang terdapat di dalam, kita sebut inner function
47+
● Inner function hanya bisa diakses di tempat kita membuat function nya, tidak bisa diakses dari luar function nya
48+
*/
49+
50+
// Kode : Function dalam Function
51+
function outer() {
52+
function inner() {
53+
console.log("Inner");
54+
}
55+
56+
inner();
57+
inner();
58+
}
59+
outer();
60+
inner();// ERROR can not access inner function
61+
</script>
62+
</body>
63+
64+
</html>

‎function-sebagai-value.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Function Sebagai Value</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
padding: 2rem;
18+
}
19+
20+
p {
21+
padding: .5rem 0;
22+
}
23+
24+
div {
25+
width: 100%;
26+
height: 100vh;
27+
background-color: rgb(0, 195, 255);
28+
font-weight: 800;
29+
font-size: 2rem;
30+
font-family: sans-serif;
31+
text-transform: uppercase;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
color: #0e0e0e;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<script>
42+
/*
43+
## Function Sebagai Value
44+
● Function tidak hanya bisa digunakan sebagai kode program yang dieksekusi, tapi bisa juga sebagai value
45+
● Artinya, function bisa disimpan di variable, bisa juga dikirim melalui parameter ke function lainnya
46+
*/
47+
48+
// Kode : Function di Variable
49+
function sayHello(name) {
50+
console.log(`Hello ${name}`);
51+
}
52+
53+
document.writeln(`<p>=====Function di Variable=====</p>`);
54+
let say = sayHello;
55+
sayHello("Fauzan");
56+
say("Tato");
57+
58+
// Kode : Function di Parameter
59+
document.writeln(`<p>=====Function di Parameter=====</p>`);
60+
function giveMeName(callback) {
61+
callback("Fauzan Ahmad");
62+
}
63+
giveMeName(sayHello);
64+
giveMeName(say);
65+
</script>
66+
</body>
67+
68+
</html>

‎recap.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -695,6 +695,37 @@ register("Budi");
695695
register("Joko", undefined);
696696

697697
// ========== Rest Parameter ==========
698+
// Kode : Rest Parameter
699+
function sum(name, ...data) {
700+
let total = 0;
701+
for (const item of data) {
702+
total += item;
703+
}
704+
document.writeln(`<p>Total ${name} is ${total}</p>`);
705+
}
706+
707+
708+
sum("Mango", 50, 40, 3);
709+
sum("Coconut", 50, 40, 3);
710+
sum("Papaya", 50, 40, 3);
711+
712+
// Kode : Spread Syntax
713+
const values = [10, 25, 34, 21, 22];
714+
sum("Test", ...values);
715+
716+
// Kode : Arguments Object
717+
document.writeln(`<p>=====Arguments Object (Old Sum)=====</p>`);
718+
719+
function oldSum() {
720+
let total = 0;
721+
for (const item of arguments) {
722+
total += item;
723+
}
724+
document.writeln(`<p>Total is ${total}</p>`);
725+
}
726+
727+
oldSum(1, 3, 2, 5, 2, 3);
728+
698729
// ========== Function Sebagai Value ==========
699730
// ========== Anonymous Function ==========
700731
// ========== Function dalam Function ==========

‎scope.html

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Scope</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
padding: 2rem;
18+
}
19+
20+
p {
21+
padding: .5rem 0;
22+
}
23+
24+
div {
25+
width: 100%;
26+
height: 100vh;
27+
background-color: rgb(0, 195, 255);
28+
font-weight: 800;
29+
font-size: 2rem;
30+
font-family: sans-serif;
31+
text-transform: uppercase;
32+
display: flex;
33+
justify-content: center;
34+
align-items: center;
35+
color: #0e0e0e;
36+
}
37+
</style>
38+
</head>
39+
40+
<body>
41+
<script>
42+
/*
43+
## Scope
44+
● Scope merupakan area akses sebuah data
45+
● Ada dua jenis scope, global scope dan local scope.
46+
● Setiap kita membuat function, maka kita akan membuat local scope untuk function tersebut
47+
● Data di global scope bisa diakses dari local scope, namun data di local scope hanya bisa di akses di local scope tersebut atau di scope local dibawahnya (dalam kasus function dalam function)
48+
*/
49+
50+
// Kode : Global Scope
51+
document.writeln(`<p>=====Global Scope=====</p>`);
52+
let counter = 0;
53+
function hitMe() {
54+
// local scope function hitMe
55+
counter++;
56+
}
57+
hitMe();
58+
hitMe();
59+
60+
console.log('counter');
61+
62+
// Kode : Local Scope
63+
document.writeln(`<p>=====Local Scope=====</p>`);
64+
function first() {
65+
let firstVariable = "First";
66+
}
67+
function secound() {
68+
let secoundVariable = "Secound";
69+
}
70+
71+
first();
72+
secound();
73+
74+
console.log(firstVariable()); // can not access local scope
75+
console.log(secoundVariable()); // can not access local scope
76+
77+
// Kode : Nested Function Scope
78+
document.writeln(`<p>=====Nested Function Scope=====</p>`);
79+
function first() {
80+
let firstVariable = "First";
81+
82+
function secound() {
83+
let secoundVariable = "Secound";
84+
}
85+
secound();
86+
}
87+
first();
88+
89+
90+
</script>
91+
</body>
92+
93+
</html>

0 commit comments

Comments
 (0)