Pembahasan dan Kunci Jawaban Latihan Soal: JavaScript Modern (ES6+)

Terima kasih sudah mencoba latihan soal tentang JavaScript Modern (ES6+)! Sekarang mari kita bahas bersama-sama setiap soal, lengkap dengan penjelasannya. Tujuan dari pembahasan ini adalah untuk membantumu memahami konsep di balik jawaban yang benar — bukan hanya menghafal hasilnya.

Jika ada jawaban yang salah, itu hal yang wajar. Justru dari kesalahan, kamu bisa belajar lebih dalam dan memperkuat pemahamanmu.

✅ Pembahasan dan Kunci Jawaban

Soal 1: Destructuring Array

1const angka = [1, 2, 3];
2const [a, , c] = angka;
3
4console.log(a, c); // 1 3
5

1const angka = [1, 2, 3];
2const [a, , c] = angka;
3
4console.log(a, c); // 1 3
5

✅ Jawaban: b. 1 3 👉 Baris [a, , c] artinya kita mengambil elemen ke-1 (index 0) dan ke-3 (index 2), lalu mengabaikan elemen ke-2.

Soal 2: Destructuring Object

1const user = { nama: "Andi", umur: 25 };
2const { namaDepan } = user;
3
4console.log(namaDepan); // undefined
5

1const user = { nama: "Andi", umur: 25 };
2const { namaDepan } = user;
3
4console.log(namaDepan); // undefined
5

✅ Jawaban: a. Tidak ada yang salah, output: undefined 👉 namaDepan tidak ada dalam object user, jadi hasilnya undefined.

Soal 3: Spread Operator ✅ Jawaban: a. Digunakan untuk menyalin isi array atau object 👉 Spread operator (...) digunakan untuk menyebarkan elemen array atau properti object ke tempat lain.

Contoh:

1const arr1 = [1, 2];
2const arr2 = [...arr1, 3]; // [1, 2, 3]
3

1const arr1 = [1, 2];
2const arr2 = [...arr1, 3]; // [1, 2, 3]
3

Soal 4: Rest Parameter

1function hitung(...angka) {
2  return angka.length;
3}
4
5console.log(hitung(1, 2, 3, 4)); // 4
6

1function hitung(...angka) {
2  return angka.length;
3}
4
5console.log(hitung(1, 2, 3, 4)); // 4
6

✅ Jawaban: b. 4 👉 ...angka menangkap semua argumen ke dalam array, lalu kita ambil panjang array-nya.

Soal 5: Template Literal ✅ Jawaban: d. Menggunakan backtick dan bisa menyisipkan ekspresi 👉 Template literal menggunakan tanda ` (backtick) dan bisa menulis multiline string serta menyisipkan ekspresi dengan ${}.

Soal 6: Default Export ✅ Jawaban: c. import halo from './utils.js'; 👉 Untuk default export, kita bisa memberi nama bebas saat impor, tanpa {}.

Soal 7: Named Export ✅ Jawaban: b. import { tambah, kali } from './math.js'; 👉 Named export harus diimpor menggunakan nama yang sesuai dalam {}.

Soal 8: Gabungan Destructuring & Default Value

1const [x = 10, y = 20] = [5];
2
3console.log(x, y); // 5 20
4

1const [x = 10, y = 20] = [5];
2
3console.log(x, y); // 5 20
4

✅ Jawaban: b. 5 20 👉 x mendapat nilai 5 dari array, y tidak mendapat nilai jadi memakai default 20.

🏁 Penutup

Sudah sejauh ini kamu belajar dan berlatih tentang JavaScript modern — kerja bagus! 🎉 Semoga pembahasan ini membantumu memahami fitur-fitur penting ES6+ dan siap menghadapi topik berikutnya.

Selanjutnya, kita akan membahas: Tools dan Ekosistem JavaScript — bagian penting dalam praktik profesional. Jangan lewatkan!