Fungsi & Array

Membuat fungsi reusable dengan berbagai cara penulisan, memanipulasi array, dan menggunakan higher-order array methods.

Phase

Phase 3 — JS

Topik

JavaScript Dasar

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Mendeklarasikan fungsi: function nama() {}
02Membuat function expression dan arrow function
03Menggunakan parameter, argumen, default parameter, dan return
04Membuat dan memanipulasi array
05Menggunakan array method: push, pop, shift, unshift, splice
06Menggunakan higher-order methods: map, filter, forEach, find, reduce

📖Sub-topik & Materi

01Function declaration vs expression vs arrow function
02Parameter & argumen, default parameter, rest parameter (...args)
03return value — fungsi tanpa return menghasilkan undefined
04Array: membuat, mengakses [index], .length
05Array mutasi: .push(), .pop(), .shift(), .unshift(), .splice()
06Higher-order: .map() (transformasi), .filter() (penyaringan), .forEach() (iterasi), .find(), .reduce()

💡Penjelasan Konsep

Konsep 1

Function Declaration vs Arrow Function

Ada 3 cara membuat fungsi: function declaration (bisa dipanggil sebelum dideklarasikan karena hoisting), function expression (const fn = function(){}), dan arrow function (const fn = () => {} — cara modern, lebih ringkas). Arrow function cocok untuk callback dan fungsi singkat. Untuk method dalam object, gunakan function biasa.

javascript

"t-kw">class="t-cm">// Function declaration
"t-kw">function sapa(nama) {
  "t-kw">return "t-st">`Halo, ${nama}!`;
}

"t-kw">class="t-cm">// Arrow "t-kw">function — ringkas
"t-kw">const sapaPendek = (nama) => "t-st">`Halo, ${nama}!`;

"t-kw">class="t-cm">// Arrow dengan banyak baris
"t-kw">const hitung = (a, b) => {
  "t-kw">const hasil = a + b;
  "t-kw">return hasil;
};

"t-kw">class="t-cm">// Default parameter
"t-kw">const salam = (nama = "t-st">'Teman') => "t-st">`Hai, ${nama}!`;
console.log(salam());        "t-kw">class="t-cm">// "Hai, Teman!"
console.log(salam("t-st">'Ahmad')); "t-kw">class="t-cm">// "Hai, Ahmad!"

Konsep 2

Array Methods: map, filter, reduce

.forEach() iterasi tanpa return. .map() transformasi setiap elemen — selalu return array baru dengan panjang sama. .filter() saring elemen yang memenuhi kondisi — return array baru yang bisa lebih pendek. .find() cari satu elemen pertama yang cocok. .reduce() akumulasi nilai — paling fleksibel tapi paling kompleks.

javascript

"t-kw">const nilai = [75, 90, 55, 85, 60, 95];

"t-kw">class="t-cm">// map: ubah setiap elemen
"t-kw">const grade = nilai.map(n => n >= 80 ? "t-st">'A' : n >= 70 ? "t-st">'B' : "t-st">'C');
console.log(grade); "t-kw">class="t-cm">// ["t-st">'B', "t-st">'A', "t-st">'C', "t-st">'A', "t-st">'C', "t-st">'A']

"t-kw">class="t-cm">// filter: saring yang lulus
"t-kw">const lulus = nilai.filter(n => n >= 70);
console.log(lulus); "t-kw">class="t-cm">// [75, 90, 85, 95]

"t-kw">class="t-cm">// find: cari yang pertama
"t-kw">const pertamaLulus = nilai.find(n => n >= 70);
console.log(pertamaLulus); "t-kw">class="t-cm">// 75

"t-kw">class="t-cm">// reduce: hitung rata-rata
"t-kw">const total = nilai.reduce((akum, n) => akum + n, 0);
"t-kw">const rata = total / nilai.length;
console.log("t-st">`Rata-rata: ${rata.toFixed(1)}`); "t-kw">class="t-cm">// 76.7

💻Contoh Kode Lengkap

javascript

"t-kw">class="t-cm">// === Arrow Function ===
"t-kw">const sapa = (nama) => "t-st">`Halo, ${nama}!`;
"t-kw">const kuadrat = n => n * n;         "t-kw">class="t-cm">// 1 param: tanpa kurung
"t-kw">const tambah = (a, b) => a + b;     "t-kw">class="t-cm">// langsung "t-kw">return

"t-kw">class="t-cm">// === Default Parameter ===
"t-kw">const beriSalam = (nama = "t-st">'Teman') => "t-st">`Hai, ${nama}!`;
console.log(beriSalam());          "t-kw">class="t-cm">// "Hai, Teman!"
console.log(beriSalam("t-st">'Budi'));    "t-kw">class="t-cm">// "Hai, Budi!"

"t-kw">class="t-cm">// === Array Methods ===
"t-kw">const nilai = [75, 88, 92, 65, 78, 55, 90];

"t-kw">class="t-cm">// forEach — iterasi (tidak "t-kw">return array baru)
nilai.forEach(n => console.log(n));

"t-kw">class="t-cm">// map — transformasi ("t-kw">return array baru)
"t-kw">const doubled = nilai.map(n => n * 2);

"t-kw">class="t-cm">// filter — penyaringan ("t-kw">return array baru)
"t-kw">const lulus = nilai.filter(n => n >= 75);

"t-kw">class="t-cm">// reduce — akumulasi
"t-kw">const total = nilai.reduce((sum, n) => sum + n, 0);
"t-kw">const rata  = total / nilai.length;

"t-kw">class="t-cm">// find — cari elemen pertama
"t-kw">const pertamaLulus = nilai.find(n => n >= 75); "t-kw">class="t-cm">// 75

console.log("t-st">`Rata-rata: ${rata.toFixed(2)}`);
console.log("t-st">`Yang lulus: ${lulus}`);

⚡Latihan Kelas · Buat fungsi kalkulator nilai siswa: rata-rata, nilai tertinggi, nilai terendah dari array

Buat const nilaiSiswa = [70, 85, 90, 60, 75, 88, 92, 55]

Buat fungsi hitungRata(arr) menggunakan reduce — return rata-rata

Buat fungsi nilaiTertinggi(arr) menggunakan Math.max + spread

Buat fungsi siapaSaja yang lulus (>= 75) menggunakan filter

Tampilkan semua hasil dengan console.log berformat rapi

📝 Tugas 4.4 — Fungsi & Array

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat program manajemen nilai kelas: array berisi minimal 8 nilai, fungsi untuk: rata-rata (reduce), nilai tertinggi/terendah (Math.max/min), daftar yang lulus (filter >=75), konversi ke grade (map + if/switch). Tampilkan semua di console dalam format laporan.

Kriteria Penilaian	Poin
Minimal 2 fungsi terpisah dengan parameter dan return	20
Arrow function digunakan minimal 2x	20
Array methods: map, filter, reduce masing-masing 1x	40
Output console terformat sebagai laporan yang mudah dibaca	20
Total	100