Memahami Function di JavaScript: Konsep, Contoh, dan Latihan
1. Apa Itu Function?
Function adalah blok kode yang dirancang untuk menjalankan tugas tertentu. Fungsi hanya dieksekusi ketika dipanggil (invoked).
![]() |
function deklaration |
2. Cara Membuat Function di JavaScript
Ada beberapa cara untuk mendeklarasikan function di JavaScript:
- Function Declaration (Deklarasi Fungsi)
- Function Expression (Ekspresi Fungsi)
- Arrow Function (Fungsi Panah)
A. Function Declaration (Deklarasi Fungsi)
function salam(nama) {
return "Halo, " + nama + "!";
}
// Memanggil fungsi
console.log(salam("Mukhlis")); // Output: Halo, Mukhlis!
Ciri khas function declaration:
- Menggunakan kata kunci function
- Bisa dipanggil sebelum deklarasi (hoisting)
B. Function Expression (Ekspresi Fungsi)
const salam = function(nama) {
return "Halo, " + nama + "!";
};
console.log(salam("Mukhlis"));
Ciri khas function expression:
- Disimpan dalam variabel
- Tidak memiliki nama/ anonymous function
- Tidak bisa dipanggil sebelum dideklarasikan (tidak hoisted)
C. Arrow Function (Fungsi Panah)
const salam = (nama) => {
return "Halo, " + nama + "!";
};
console.log(salam("Mukhlis"));
jika hanya satu baris kode, bisa disingkat:
const salam = nama => "Halo, " + nama + "!";
console.log(salam("Mukhlis"));
Ciri khas arrow function:
- Sintaks lebih ringkas
- Tidak memiliki this sendiri (bergantung pada konteks luar)
3. Parameter dan Argumen
Function dapat menerima input (parameter) dan mengembalikan output.
function tambah(a, b) {
return a + b;
}
console.log(tambah(3, 5)); // Output: 8
a
danb
adalah parameter.3
dan5
adalah argumen yang diberikan saat fungsi dipanggil.
4. Default Parameter
Kita bisa memberikan nilai default untuk parameter jika tidak ada argumen yang dikirim.
function salam(nama = "User") {
return "Halo, " + nama + "!";
}
console.log(salam()); // Output: Halo, User!
console.log(salam("Mukhlis")); // Output: Halo, Mukhlis!
5. Function dengan Return dan Tanpa Return
- Dengan
return
→ Mengembalikan nilai ke pemanggil. - Tanpa
return
→ Hanya menjalankan aksi tanpa mengembalikan nilai.
Tanpa return:
function cetakNama(nama) {
console.log("Halo, " + nama + "!");
}
cetakNama("Mukhlis"); // Output: Halo, Mukhlis!
Dengan return:
function kali(a, b) {
return a * b;
}
let hasil = kali(4, 5);
console.log(hasil); // Output: 20
6. Function di dalam Function
Fungsi bisa berada di dalam fungsi lain.
function hitungLuasPersegi(sisi) {
function kali(a, b) {
return a * b;
}
return kali(sisi, sisi);
}
console.log(hitungLuasPersegi(4)); // Output: 16
7. IIFE (Immediately Invoked Function Expression)
IIFE adalah fungsi yang langsung dipanggil setelah dideklarasikan.
(function() {
console.log("Halo, ini IIFE!");
})(); // Output: Halo, ini IIFE!
8. Callback Function
Function bisa menerima function lain sebagai parameter.
function proses(angka, callback) {
let hasil = angka * 2;
callback(hasil);
}
proses(5, function(hasil) {
console.log("Hasilnya adalah: " + hasil);
});
// Output: Hasilnya adalah: 10
9. Perbedaan this
pada Function Biasa vs. Arrow Function
Di JavaScript, this
adalah konteks yang merujuk pada objek yang memanggil fungsi. Namun, arrow function memiliki perilaku this
yang berbeda dibanding function biasa.
A. Function Biasa dan this
Function biasa memiliki this
yang bergantung pada bagaimana fungsi dipanggil.
const obj = {
nama: "Mukhlis",
salam: function() {
console.log("Halo, " + this.nama);
}
};
obj.salam(); // Output: Halo, Mukhlis
Penjelasan:
this.nama
mengacu padaobj.nama
, karena fungsisalam
dipanggil dariobj
.
B. Arrow Function dan this
Arrow function tidak memiliki this
sendiri. Ia akan mengambil this
dari konteks terdekat (lexical scope).
const obj = {
nama: "Mukhlis",
salam: () => {
console.log("Halo, " + this.nama);
}
};
obj.salam(); // Output: Halo, undefined
Penjelasan:
this.nama
bukanobj.nama
, karena arrow function tidak memilikithis
sendiri.this
dalam arrow function akan mengacu ke lingkungan luar (global object di browser atauundefined
di mode strict).
10. Contoh Kasus di Dalam Method
Misalnya, kita ingin menggunakan setTimeout
di dalam objek.
Function Biasa dalam setTimeout
const user = {
nama: "Mukhlis",
salam: function() {
setTimeout(function() {
console.log("Halo, " + this.nama);
}, 1000);
}
};
user.salam(); // Output: Halo, undefined (karena `this` mengacu ke global object)
Kenapa this.nama
jadi undefined
?
- Karena dalam function biasa,
this
di dalamsetTimeout
tidak mengacu keuser
, melainkan ke global object.
Solusi dengan Arrow Funtion
const user = {
nama: "Mukhlis",
salam: function() {
setTimeout(() => {
console.log("Halo, " + this.nama);
}, 1000);
}
};
user.salam(); // Output: Halo, Mukhlis
Penjelasan:
- Arrow function tidak memiliki
this
sendiri →this
tetap mengacu keuser
, bukan ke global object.
3. Arrow Function di Dalam Class
Dalam class, arrow function juga berguna untuk menjaga this
.
Tanpa arrow function:
class User {
constructor(nama) {
this.nama = nama;
}
salam() {
setTimeout(function() {
console.log("Halo, " + this.nama);
}, 1000);
}
}
const mukhlis = new User("Mukhlis");
mukhlis.salam(); // Output: Halo, undefined
Solusi dengan arrow function:
class User {
constructor(nama) {
this.nama = nama;
}
salam() {
setTimeout(() => {
console.log("Halo, " + this.nama);
}, 1000);
}
}
const mukhlis = new User("Mukhlis");
mukhlis.salam(); // Output: Halo, Mukhlis
Kesimpulan
- Function biasa:
this
bergantung pada bagaimana fungsi dipanggil. - Arrow function:
this
tidak berubah, mengambil dari konteks luar. - Gunakan arrow function jika ingin
this
tetap mengacu ke objek terdekat, terutama dalam callback sepertisetTimeout
.
garis pembatas
Nah!, itulah materi dasar mengenai function pada javascript. untuk mempertajam pengetahuan teman-teman saya punya beberapa latihan tentang materi function ini, ini berguna untuk melatih kita dalam memahami function itu sendiri.
Latihan
Berikut latihan function:
1. Function Dasar
Buat function bernama sapaUser
yang menerima satu parameter nama
dan mengembalikan teks:
"Halo, [nama]! Selamat datang!"
Contoh:
console.log(sapaUser("Mukhlis"));
Output:
Halo, Mukhlis! Selamat datang!
2. Function Menghitung Luas Persegi
Buat function bernama luasPersegi
yang menerima satu parameter sisi
dan mengembalikan luasnya.
Rumus:
Luas = sisi × sisi
Contoh:
console.log(luasPersegi(5));
Output:
25
3. Function dengan Default Parameter
Buat function greet
yang menerima dua parameter: nama
dan ucapan
(default "Selamat datang"
).
Contoh:
console.log(greet("Mukhlis"));
console.log(greet("Mukhlis", "Selamat pagi"));
Output:
Selamat datang, Mukhlis!
Selamat pagi, Mukhlis!
4. Function Menghitung Total Harga dengan Pajak
Buat function hitungTotal
yang menerima dua parameter: harga
dan pajak
(dalam persen), lalu mengembalikan total harga setelah pajak ditambahkan.
Rumus:
Total = harga + (harga × pajak / 100)
Contoh:
console.log(hitungTotal(100000, 10));
Output:
110000
5. Arrow Function: Perkalian
Buat arrow function bernama kali
yang menerima dua angka dan mengembalikan hasil perkaliannya.
Contoh:
console.log(kali(4, 5));
Output:
20
6. Function Mengembalikan Angka Terbesar
Buat function angkaTerbesar
yang menerima tiga angka dan mengembalikan angka terbesar di antara mereka.
Contoh:
console.log(angkaTerbesar(10, 25, 15));
Output:
25
7. Function dengan Callback
Buat function prosesAngka
yang menerima dua angka dan satu callback function untuk operasi matematika (misalnya tambah atau kali).
Contoh:
function tambah(a, b) {
return a + b;
}
console.log(prosesAngka(3, 4, tambah));
Output:
7
silakan dicoba, hasilnya boleh teman-teman share aja di kolom komentar dibawah ini. thank you
Post a Comment for "Memahami Function di JavaScript: Konsep, Contoh, dan Latihan"
Post a Comment
Silakan Berkomentar dengan topik yang sesuai dan sopan. terimakasih