This commit is contained in:
Sanjay
2021-01-02 22:07:28 +05:30
101 changed files with 11126 additions and 1657 deletions

View File

@@ -4,7 +4,7 @@
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**.
@@ -181,7 +181,7 @@ You've now seen we have three ways to pass a function as a parameter and might b
Can you articulate in one sentence the difference between functions and methods? Give it a try!
## Post-Lecture Quiz
[Post-lecture quiz](.github/post-lecture-quiz.md)
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
## Review & Self Study

View File

@@ -0,0 +1,194 @@
# Dasar-dasar JavaScript: Metode dan Fungsi
![Dasar-dasar JavaScript - Fungsi](../images/webdev101-js-functions.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuis Pra-Kuliah
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9?loc=id)
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)**.
[![Metode dan Fungsi](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
## Fungsi
Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
## Membuat dan memanggil suatu fungsi
Sintaks untuk suatu fungsi terlihat seperti berikut:
```javascript
function nameOfFunction() {
// definisi fungsi
// definisi fungsi/tubuh
}
```
Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
```javascript
function tampilkanSapaan() {
console.log("Hello, world!");
}
```
Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
```javascript
// memanggil fungsi kita
tampilkanSapaan();
```
> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
### Praktik terbaik fungsi
Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
- Gunakan **camelCasing** untuk menggabungkan kata-kata
- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
## Memasukkan informasi ke suatu fungsi
Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
```javascript
function nama(param, param2, param3) {}
```
Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
```javascript
function tampilkanSapaan(nama) {
const pesan = `Hello, ${nama}!`;
console.log(pesan);
}
```
Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
```javascript
tampilkanSapaan("Christopher");
// Menampilkan "Hello, Christopher!" ketika dijalankan
```
## Nilai dasar (Nilai Default)
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
function tampilkanSapaan(nama, salam = "Hello") {
console.log(`${salam}, ${nama}`);
}
```
Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
```javascript
tampilkanSapaan("Christopher");
// menampilkan "Hello, Christopher"
tampilkanSapaan("Christopher", "Hi");
// menampilkan "Hi, Christopher"
```
## Nilai Kembali (Return values)
Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
```javascript
return variabelSaya;
```
Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
```javascript
function buatPesanSapaan(nama) {
const pesan = `Hello, ${nama}`;
return pesan;
}
```
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
const pesanSapaan = buatPesanSapaan("Christopher");
```
## Fungsi sebagai parameter untuk fungsi
Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
```javascript
function tampilkanSelesai() {
console.log("3 detik telah berlalu");
}
// nilai timer dalam milidetik
setTimeout(3000, tampilkanSelesai);
```
### Fungsi anonim
Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
```javascript
setTimeout(3000, function () {
console.log("3 detik telah berlalu");
});
```
Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
### Fungsi panah gemuk
Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
```javascript
setTimeout(3000, () => {
console.log("3 detik telah berlalu");
});
```
### Kapan menggunakan setiap strategi
Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
---
## 🚀 Tantangan
Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
## Kuis Pasca-Kuliah
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10?loc=id)
## 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.
## Tugas
[Bersenang-senang dengan Fungsi](./assignment.id.md)

View File

@@ -0,0 +1,192 @@
# JavaScript の基本: メソッドと関数
![JavaScript Basics - Functions](images/webdev101-js-functions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レクチャー前クイズ
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。
[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
## 関数
コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます!
他の関数から関数を呼び出すこともできます!同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。
## 関数の作成と呼び出し
関数の構文は次のようになります:
```javascript
function nameOfFunction() { // 関数の定義
// 関数の定義/中身
}
```
挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません:
```javascript
function displayGreeting() {
console.log('Hello, world!');
}
```
関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。
```javascript
// 関数の呼び出し
displayGreeting();
```
> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう!実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。
### 関数のベストプラクティス
機能を作成する際に留意すべきベストプラクティスがいくつかあります。
- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します
- **キャメルケーシング** を使用して単語を組み合わせます
- 関数を特定のタスクに集中させます
## 関数への情報の受け渡し
関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。
パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています:
```javascript
function name(param, param2, param3) {
}
```
名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。
```javascript
function displayGreeting(name) {
const message = `Hello, ${name}!`;
console.log(message);
}
```
関数を呼び出してパラメータを渡すときは、括弧内で指定します。
```javascript
displayGreeting('Christopher');
// 実行時に "Hello, Christopher!" と表示される
```
## 初期値
より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか?挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。
```javascript
function displayGreeting(name, salutation='Hello') {
console.log(`${salutation}, ${name}`);
}
```
関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。
```javascript
displayGreeting('Christopher');
// "Hello, Christopher" と表示されます。
displayGreeting('Christopher', 'Hi');
// "Hi, Christopher" と表示されます。
```
## 戻り値
今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか?
これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。
関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています:
```javascript
return myVariable;
```
挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。
```javascript
function createGreetingMessage(name) {
const message = `Hello, ${name}`;
return message;
}
```
この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。
```javascript
const greetingMessage = createGreetingMessage('Christopher');
```
## 関数のパラメータとしての関数
プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。
例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。
以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。
```javascript
function displayDone() {
console.log('3秒が経過しました');
}
// タイマーの値はミリ秒単位
setTimeout(displayDone, 3000);
```
### 匿名関数
もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。
パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。
上のコードを書き換えて、匿名の関数を使用してみましょう。
```javascript
setTimeout(function() {
console.log('3秒が経過しました');
}, 3000);
```
新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。
### ファットアロー関数
多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。
ファットアロー関数を使って、もう一度コードを書き換えてみましょう。
```javascript
setTimeout(() => {
console.log('3 seconds has elapsed');
}, 3000);
```
### それぞれの戦略を使うとき
関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。
---
## 🚀 チャレンジ
関数とメソッドの違いを一文で表現できますか?試してみてください。
## レクチャー後クイズ
[レクチャー後クイズ](.github/post-lecture-quiz.md)
## 復習と自己学習
コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。
## 課題
[関数で楽しむ](assignment.ja.md)

View File

@@ -0,0 +1,13 @@
# Bersenang-senang dengan Fungsi
## Instruksi
Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
## Rubrik
| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan |
|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |

View File

@@ -0,0 +1,13 @@
# 関数で楽しむ
## 説明書
何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
## ルーブリック
| 基準 | 模範的な例 | 適切な | 改善が必要 |
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
| | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |