MATERI: 6 - 10

LES PRIVATE ONLINE

PROGRAMMING

JAVASCRIPT LEVEL BASIC

 1

BAB 6 - MENGENAL ARRAY DI JAVASCRIPT

6.1.​ Tujuan Pembelajaran

●​ Mampu menjelaskan apa itu array
●​ Membuat dan mengakses array
●​ Menambah, mengubah, dan mencetak isi array
●​ Melakukan perulangan array

6.2.​ Apa Itu Array?

Array = kumpulan data dalam satu variabel
Contoh:
let nama = ["Yesi", "Bayu", "Rina"];

Kenapa penting?
●​ Mengelola banyak data lebih efisien
●​ Bisa diakses satu per satu lewat indeks

6.3.​ Akses Elemen Array

let warna = ["Merah", "Hijau", "Biru"];
[Link](warna[0]); // Merah
[Link](warna[2]); // Biru

●​ Indeks dimulai dari 0

●​ Jika warna[3], hasilnya undefined
 2

6.4.​Menambah dan Mengubah

●​ Ganti isi:
warna[1] = "Kuning";

●​ Tambah Data:
warna[3] = "Ungu";
[Link]("Hitam");

6.5.​Panjang Array
let hewan = ["Kucing", "Anjing", "Burung"];
[Link]([Link]); // 3

.length = jumlah elemen dalam array

6.6.​Looping Array
let buah = ["Apel", "Mangga", "Jeruk"];

for (let i = 0; i < [Link]; i++) {

[Link](buah[i]);
}

Loop dari indeks 0 sampai dengan → panjang array

6.7.​ Tipe Data & typeof

let biodata = ["Indra", 22, true];
[Link](typeof biodata); // object
[Link]([Link](biodata)); // true

Semua array bertipe object, tapi bisa dicek dengan [Link]()

 3

6.8.​Eksperimen Mini
1.​ // 1. Membuat array awal

📘
2.​ let jadwal = ["Ngaji", "Belajar JavaScript", "Olahraga"];
3.​ [Link](" Jadwal awal Engkos:");
4.​ [Link](jadwal);
5.​ [Link]("Total kegiatan:", [Link]);
6.​

📌
7.​ // 2. Akses elemen berdasarkan indeks

📌
8.​ [Link]("\n Kegiatan pertama hari ini:", jadwal[0]);
9.​ [Link](" Kegiatan terakhir:", jadwal[[Link] - 1]);
10.​
11.​// 3. Menambahkan kegiatan
12.​[Link]("Istirahat Siang");

➕
13.​[Link]("Baca Buku");
14.​[Link]("\n Jadwal setelah ditambah:");
15.​[Link](jadwal);
16.​
17.​// 4. Menghapus kegiatan terakhir

❌
18.​let hapus = [Link]();
19.​[Link](`\n Kegiatan '${hapus}' dihapus karena bentrok jadwal`);
20.​[Link]("Jadwal sekarang:", jadwal);
21.​

📋
22.​// 5. Menampilkan seluruh jadwal dengan nomor
23.​[Link]("\n Daftar Jadwal Lengkap Engkos:");
24.​for (let i = 0; i < [Link]; i++) {
25.​ [Link](`${i + 1}. ${jadwal[i]}`);
26.​}

Hasil Akhir yang Ditampilkan di Terminal:

📘 Jadwal awal Engkos:
[ 'Ngaji', 'Belajar JavaScript', 'Olahraga' ]
Total kegiatan: 3

📌
📌 Kegiatan pertama hari ini: Ngaji
Kegiatan terakhir: Olahraga

➕ Jadwal setelah ditambah:

