Function #JavaScript Dasar 8
Function #JavaScript Dasar 8
Function #JavaScript Dasar 8
Function #JavaScript Dasar 8
Function #JavaScript Dasar 8
Function #JavaScript Dasar 8
Feb 14, 2024





Kali ini, saya akan membahas tentang function dalam JavaScript, salah satu konsep dasar yang harus kamu pahami jika kamu ingin belajar bahasa pemrograman web yang satu ini. Function adalah subprogram yang bisa dipanggil di bagian lain kode kita atau di dalam function itu sendiri (rekursi). Function bisa memiliki serangkaian pernyataan atau statement di badan atau blok function. Di JavaScript, function adalah sebuah objek. Karena memiliki properti dan juga method. Yuk, simak penjelasan dan contoh function dalam JavaScript berikut ini!
Apa itu Function?
Function adalah subprogram yang bisa dipanggil di bagian lain kode kita atau di dalam function itu sendiri (rekursi). Function bisa memiliki serangkaian pernyataan atau statement di badan atau blok function. Function bisa menerima dan selalu mengembalikan nilai.
Di JavaScript, function adalah sebuah objek. Karena memiliki properti dan juga method. Bagi pemula, konsep ini cukup membingungkan. Apalagi yang belum mengenal konsep OOP. Tapi tenang saja… Kita pelajari dulu tentang function, nanti saya akan bahas tentang objek di kesempatan yang berbeda.
Bagaimana Cara Membuat Function?
Ada beberapa cara yang bisa kita lakukan untuk membuat function di JavaScript, seperti:
Menggunakan cara biasa;
Menggunakan ekspresi;
Menggunakan tanda panah ( => );
Menggunakan constructor.
Mari kita coba semuanya…
Membuat Function dengan Cara Biasa
Cara ini paling sering digunakan, terutama buat yang baru belajar JavaScript.
// Function untuk menghitung luas persegi panjang
function luasPersegiPanjang(panjang, lebar) {
// Mengembalikan hasil perkalian panjang dan lebar
return panjang * lebar;
}
Kita menggunakan kata kunci function, diikuti dengan nama function, lalu parameter di dalam kurung (), dan blok function di dalam kurung kurawal { ... }. Parameter adalah variabel yang digunakan untuk menerima nilai yang dikirimkan saat memanggil function. Blok function adalah kumpulan pernyataan atau statement yang akan dijalankan saat function dipanggil.
Membuat Function dengan Ekspresi
Cara membuat function dengan ekspresi:
// Function untuk menghitung luas lingkaran
let luasLingkaran = function(jariJari) {
// Mengembalikan hasil perkalian phi, jari-jari, dan jari-jari
return 3.14 * jariJari * jariJari;
}
Kita menggunakan variabel, lalu diisi dengan function. Function ini sebenarnya adalah function anonim (anonymous function) atau function tanpa nama.
Membuat Function dengan Tanda Panah (Arrow Function)
Cara ini sering digunakan di kode JavaScript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula. Function ini mulai muncul pada standar ES6. Contoh:
// Function untuk menghitung luas segitiga
let luasSegitiga = (alas, tinggi) => {
// Mengembalikan hasil perkalian setengah, alas, dan tinggi
return 0.5 * alas * tinggi;
}
Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah ( =>) sebagai ganti function. Pembuatan function dengan cara ini disebut arrow function.
Membuat Function dengan Constructor
Cara ini sebenarnya tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Soalnya badan function dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine JavaScript. Contoh:
// Function untuk menghitung luas trapesium
let luasTrapesium = new Function('sisi1', 'sisi2', 'tinggi', 'return 0.5 * (sisi1 + sisi2) * tinggi');
Untuk yang masih pemula, saya rekomendasikan gunakan cara yang pertama dulu. Nanti kalau sudah terbiasa baru coba gunakan cara ke-2 dan ke-3.
Bagaimana Cara Memanggil Function?
Setelah mengetahui cara membuat function, lalu bagaimana cara memanggilnya? Kita bisa memanggil function di dalam kode JavaScript dengan menuliskan nama function diikuti dengan kurung (), dan nilai yang dikirimkan sebagai parameter di dalam kurung tersebut. Contoh:
// Memanggil function luasPersegiPanjang
let hasil = luasPersegiPanjang(10, 5); // Mengirimkan nilai 10 dan 5 sebagai parameter
console.log(hasil); // Menampilkan hasil function, yaitu 50
Kita bisa menyimpan nilai yang dikembalikan oleh function ke dalam variabel, atau langsung menampilkannya ke layar. Kita juga bisa memanggil function di dalam function lain, atau bahkan di dalam function itu sendiri (rekursi).
Mengapa Function Penting?
Function adalah salah satu konsep dasar yang sangat penting dalam pemrograman. Dengan menggunakan function, kamu bisa:
Membuat kode yang lebih modular, reusable, dan maintainable, dengan membagi program menjadi bagian-bagian yang lebih kecil dan spesifik.
Membuat kode yang lebih rapi, mudah dibaca, dan mudah dimodifikasi, dengan menggunakan nama function yang deskriptif dan konsisten.
Membuat web yang lebih interaktif, dinamis, dan responsif, dengan menggunakan function untuk mengolah data, mengubah konten, gaya, dan perilaku halaman web.
Penutup
Demikianlah artikel mengenai function dalam JavaScript yang saya buat untuk kamu. Semoga artikel ini bisa memberikan kamu pemahaman yang jelas dan mudah tentang function, dan menginspirasi kamu untuk belajar lebih dalam tentang JavaScript.
JavaScript adalah bahasa pemrograman web yang sangat populer dan berguna, yang wajib kamu kuasai jika kamu ingin menjadi developer frontend yang handal.
Kali ini, saya akan membahas tentang function dalam JavaScript, salah satu konsep dasar yang harus kamu pahami jika kamu ingin belajar bahasa pemrograman web yang satu ini. Function adalah subprogram yang bisa dipanggil di bagian lain kode kita atau di dalam function itu sendiri (rekursi). Function bisa memiliki serangkaian pernyataan atau statement di badan atau blok function. Di JavaScript, function adalah sebuah objek. Karena memiliki properti dan juga method. Yuk, simak penjelasan dan contoh function dalam JavaScript berikut ini!
Apa itu Function?
Function adalah subprogram yang bisa dipanggil di bagian lain kode kita atau di dalam function itu sendiri (rekursi). Function bisa memiliki serangkaian pernyataan atau statement di badan atau blok function. Function bisa menerima dan selalu mengembalikan nilai.
Di JavaScript, function adalah sebuah objek. Karena memiliki properti dan juga method. Bagi pemula, konsep ini cukup membingungkan. Apalagi yang belum mengenal konsep OOP. Tapi tenang saja… Kita pelajari dulu tentang function, nanti saya akan bahas tentang objek di kesempatan yang berbeda.
Bagaimana Cara Membuat Function?
Ada beberapa cara yang bisa kita lakukan untuk membuat function di JavaScript, seperti:
Menggunakan cara biasa;
Menggunakan ekspresi;
Menggunakan tanda panah ( => );
Menggunakan constructor.
Mari kita coba semuanya…
Membuat Function dengan Cara Biasa
Cara ini paling sering digunakan, terutama buat yang baru belajar JavaScript.
// Function untuk menghitung luas persegi panjang
function luasPersegiPanjang(panjang, lebar) {
// Mengembalikan hasil perkalian panjang dan lebar
return panjang * lebar;
}
Kita menggunakan kata kunci function, diikuti dengan nama function, lalu parameter di dalam kurung (), dan blok function di dalam kurung kurawal { ... }. Parameter adalah variabel yang digunakan untuk menerima nilai yang dikirimkan saat memanggil function. Blok function adalah kumpulan pernyataan atau statement yang akan dijalankan saat function dipanggil.
Membuat Function dengan Ekspresi
Cara membuat function dengan ekspresi:
// Function untuk menghitung luas lingkaran
let luasLingkaran = function(jariJari) {
// Mengembalikan hasil perkalian phi, jari-jari, dan jari-jari
return 3.14 * jariJari * jariJari;
}
Kita menggunakan variabel, lalu diisi dengan function. Function ini sebenarnya adalah function anonim (anonymous function) atau function tanpa nama.
Membuat Function dengan Tanda Panah (Arrow Function)
Cara ini sering digunakan di kode JavaScript masa kini, karena lebih sederhana. Akan tetapi sulit dipahami bagi pemula. Function ini mulai muncul pada standar ES6. Contoh:
// Function untuk menghitung luas segitiga
let luasSegitiga = (alas, tinggi) => {
// Mengembalikan hasil perkalian setengah, alas, dan tinggi
return 0.5 * alas * tinggi;
}
Sebenarnya hampir sama dengan yang menggunakan ekspresi. Bedanya, kita menggunakan tanda panah ( =>) sebagai ganti function. Pembuatan function dengan cara ini disebut arrow function.
Membuat Function dengan Constructor
Cara ini sebenarnya tidak direkomendasikan oleh Developer Mozilla, karena terlihat kurang bagus. Soalnya badan function dibuat dalam bentuk string yang dapat mempengaruhi kinerja engine JavaScript. Contoh:
// Function untuk menghitung luas trapesium
let luasTrapesium = new Function('sisi1', 'sisi2', 'tinggi', 'return 0.5 * (sisi1 + sisi2) * tinggi');
Untuk yang masih pemula, saya rekomendasikan gunakan cara yang pertama dulu. Nanti kalau sudah terbiasa baru coba gunakan cara ke-2 dan ke-3.
Bagaimana Cara Memanggil Function?
Setelah mengetahui cara membuat function, lalu bagaimana cara memanggilnya? Kita bisa memanggil function di dalam kode JavaScript dengan menuliskan nama function diikuti dengan kurung (), dan nilai yang dikirimkan sebagai parameter di dalam kurung tersebut. Contoh:
// Memanggil function luasPersegiPanjang
let hasil = luasPersegiPanjang(10, 5); // Mengirimkan nilai 10 dan 5 sebagai parameter
console.log(hasil); // Menampilkan hasil function, yaitu 50
Kita bisa menyimpan nilai yang dikembalikan oleh function ke dalam variabel, atau langsung menampilkannya ke layar. Kita juga bisa memanggil function di dalam function lain, atau bahkan di dalam function itu sendiri (rekursi).
Mengapa Function Penting?
Function adalah salah satu konsep dasar yang sangat penting dalam pemrograman. Dengan menggunakan function, kamu bisa:
Membuat kode yang lebih modular, reusable, dan maintainable, dengan membagi program menjadi bagian-bagian yang lebih kecil dan spesifik.
Membuat kode yang lebih rapi, mudah dibaca, dan mudah dimodifikasi, dengan menggunakan nama function yang deskriptif dan konsisten.
Membuat web yang lebih interaktif, dinamis, dan responsif, dengan menggunakan function untuk mengolah data, mengubah konten, gaya, dan perilaku halaman web.
Penutup
Demikianlah artikel mengenai function dalam JavaScript yang saya buat untuk kamu. Semoga artikel ini bisa memberikan kamu pemahaman yang jelas dan mudah tentang function, dan menginspirasi kamu untuk belajar lebih dalam tentang JavaScript.
JavaScript adalah bahasa pemrograman web yang sangat populer dan berguna, yang wajib kamu kuasai jika kamu ingin menjadi developer frontend yang handal.
Related posts
Aug 2023
The Future of UX: Embracing AI and Machine Learning
In the ever-evolving landscape of technology, AI and machine learning have emerged as pivotal elements in shaping the future of UI/UX design.

