Update and format 2-functions-methods

pull/53/head
hexatester 4 years ago
parent ac02f557db
commit 9a702d8a63

@ -1,9 +1,11 @@
# Dasar-dasar JavaScript: Metode dan Fungsi # Dasar-dasar JavaScript: Metode dan Fungsi
![Dasar-dasar JavaScript - Fungsi](../images/webdev101-js-functions.png) ![Dasar-dasar JavaScript - Fungsi](../images/webdev101-js-functions.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) > Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuis Pra-Kuliah ## Kuis Pra-Kuliah
[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md) [Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md)
Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**. Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
@ -21,7 +23,8 @@ Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungki
Sintaks untuk suatu fungsi terlihat seperti berikut: Sintaks untuk suatu fungsi terlihat seperti berikut:
```javascript ```javascript
function nameOfFunction() { // definisi fungsi function nameOfFunction() {
// definisi fungsi
// definisi fungsi/tubuh // definisi fungsi/tubuh
} }
``` ```
@ -30,7 +33,7 @@ Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat se
```javascript ```javascript
function tampilkanSapaan() { function tampilkanSapaan() {
console.log('Hello, world!'); console.log("Hello, world!");
} }
``` ```
@ -58,9 +61,7 @@ Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampa
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini: Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
```javascript ```javascript
function nama(param, param2, param3) { function nama(param, param2, param3) {}
}
``` ```
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya. Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
@ -75,7 +76,7 @@ function tampilkanSapaan(nama) {
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung. Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
```javascript ```javascript
tampilkanSapaan('Christopher'); tampilkanSapaan("Christopher");
// Menampilkan "Hello, Christopher!" ketika dijalankan // Menampilkan "Hello, Christopher!" ketika dijalankan
``` ```
@ -84,7 +85,7 @@ tampilkanSapaan('Christopher');
Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya: Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
```javascript ```javascript
function tampilkanSapaan(nama, salam='Hello') { function tampilkanSapaan(nama, salam = "Hello") {
console.log(`${salam}, ${nama}`); console.log(`${salam}, ${nama}`);
} }
``` ```
@ -92,10 +93,10 @@ function tampilkanSapaan(nama, salam='Hello') {
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`. Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
```javascript ```javascript
tampilkanSapaan('Christopher'); tampilkanSapaan("Christopher");
// menampilkan "Hello, Christopher" // menampilkan "Hello, Christopher"
tampilkanSapaan('Christopher', 'Hi'); tampilkanSapaan("Christopher", "Hi");
// menampilkan "Hi, Christopher" // menampilkan "Hi, Christopher"
``` ```
@ -123,7 +124,7 @@ function buatPesanSapaan(nama) {
Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`). Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
```javascript ```javascript
const pesanSapaan = buatPesanSapaan('Christopher'); const pesanSapaan = buatPesanSapaan("Christopher");
``` ```
## Fungsi sebagai parameter untuk fungsi ## Fungsi sebagai parameter untuk fungsi
@ -136,7 +137,7 @@ Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan
```javascript ```javascript
function tampilkanSelesai() { function tampilkanSelesai() {
console.log('3 detik telah berlalu'); console.log("3 detik telah berlalu");
} }
// nilai timer dalam milidetik // nilai timer dalam milidetik
setTimeout(3000, tampilkanSelesai); setTimeout(3000, tampilkanSelesai);
@ -152,7 +153,7 @@ Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
```javascript ```javascript
setTimeout(3000, function () { setTimeout(3000, function () {
console.log('3 detik telah berlalu'); console.log("3 detik telah berlalu");
}); });
``` ```
@ -166,7 +167,7 @@ Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk
```javascript ```javascript
setTimeout(3000, () => { setTimeout(3000, () => {
console.log('3 detik telah berlalu'); console.log("3 detik telah berlalu");
}); });
``` ```
@ -181,12 +182,13 @@ Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungs
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah! Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
## Kuis Pasca-Kuliah ## Kuis Pasca-Kuliah
[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md) [Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md)
## Review & Belajar Mandiri ## Review & Belajar Mandiri
Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini. Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
## Assignment ## Tugas
[Fun with Functions](./assignment.id.md) [Bersenang-senang dengan Fungsi](./assignment.id.md)

Loading…
Cancel
Save