[ 'Ngaji', 'Belajar JavaScript', 'Olahraga', 'Istirahat
Siang', 'Baca Buku' ]

❌ Kegiatan 'Baca Buku' dihapus karena bentrok jadwal

Jadwal sekarang: [ 'Ngaji', 'Belajar JavaScript',
'Olahraga', 'Istirahat Siang' ]

📋 Daftar Jadwal Lengkap Engkos:

1. Ngaji
2. Belajar JavaScript
3. Olahraga
4. Istirahat Siang
 4

27.​ Kuis Singkat

Pilih jawaban yang benar!

1.​ Apa hasil dari:

let angka = [2, 4, 6];
[Link](angka[1]);
a.​ 2
b.​ 4
c.​ 6​

2.​ Untuk menambah data ke akhir array:

a.​ [Link]()
b.​ [Link]()
c.​ [Link]()​

3.​ Output dari:

[Link](typeof ["A", "B"]);

a.​ array
b.​ object
c.​ string

28.​ Tantangan Praktik Mandiri

📋 Tema: Jadwal Latihan Coding Cecep
Cecep sedang mempersiapkan diri untuk bootcamp JavaScript. Dia
membuat daftar kegiatan latihan hariannya dan ingin mengatur
semuanya menggunakan array.
Tugas kamu adalah membantu Cecep membuat program CLI yang bisa
menampilkan, menambah, dan menghapus kegiatan belajar dengan
baik.
 5

Instruksi:
1.​ Buat array bernama kegiatan yang berisi minimal 3 aktivitas
Cecep, contoh:
let kegiatan = ["Membaca Materi", "Latihan Soal", "Tonton
Tutorial"];
2.​ Tampilkan daftar awal kegiatan ke terminal, beserta total
jumlahnya.
3.​ Tambahkan 2 kegiatan baru menggunakan .push(), misalnya:
○​ "Diskusi Bareng Ajat"
○​ "Ngoding Bareng Wisesa"
4.​ Hapus kegiatan terakhir dengan .pop() dan tampilkan pesan
kegiatan apa yang dihapus.
5.​ Cetak seluruh daftar kegiatan akhir dengan format seperti ini:
📌 Jadwal Kegiatan Cecep Hari Ini:
1. Membaca Materi
2. Latihan Soal
3. Tonton Tutorial
4. Diskusi Bareng Ajat

Contoh Output yang Diharapkan:

📌 Kegiatan Awal:
[ 'Membaca Materi', 'Latihan Soal', 'Tonton Tutorial' ]
Total kegiatan: 3

📌 Setelah Ditambah:
[ 'Membaca Materi', 'Latihan Soal', 'Tonton Tutorial',
'Diskusi Bareng Ajat', 'Ngoding Bareng Wisesa' ]

❌ Kegiatan 'Ngoding Bareng Wisesa' dihapus

📋 Jadwal Kegiatan Cecep Hari Ini:
1. Membaca Materi
2. Latihan Soal
3. Tonton Tutorial
4. Diskusi Bareng Ajat
 6

29.​ Penutup
Hari ini kita telah belajar:
●​ Pengertian array dan penggunaannya
●​ Akses, tambah, dan ubah isi array
●​ Looping dan mengecek tipe data​

📘 Selanjutnya: Bab 7 – Array Lanjutan & Method Populer

 7

BAB 7- ARRAY LANJUTAN & METHOD

POPULER

7.1.​ Tujuan Pembelajaran

●​ Menggunakan method umum untuk manipulasi array
●​ Mengurutkan, membalik, menggabungkan, dan memfilter array
●​ Memahami penggunaan .splice(), .sort(), .includes(), dll

7.2.​ Review Singkat: Apa Itu Array?

Array = kumpulan data → diakses via indeks

Contoh:
let buah = ["Apel", "Jeruk"];

Gunakan let atau const untuk membuat variabel

7.3.​Menambah Elemen
●​ .push() → Tambah di akhir
[Link]("Mangga");

●​ .unshift() → Tambah di awal

[Link]("Pisang");

7.4.​Menghapus Elemen
●​ .pop() → Hapus dari akhir
[Link]();

●​ .shift() → Hapus dari awal

[Link]();
 8

7.5.​Menyisipkan / Menghapus: .splice()

●​ Format:
.splice(start, deleteCount, item1, item2, ...)
➢​ start​ : indeks posisi mulai (0-based index)
➢​ deleteCount ​ : Jumlah elemen yang ingin di hapus dari posisi
start
➢​ item1 , dst​ : (Opsional) Elemen baru yang ingin disisipkan di
posisi tersebut

●​ Contoh:
[Link](1, 0, "Kiwi"); // Sisipkan
[Link](2, 1); // Hapus

7.6.​Menggabungkan Array: .concat()

let sayur = ["Bayam", "Wortel"];
let makanan = [Link](sayur);

[Link](makanan);
// Output: ["Apel", "Kiwi", "Bayam", "Wortel"]

7.7.​Mengurutkan & Membalik

Let angka = [3, 1, 4, 2]
[Link](); // Urut default (alfabet/ A - Z)
[Link](); // Membalik urutan (Z - A)
[Link]((a,b) => a - b); // Numerik naik

7.8.​ Cek Isi Array

[Link]("Hijau"); // true
[Link]("Biru"); // 2
 9

7.9.​ Eksperimen Mini: Aplikasi Daftar Belanja Mingguan

📋 Tema:​
🛒 “Wisesa Membuat Aplikasi Daftar Belanja Mingguan”
Wisesa ingin menyusun dan mengatur kebutuhan belanja mingguannya
dengan array. Ia ingin fitur seperti menambahkan barang, menyisipkan
di tengah, mengecek apakah barang tersedia, dan mengurutkan daftar
belanja.

Kode Program

🛒
1.​ let daftarBelanja = ["Beras", "Telur", "Minyak"];
2.​ [Link](" Daftar Awal:", daftarBelanja);
3.​
4.​ // Menambahkan item baru
5.​ [Link]("Gula");
6.​ [Link]("Sabun");
7.​
8.​ // Menghapus item pertama dan terakhir
9.​ [Link]();
10.​[Link]();
11.​
12.​// Menyisipkan "Kopi" di indeks ke-1
13.​[Link](1, 0, "Kopi");
14.​
15.​// Cek apakah 'Garam' ada di daftar
16.​let cekGaram = [Link]("Garam");
17.​[Link]("Apakah Garam ada?", cekGaram);
18.​
19.​// Menambahkan array lain
20.​let tambahan = ["Susu", "Kecap"];
21.​let daftarGabungan = [Link](tambahan);
22.​
23.​// Mengurutkan dan membalik
24.​[Link]();
25.​[Link]();
26.​
27.​// Mencari posisi item
28.​let posisi = [Link]("Kopi");

📦
29.​

📍
30.​[Link](" Daftar Akhir:", daftarGabungan);
31.​[Link](" Posisi 'Kopi' di daftar:", posisi);
32.​
33.​

Contoh Output:
 10

🛒 Daftar Awal: [ 'Beras', 'Telur', 'Minyak' ]

Apakah Garam ada? false
📦 Daftar Akhir: [ 'Telur', 'Susu', 'Minyak', 'Kopi', 'Kecap',
'Beras' ]
📍 Posisi 'Kopi' di daftar: 3

7.10.​ Kuis Mini

1.​ Method untuk menambahkan data ke awal array adalah:​
a. .push()​

b. .unshift()​

c. .shift()
2.​ Apa hasil dari:

let angka = [3, 1, 2];

[Link]();
[Link](angka);​
a. [1, 2, 3]​

b. [3, 1, 2]​

c. [3, 2, 1]

3.​ Jika warna = ["Merah", "Hijau", "Biru"], maka

[Link]("Biru") hasilnya?​

a. 2​

b. 3​

c. Biru
 11

7.11.​ Tantangan Mandiri

Tema: Daftar Kegiatan Pagi Dudi

Dudi ingin menyusun daftar kegiatan pagi yang fleksibel. Ia ingin
menambah, menghapus, menyisipkan, mengurutkan, dan mengecek
apakah kegiatan tertentu ada di daftar.

Instruksi:
1.​ Buat array kegiatanPagi dengan 3 kegiatan awal
2.​ Tambahkan kegiatan baru di awal dan akhir
3.​ Hapus satu kegiatan dari awal dan akhir
4.​ Sisipkan “Minum Kopi” di indeks ke-1
5.​ Cek apakah kegiatan “Olahraga” ada dalam array
6.​ Gabungkan dengan array baru ["Mandi", "Berangkat Sekolah"]
7.​ Urutkan secara alfabet lalu balikkan
8.​ Tampilkan seluruh daftar kegiatan dan posisi “Minum Kopi”

Output yang Diharapkan:

📋 Daftar Kegiatan Dudi:
[ 'Sarapan', 'Minum Kopi', 'Sholat', 'Mandi', 'Berangkat Sekolah'
]
📍 Posisi 'Minum Kopi': 1
Apakah 'Olahraga' ada di daftar? false
 12

BAB 8- MENGENAL OBJECT DI JAVASCRIPT

8.1.​ Tujuan Pembelajaran

●​ Menjelaskan apa itu object

●​ Membuat object dan properti

●​ Mengakses, mengubah, dan menghapus isi object

●​ Menggunakan for...in untuk membaca semua data dalam object

8.2.​ Apa Itu Object?

●​ Struktur data kompleks

●​ Terdiri dari pasangan key dan value

Contoh:

1​ let siswa = {
2​ nama: "Rina",
3​ usia: 17,
4​ hobi: "Membaca"
5​ };
6​

Analogi: seperti kartu identitas digital

 13

8.3.​ Membuat Object

1​ let buku = {
2​ judul: "Belajar JavaScript",
3​ penulis: "Yesi",
4​ tahun: 2024
5​ };

8.4.​Akses Properti
●​ Dot Notation
[Link]([Link]);

●​ Bracket Notation
[Link](buku["penulis"]);

8.5.​ Menambah & Mengubah Properti

●​ Menambah:
[Link] = 150;

●​ Mengubah:
[Link] = 2025;

8.6.​Menghapus Properti
delete [Link];

8.7.​ Looping dengan for...in

for (let kunci in buku) {
[Link](kunci + ": " + buku[kunci]);
}
 14

8.8.​Eksperimen Mini: Kartu Identitas Ajat

Ajat baru saja mendaftar kursus programming. Dia ingin menyimpan
datanya dalam bentuk object agar bisa dipakai dalam aplikasi.
1​ // Membuat object identitas Ajat
2​ let identitas = {
3​ nama: "Ajat",
4​ usia: 17,
5​ asal: "Bandung",
6​ minat: "Programming"
7​ };
8​

📇
9​ // Menampilkan seluruh isi object
10​[Link](" Kartu Identitas Ajat:");
11​[Link]("Nama:", [Link]);
12​[Link]("Usia:", [Link]);
13​[Link]("Asal:", [Link]);
14​[Link]("Minat:", [Link]);
15​
16​// Update minat

🎯
17​[Link] = "Frontend Web";
18​[Link](" Minat terbaru:", [Link]);

Output:
📇 Kartu Identitas Ajat:
Nama: Ajat
Usia: 17
Asal: Bandung
Minat: Programming
🎯 Minat terbaru: Frontend Web
 15

8.9.​ Kuis Mini

1.​ Object menyimpan data dalam bentuk:

a. Index dan nilai
b. Key dan value
c. Baris dan kolom

2.​ Bagaimana cara menambahkan properti baru?

let x = {nama: "Bayu"};

a. [Link] = "Bandung";
b. delete [Link]
c. [Link]([Link])

3.​ Apa hasil dari:

let orang = {nama: "Dudi", usia: 20};

delete [Link];
[Link]([Link]);
a. 20;
b. undefined
c. 1
 16

8.10.​ Tantangan Praktik Mandiri

Bayangkan kamu diminta membuat kartu biodata untuk seorang

temanmu bernama Cecep agar ia bisa mengisi data pendaftar
coding camp.

✅ Instruksi:
1.​ Buat object biodata dengan properti: nama, usia, kota, hobi

2.​ Tampilkan masing-masing data menggunakan [Link]()

3.​ Ubah nilai hobi menjadi “Main Game”

4.​ Tambahkan properti baru skill dengan isi “JavaScript Dasar”

5.​ Cetak seluruh object menggunakan [Link](biodata)

💡 Clue Tambahan:
[Link] = "Main Game";
[Link] = "JavaScript Dasar";

🎯 Target Output:
Nama: Cecep
Usia: 18
Kota: Garut
Hobi: Main Game
Skill: JavaScript Dasar

📦 Object lengkap:
{
nama: 'Cecep',
usia: 18,
kota: 'Garut',
hobi: 'Main Game',
skill: 'JavaScript Dasar'
}
 17

8.11.​Penutup
Hari ini kita sudah belajar:
✅ Apa itu object​
✅ Cara membuat dan mengakses object​
✅ Menambah, mengubah, dan menghapus properti​
✅ Looping object dengan for...in
 18

BAB 9- NESTED OBJECT & ARRAY of

OBJECT

9.1.​ Tujuan Pembelajaran

●​ Menjelaskan struktur nested object

●​ Mengakses data dalam object di dalam object

●​ Mengelola array yang berisi object

●​ Membuat dan membaca data kompleks (contoh: daftar siswa, data

produk)

9.2.​ Apa Itu Nested Object?

●​ Object di dalam object
●​ Mirip folder dalam folder

Contoh:
1​ let pengguna = {
2​ nama: "Asep",
3​ kontak: {
4​ email: "asep@[Link]",
5​ telepon: "0812"
6​ }
7​ };
8​

9.3.​ Akses Data Nested Object

1​ [Link]([Link]);
2​ // Output: asep@[Link]
3​
 19

9.4.​ Menambah Data Nested Object

1​ [Link] = "@asepofficial";
2​

9.5.​ Apa Itu Array of Object?

●​ Array berisi object
●​ Cocok untuk menyimpan data koleksi seperti daftar siswa

1​ let siswa = [
2​ { nama: "Wati", usia: 17 },
3​ { nama: "Indra", usia: 18 },
4​ { nama: "Nita", usia: 16 }
5​ ];

9.6.​ Akses & Loop Array of Object

1​ [Link](siswa[0].nama);
2​ // Output: Wati
3​
4​ for (let i = 0; i < [Link]; i++) {
5​ [Link](siswa[i].nama + " - " + siswa[i].usia);
6​ }
7​
 20

9.7.​ Eksperimen Mini: Database Siswa Kelas Coding

Oded
Tujuan:
●​ Mengenal struktur object bersarang (nested object)
●​ Mengenal array berisi object (array of object)
●​ Mengakses data kompleks menggunakan notasi titik dan indeks​

Cerita:
Pak Oded adalah instruktur coding. Ia ingin mencatat biodata singkat
siswa-siswanya dalam bentuk array of object agar mudah diakses
dan dikelola.

Kode Program:
1.​ let siswa = [
2.​ {
3.​ nama: "Wisesa",
4.​ usia: 17,
5.​ kontak: {
6.​ hp: "081234567890",
7.​ email: "wisesa@[Link]"
8.​ }
9.​ },
10.​ {
11.​ nama: "Yana",
12.​ usia: 18,
13.​ kontak: {
14.​ hp: "082345678901",
15.​ email: "yana@[Link]"
16.​ }
17.​ }
18.​ ];
19.​
20.​ // Menampilkan nama dan email semua siswa
21.​ [Link](" 📚 Daftar Siswa:");
22.​ for (let i = 0; i < [Link]; i++) {
 21

23.​ [Link](`Nama: ${siswa[i].nama}`);

24.​ [Link](`Email: ${siswa[i].[Link]}`);
25.​ }
26.​
27.​ // Mengubah nomor HP Wisesa
28.​ siswa[0].[Link] = "089999999999";
29.​
30.​ [Link](" 📞 Nomor HP Wisesa terbaru:",
siswa[0].[Link]);

Output:
📚 Daftar Siswa:
Nama: Wisesa
Email: wisesa@[Link]
Nama: Yana
Email: yana@[Link]
📞 Nomor HP Wisesa terbaru: 089999999999

9.8.​ Kuis Mini

1.​ Apa itu nested object?
a. Array dalam array
b. Object di dalam object
c. String dalam array​

2.​ Bagaimana akses telepon dari object berikut:

let orang = {
kontak: {
telepon: "0812"
}
};

a. [Link]
b. [Link]
c. orang[0].[Link]
 22

3.​ Apa hasil dari:

let siswa = [{nama: "Eni", usia: 17}];

[Link](siswa[0].usia);

a. usia
b. 17
c. Eni

9.9.​ Tantangan Praktik Mandiri

●​ Buat array kelas berisi 3 object siswa
●​ Cetak semua nama & alamat
●​ Tambah properti hobi
●​ Ubah usia salah satu siswa
●​ Tampilkan seluruh data

9.10.​Penutup
Kita sudah belajar:

●​ Apa itu nested object

●​ Apa itu array of object
●​ Cara akses dan manipulasi data kompleks
●​ Eksperimen nyata menyimpan data produk toko
 23

BAB 10- REVIEW & MINI PROJECT FASE-2

Menyusun Data & Logika Sederhana berbasis CLI

10.1.​ Tujuan Pembelajaran

●​ Menggabungkan konsep dasar JavaScript
●​ Menyusun alur logika sederhana
●​ Membuat program berbasis CLI dengan data dan kondisi
●​ Berkreasi membuat sistem kecil seperti pencatatan & to-do list

10.2.​ Review Konsep

●​ Array → kumpulan nilai
●​ Object → pasangan key-value
●​ Perulangan → proses berulang (loop)
●​ Percabangan → logika if...else

10.3.​ Mini Project

Studi Kasus #1 - Data Pengunjung Toko

Tema: Sistem Pengunjung Toko Milik Pak Engkos

Kebutuhan:

●​ Menyimpan daftar pengunjung

●​ Setiap pengunjung punya: nama, waktuKunjungan, dan status
("belanja" atau "lihat-lihat")
●​ Bisa menampilkan semua data
 24

Implementasi:
1.​let pengunjung = [
2.​ { nama: "Ajat", waktu: "10:00", status: "belanja" },
3.​ { nama: "Yana", waktu: "10:30", status: "lihat-lihat"
},
4.​ { nama: "Wisesa", waktu: "11:00", status: "belanja" }
5.​];
6.​
7.​// Tampilkan seluruh pengunjung
8.​[Link]("=== Data Pengunjung Toko ===");
9.​for (let i = 0; i < [Link]; i++) {
10.​ [Link](
11.​ `${pengunjung[i].nama} datang pukul
${pengunjung[i].waktu} untuk ${pengunjung[i].status}`
12.​ );
13.​ }

Studi Kasus #2 - Daftar Tugas Berbasis Status

Tema: To-Do List Harian Oded

Kebutuhan:

●​ Daftar tugas harian Oded

●​ Tiap tugas memiliki: aktivitas dan status
●​ Status memiliki 3 kondisi: "belum", "sedang", "selesai"
●​ Tampilkan tugas dengan ikon status ⏳🔄✅
Implementasi:
1.​let tugas = [
2.​ { aktivitas: "Cuci motor", status: "belum" },
3.​ { aktivitas: "Belanja sayur", status: "sedang" },
4.​ { aktivitas: "Kerjakan PR", status: "selesai" }
5.​];
6.​
7.​[Link]("=== Daftar Tugas Oded ===");
8.​for (let i = 0; i < [Link]; i++) {
9.​ let item = tugas[i];
 25

10.​ let ikon = "";

11.​
12.​ if ([Link] === "belum") ikon = " ⏳";
13.​ else if ([Link] === "sedang") ikon = "🔄";
14.​ else if ([Link] === "selesai") ikon = "✅";
15.​
16.​ [Link](`${ikon} ${[Link]}
[${[Link]}]`);
17.​ }
18.​

10.4.​ Kuis Mini

1.​ Tipe data apa yang digunakan untuk menyimpan banyak pengunjung pada
“Sistem Pengunjung Toko Milik Pak Engkos” ?​
a. String
b. Object
c. Array of Object​

2.​ Fungsi if...else dalam daftar tugas harian Oded digunakan untuk?​
a. Mengurutkan tugas
b. Memberi tanda/status
c. Menyimpan data baru​

3.​ Output dari kode berikut?

let orang = [{nama: "Solihin", status: "belanja"}];
[Link](orang[0].status);​
a. Solihin
b. Belanja
c. Error​
 26

10.5.​ Tantangan Mandiri

Buatkan program untuk:

Tema: Pencatatan Pengunjung Warung Kopi Ajat​

Instruksi:

1.​ Buat array pengunjungKopi berisi object dengan nama, jam, pesanan,

dan status
2.​ Tambahkan satu pengunjung baru
3.​ Tampilkan semua data menggunakan loop
4.​ Gunakan emoji untuk status ("menunggu" ⏳, "pesan" 🔄, "selesai" ✅)

10.6.​Slide 11 – Penutup

Hari ini kita sudah belajar:

●​ Menggabungkan array, object, percabangan, perulangan
●​ Membuat sistem pengunjung toko milik Pak Engkos
●​ Membuat daftar tugas harian Oded