Aug 2023
The Future of UX: Embracing AI and Machine Learning
In the ever-evolving landscape of technology, AI and machine learning have emerged as pivotal elements in shaping the future of UI/UX design.

Aug 2023
The Future of UX: Embracing AI and Machine Learning
In the ever-evolving landscape of technology, AI and machine learning have emerged as pivotal elements in shaping the future of UI/UX design.

Mar 2023
Designing for Accessibility: A UI/UX Designer's Guide
Accessibility in design is not just a trend or a regulatory checkbox; it's a fundamental aspect of creating inclusive digital experiences.

Mar 2023
Designing for Accessibility: A UI/UX Designer's Guide
Accessibility in design is not just a trend or a regulatory checkbox; it's a fundamental aspect of creating inclusive digital experiences.

Mar 2023
Designing for Accessibility: A UI/UX Designer's Guide
Accessibility in design is not just a trend or a regulatory checkbox; it's a fundamental aspect of creating inclusive digital experiences.

Feb 2023
Minimalism in UI Design: More Than Just Aesthetics
The minimalist approach in UI design is often celebrated for its clean lines and uncluttered spaces, but it embodies much more than just a visual style.

Feb 2023
Minimalism in UI Design: More Than Just Aesthetics
The minimalist approach in UI design is often celebrated for its clean lines and uncluttered spaces, but it embodies much more than just a visual style.

Feb 2023
Minimalism in UI Design: More Than Just Aesthetics
The minimalist approach in UI design is often celebrated for its clean lines and uncluttered spaces, but it embodies much more than just a visual style.
