Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners into main

2025-08-10 08:44:23 +02:00 · 2021-01-02 22:07:28 +05:30
parent f9521b752f 38000934f7
commit f2b8c75c7b
101 changed files with 11126 additions and 1657 deletions
--- a/2-js-basics/1-data-types/translations/README.id.md
+++ b/2-js-basics/1-data-types/translations/README.id.md
@@ -0,0 +1,199 @@
+# Dasar-dasar JavaScript: Tipe Data
+
+![Dasar-dasar JavaScript - Tipe data](../images/webdev101-js-datatypes.png)
+
+> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7?loc=id)
+
+Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web.
+
+[![Jenis data di JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript")
+
+Mari kita mulai dengan variabel dan tipe data yang mengisinya!
+
+## Variabel
+
+Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda.
+
+Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian:
+
+- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`.
+
+  > Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kita akan membahas cakupan blok lebih mendalam di bagian mendatang.
+
+- **Nama variabel**, ini adalah nama yang Anda pilih sendiri.
+
+### Tugas - bekerja dengan variabel
+
+1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`:
+
+   ```javascript
+   let variabelSaya;
+   ```
+
+   `variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai.
+
+1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan.
+
+   ```javascript
+   variabelSaya = 123;
+   ```
+
+   > Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu _tidak menunjukkan kesetaraan_.
+
+   `variabelSaya` sekarang telah _diinisialisasi (initialized)_ dengan nilai 123.
+
+1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut.
+
+   ```javascript
+   let variabelSaya = 123;
+   ```
+
+   Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama.
+
+1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut:
+
+   ```javascript
+   variabelSaya = 321;
+   ```
+
+   Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru.
+
+   ✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya.
+
+## Konstanta (Constants)
+
+Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar.
+
+```javascript
+const VARIABEL_SAYA = 123;
+```
+
+Konstanta mirip dengan variabel, dengan dua pengecualian:
+
+- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode.
+- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh:
+
+  - **Nilai sederhana**. Berikut ini TIDAK diperbolehkan:
+
+    ```javascript
+    const PI = 3;
+    PI = 4; // tidak diperbolehkan
+    ```
+
+  - **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan.
+
+    ```javascript
+    const obj = { a: 3 };
+    obj = { b: 5 }; // tidak diperbolehkan
+    ```
+
+  - **Nilai objek tidak dilindungi**. Berikut diperbolehkan:
+
+    ```javascript
+    const obj = { a: 3 };
+    obj.a = 5; // diperbolehkan
+    ```
+
+    Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan.
+
+  > Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek.
+
+## Tipe Data
+
+Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai.
+
+✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`?
+
+### Angka (Numbers)
+
+Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka.
+
+`let variabelSaya = 123;`
+
+Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika).
+
+### Operator Aritmatika
+
+Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini:
+
+| Simbol | Deskripsi                                           | Contoh                                     |
+| ------ | --------------------------------------------------- | ------------------------------------------ |
+| `+`    | **Penjumlahan**: Menghitung jumlah dari dua angka   | `1 + 2 //hasil yang diharapkan adalah 3`   |
+| `-`    | **Pengurangan**: Menghitung selisih dua angka       | `1 - 2 //hasil yang diharapkan adalah -1`  |
+| `*`    | **Perkalian**: Menghitung hasil kali dua angka      | `1 * 2 //hasil yang diharapkan adalah 2`   |
+| `/`    | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` |
+| `%`    | **Sisa**: Menghitung sisa dari pembagian dua angka  | `3 % 2 //hasil yang diharapkan adalah 1`   |
+
+✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda?
+
+### String
+
+String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda.
+
+- `'Ini string'`
+- `"Ini juga string"`
+- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';`
+
+Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel.
+
+### Memformat String
+
+String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu.
+
+Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+```
+
+✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi`'1' + '1' = 11?`Pikirkanlah. Bagaimana dengan `'1' + 1`?
+
+**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string.
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!`; //Hello World!
+```
+
+Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun.
+
+✅ Kapan Anda akan menggunakan template literal dibanding string biasa?
+
+### Boolean
+
+Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
+
+---
+
+## 🚀 Tantangan
+
+JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan?
+
+## Kuis Pasca-Kuliah
+
+[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8?loc=id)
+
+## Review & Belajar Mandiri
+
+Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari?
+
+## Tugas
+
+[Praktek Tipe Data](assignment.id.md)
--- a/2-js-basics/1-data-types/translations/README.ja.md
+++ b/2-js-basics/1-data-types/translations/README.ja.md
@@ -0,0 +1,196 @@
+# JavaScript の基本: データ型
+
+![JavaScript Basics - Data types](images/webdev101-js-datatypes.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## レクチャー前クイズ
+[レクチャー前クイズ](.github/pre-lecture-quiz.md)
+
+このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。
+
+[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
+
+
+まず、変数とそれを埋めるデータ型について説明しましょう!
+
+## 変数
+
+変数には、コード全体で使用したり変更したりできる値が格納されています。
+
+変数の作成と **宣言** には、次のような構文 **[キーワード] [名前]** があります。の2つの部分で構成されています。
+
+- **キーワード**。キーワードは `let` または `var` です。
+
+   > 注: `let` というキーワードは ES6 で導入されたもので、変数に _ブロックスコープ_ と呼ばれるものを与えます。`var` よりも `let` を使うことをお勧めします。ブロックスコープについては、今後のパートで詳しく説明します。
+- **変数名**、これは自分で選んだ名前です。
+
+### タスク - 変数を使って作業する
+
+1. **変数の宣言**. `let` キーワードを使って変数を宣言してみましょう。
+
+    ```javascript
+    let myVariable;
+    ```
+
+   `myVariable` は `let` キーワードを使用して宣言されました。これは現在のところ値を持っていません。
+
+1. **値を代入します**。値を `=` 演算子で変数に格納し、その後に期待される値を指定します。
+
+    ```javascript
+    myVariable = 123;
+    ```
+
+   > 注: このレッスンで `=` を使うということは、変数に値を設定するために使われる「代入演算子」を使うことを意味します。これは平等を示すものではありません。
+
+   `myVariable` は値 123 で *初期化* されました。
+
+1. **リファクタ**。コードを以下の文に置き換えてください。
+
+    ```javascript
+    let myVariable = 123;
+    ```
+
+    上記のように変数が宣言され、同時に値が代入されることを _明示的初期化_ といいます。
+
+1. **変数の値を変更します**。以下の方法で変数値を変更します。
+
+   ```javascript
+   myVariable = 321;
+   ```
+
+   一度変数が宣言されると、`=` 演算子と新しい値を使って、コードのどの時点でもその値を変更することができます。
+
+   ✅ お試しください ブラウザで JavaScript を書くことができます。ブラウザのウィンドウを開き、開発者ツールに移動します。コンソールにプロンプトが表示されるので、`let myVariable = 123` と入力して return を押し、`myVariable` と入力します。どうなりますか？これらの概念については、後のレッスンで詳しく説明します。
+
+## 定数
+
+定数の宣言と初期化は、`const` キーワードを除いて、変数と同じ概念に従います。定数は通常、すべて大文字で宣言されます。
+
+```javascript
+const MY_VARIABLE = 123;
+```
+
+定数は変数と似ていますが、2つの例外があります。
+
+- **値を持つ必要があります**。定数を初期化しておかないと、コード実行時にエラーが発生します。
+- **参照は変更できません**。定数の参照は、一度初期化すると変更できません。そうしないと、コードを実行するときにエラーが発生します。2つの例を見てみましょう。
+   - **単純な値**です。以下は許可されていません。
+   
+      ```javascript
+      const PI = 3;
+      PI = 4; // 不許可
+      ```
+ 
+   - **オブジェクト参照は保護されています**。以下は許可されていません。
+   
+      ```javascript
+      const obj = { a: 3 };
+      obj = { b: 5 } // 不許可
+      ```
+
+    - **オブジェクトの値は保護されていません**。以下は許可されています。
+    
+      ```javascript
+      const obj = { a: 3 };
+      obj.a = 5;  // 許可
+      ```
+
+      上記ではオブジェクトの値を変更していますが、参照自体は変更できません。
+
+   > 注: `const` は参照が再割り当てから保護されていることを意味します。しかし、値は _不変_ ではなく、特にオブジェクトのような複雑な構造体であれば、変更される可能性があります。
+
+## データ型
+
+変数は、数値やテキストなど、多くの異なるタイプの値を格納することができます。これらのさまざまなタイプの値は、**データ型**として知られています。データ型は、開発者がコードをどのように書くべきか、ソフトウェアをどのように実行するべきかを決定するのに役立つため、ソフトウェア開発において重要な役割を果たします。さらに、データ型の中には、値の中の付加的な情報を変換したり抽出したりするのに役立つ独自の機能を持つものもあります。
+
+✅ データ型は、言語によって提供される最低レベルのデータ型であるため、JavaScript のデータプリミティブとも呼ばれています。プリミティブデータ型には、string、number、bigint、boolean、undefined、symbol の6つのデータ型があります。これらのプリミティブのそれぞれが何を表しているかを可視化してみましょう。`zebra` は何でしょうか？ `0` はどうでしょうか？ `true` はどうでしょうか?
+
+### 数値
+
+前のセクションでは、`myVariable` の値は数値データ型でした。
+
+`let myVariable = 123;`
+
+変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#operators)で説明する算術演算子と一緒に使用することもできます。
+
+### 算術演算子
+
+算術関数を実行する際に使用する演算子にはいくつかの種類があり、ここではいくつかを紹介します。
+
+| シンボル | 説明                                                              | 例                          |
+| ------ | ------------------------------------------------------------------------ | -------------------------------- |
+| `+`    | **加算**: 2つの数値の和を計算します。                | `1 + 2 //期待される答えは 3 です。`   |
+| `-`    | **減算**: 2つの数値の差を計算します。                | `1 - 2 //期待される答えは -1 です。`  |
+| `*`    | **乗算**: 2つの数値の積を計算します。                | `1 * 2 //期待される答えは 2 です。`   |
+| `/`    | **除算**: 2つの数値の商を計算します。                | `1 / 2 //期待される答えは 0.5 です。` |
+| `%`    | **余り**: 2つの数値の割り算から余りを計算します | `1 % 2 //期待される答えは 1 です。`   |
+
+✅ 試してみましょう! ブラウザのコンソールで算術を試してみてください。驚きの結果が出ましたか？
+
+### 文字列
+
+文字列は、一重引用符または二重引用符の間に存在する文字の集合です。
+
+- `'This is a string'`
+- `"This is also a string"`
+- `let myString = 'This is a string value stored in a variable';`
+
+文字列を書くときには引用符を使うことを忘れないでください。そうしないと、JavaScript はそれを変数名とみなします。
+
+### 文字列のフォーマット
+
+文字列はテキストであり、時々フォーマットが必要になります。
+
+2 つ以上の文字列を **連結** したり、結合したりするには、`+` 演算子を使用します。
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+myString1 + myString2 + "!"; //HelloWorld!
+myString1 + " " + myString2 + "!"; //Hello World!
+myString1 + ", " + myString2 + "!"; //Hello, World!
+
+```
+
+✅ JavaScript では `1 + 1 = 2` なのに、`'1' + '1' = 11` なのはなぜでしょうか? `'1' + 1` はどうでしょうか？
+
+**テンプレートリテラル** は文字列をフォーマットするもう一つの方法ですが、引用符の代わりにバックスティックを使用します。プレーンテキストではないものはすべてプレースホルダー `${ }` の中に入れなければなりません。これには、文字列である可能性のある変数も含まれます。
+
+```javascript
+let myString1 = "Hello";
+let myString2 = "World";
+
+`${myString1} ${myString2}!` //Hello World!
+`${myString1}, ${myString2}!` //Hello, World!
+```
+
+どちらの方法でも書式設定の目標を達成することができますが、テンプレートリテラルはスペースや改行を尊重します。
+
+✅ テンプレートリテラルとプレーンな文字列を使用するのはいつですか？
+
+### ブール値
+
+ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#operators) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。
+
+- `let myTrueBool = true`
+- `let myFalseBool = false`
+
+✅ 変数の評価値がブール値 `true` であれば、変数は 'truthy' とみなされます。興味深いことに、JavaScript では、[falsy として定義されていない限り、すべての値は truthy です](https://developer.mozilla.org/ja/docs/Glossary/Truthy)。
+
+---
+
+## 🚀 チャレンジ
+
+JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高いです。これらの 'gotchas' について少し調べてみてください。例えば: 大文字小文字の区別でつまずくことがあります! コンソールで以下のようにしてみてください。`let age = 1; let Age = 2; age == Age` (解決は `false` -- なぜ?) 他にどのような gotchas があるでしょうか?
+
+## レクチャー後クイズ
+[レクチャー後クイズ](.github/post-lecture-quiz.md)
+
+## 復習と自己学習
+
+この [JavaScript の練習問題リスト](https://css-tricks.com/snippets/javascript/)を見て、1つ試してみてください。何を学びましたか？
+
+## 課題
+
+[データ型の練習](assignment.ja.md)
--- a/2-js-basics/1-data-types/translations/assignment.id.md
+++ b/2-js-basics/1-data-types/translations/assignment.id.md
@@ -0,0 +1,11 @@
+# Praktek Tipe Data
+
+## Instruksi
+
+Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda?
+
+## Rubrik
+
+| Kriteria | Contoh                                                                                 | Memenuhi Syarat              | Perlu Perbaikan            |
+|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------|
+|          | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi |
--- a/2-js-basics/1-data-types/translations/assignment.ja.md
+++ b/2-js-basics/1-data-types/translations/assignment.ja.md
@@ -0,0 +1,11 @@
+# データ型の練習
+
+## 説明書
+
+あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？
+
+## ルーブリック
+
+基準 | 模範的な例 | 適切な | 改善が必要
+--- | --- | --- | -- |
+||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。|
--- a/2-js-basics/2-functions-methods/README.md
+++ b/2-js-basics/2-functions-methods/README.md
@@ -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

--- a/2-js-basics/2-functions-methods/translations/README.id.md
+++ b/2-js-basics/2-functions-methods/translations/README.id.md
@@ -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)
--- a/2-js-basics/2-functions-methods/translations/README.ja.md
+++ b/2-js-basics/2-functions-methods/translations/README.ja.md
@@ -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)
--- a/2-js-basics/2-functions-methods/translations/assignment.id.md
+++ b/2-js-basics/2-functions-methods/translations/assignment.id.md
@@ -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 |
--- a/2-js-basics/2-functions-methods/translations/assignment.ja.md
+++ b/2-js-basics/2-functions-methods/translations/assignment.ja.md
@@ -0,0 +1,13 @@
+# 関数で楽しむ
+
+## 説明書
+
+何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
+
+デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
+
+## ルーブリック
+
+| 基準 | 模範的な例                                                                              | 適切な                                                         | 改善が必要 |
+| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
+|          | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |
--- a/2-js-basics/3-making-decisions/README.md
+++ b/2-js-basics/3-making-decisions/README.md
@@ -3,9 +3,8 @@
 ![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)

-## 
-Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11)

 Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types

@@ -28,10 +27,10 @@ Operators are used to evaluate conditions by making comparisons that will create

 | Symbol | Description                                                                                                                                                   | Example            |
 | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right                         | `5 < 6 // true`    |
-| `<=`   | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true`   |
-| `>`    | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right                            | `5 > 6 // false`   |
-| `>=`   | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right    | `5 >= 6 // false`  |
+| `<`    | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right                              | `5 < 6 // true`    |
+| `<=`   | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right      | `5 <= 6 // true`   |
+| `>`    | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right                         | `5 > 6 // false`   |
+| `>=`   | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false`  |
 | `===`  | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type.       | `5 === 6 // false` |
 | `!==`  | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return                                    | `5 !== 6 // true`  |

@@ -125,7 +124,7 @@ if (!condition) {
 `if...else` isn't the only way to express decision logic. You can also use something called a ternary operator. The syntax for it looks like this:

 ```javascript
-let variable = condition ? <return this if true> : <return this if false>`
+let variable = condition ? <return this if true> : <return this if false>
 ```

 Below is a more tangible example:
@@ -160,9 +159,9 @@ if (firstNumber > secondNumber) {

 Create a program that is written first with logical operators, and then rewrite it using a ternary expression. What's your preferred syntax?

-## 
-Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+---
+## Post-Lecture Quiz
+[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12)

 ## Review & Self Study

--- a/2-js-basics/3-making-decisions/translations/README.id.md
+++ b/2-js-basics/3-making-decisions/translations/README.id.md
@@ -0,0 +1,175 @@
+# Dasar-dasar JavaScript: Membuat Keputusan
+
+![Dasar-dasar JavaScript - Membuat Keputusan](../images/webdev101-js-decisions.png)
+
+> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/11?loc=id)
+
+Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean.
+
+[![Membuat keputusan](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat keputusan")
+
+## Rekap Singkat tentang Boolean
+
+Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi.
+
+Setel boolean Anda menjadi true atau false seperti ini:
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ Nama Boolean diambil dari ahli matematika, filsuf, dan ahli logika Inggris George Boole (1815-1864).
+
+## Operator Perbandingan dan Boolean
+
+Operator digunakan untuk mengevaluasi kondisi dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut ini adalah daftar operator yang sering digunakan.
+
+| Simbol | Deskripsi                                                                                                                                                                  | Contoh             |
+| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **Kurang dari**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari kanan                                             | `5 < 6 // true`    |
+| `<=`   | **Kurang dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari atau sama dengan kanan           | `5 <= 6 // true`   |
+| `>`    | **Lebih besar dari**: Membandingkan dua nilai dan mengembalikan tipe data Boolean `true` jika nilai di sisi kiri lebih besar dari kanan                                    | `5 > 6 // false`   |
+| `>=`   | **Lebih besar dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri lebih besar dari atau sama dengan kanan | `5 >= 6 // false`  |
+| `===`  | **Kesetaraan ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN merupakan jenis data yang sama.            | `5 === 6 // false` |
+| `!==`  | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang berlawanan dari yang akan dikembalikan oleh operator persamaan ketat                       | `5 !== 6 // true`  |
+
+✅ Uji pengetahuan Anda dengan menulis beberapa perbandingan di konsol browser Anda. Apakah data yang dikembalikan mengejutkan Anda?
+
+## Pernyataan If
+
+Pernyataan if akan menjalankan kode di antara bloknya jika kondisinya benar.
+
+```javascript
+if (kondisi) {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+}
+```
+
+Operator logika sering digunakan untuk membentuk kondisi tersebut.
+
+```javascript
+let uangSekarang;
+let hargaLaptop;
+
+if (uangSekarang >= hargaLaptop) {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+  console.log("Mendapatkan laptop baru!");
+}
+```
+
+## Pernyataan IF..Else
+
+Pernyataan `else` akan menjalankan kode di antara bloknya jika kondisinya salah. Ini opsional dengan pernyataan `if`, jadi tidak semua `if` harus diikuti dengan pernyataan `else`.
+
+```javascript
+let uangSekarang;
+let hargaLaptop;
+
+if (uangSekarang >= hargaLaptop) {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+  console.log("Mendapatkan laptop baru!");
+} else {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+  console.log("Belum bisa membeli laptop baru!");
+}
+```
+
+✅ Uji pemahaman Anda tentang kode ini dan kode berikut dengan menjalankannya di konsol browser. Ubah nilai variabel uangSekarang dan hargaLaptop untuk mengubah `console.log()` yang dikembalikan.
+
+## Operator Logis dan Boolean
+
+Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat digabungkan dengan operator logika untuk menghasilkan nilai Boolean.
+
+| Simbol | Deskripsi                                                                                                      | Contoh                                                                                 |
+| ------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
+| `&&`   | **Logical AND**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar **hanya** jika kedua sisi benar | `(5 > 6) && (5 < 6 ) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai salah` |
+| `\|\|` | **Logical OR**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar jika setidaknya satu sisi benar  | `(5 > 6) \|\| (5 < 6) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai true` |
+| `!`    | **Logical NOT**: Menampilkan nilai kebalikan dari ekspresi Boolean                                             | `!(5 > 6) // 5 tidak lebih besar dari 6, tapi "!" akan kembali benar`                  |
+
+## Kondisi dan Keputusan dengan Operator Logis
+
+Operator logika dapat digunakan untuk membentuk kondisi dalam pernyataan if..else.
+
+```javascript
+let uangSekarang;
+let hargaLaptop;
+let hargaDiskonLaptop = hargaLaptop - hargaLaptop * 0.2; //Harga laptop diskon 20 persen
+
+if (uangSekarang >= hargaLaptop || uangSekarang >= hargaDiskonLaptop) {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+  console.log("Mendapatkan laptop baru!");
+} else {
+  //Kondisinya benar. Kode di blok ini akan berjalan.
+  console.log("Belum bisa membeli laptop baru!");
+}
+```
+
+### Operator Negasi
+
+Anda telah melihat sejauh ini bagaimana jika Anda bisa menggunakan pernyataan `if ... else` untuk membuat logika kondisional. Apa pun yang menjadi `jika` perlu dievaluasi menjadi benar / salah. Dengan menggunakan operator `!` Anda dapat _negate_ ekspresi. Ini akan terlihat seperti ini:
+
+```javascript
+if (!kondisi) {
+  // berjalan jika kondisinya false
+} else {
+  // berjalan jika kondisinya true
+}
+```
+
+### Ekspresi Terner
+
+`if ... else` bukanlah satu-satunya cara untuk mengekspresikan logika keputusan. Anda juga dapat menggunakan sesuatu yang disebut operator terner (ternary operator). Sintaksnya terlihat seperti ini:
+
+```javascript
+let variable = kondisi ? <kembalikan ini jika benar> : <kembalikan ini jika salah>`
+```
+
+Di bawah ini adalah contoh yang lebih nyata:
+
+```javascript
+let nomorPertama = 20;
+let nomorKedua = 10;
+let nomorTerbesar = nomorPertama > nomorKedua ? nomorPertama : nomorKedua;
+```
+
+✅ Luangkan waktu sebentar untuk membaca kode ini beberapa kali. Apakah Anda memahami cara kerja operator ini?
+
+Di atas menyatakan bahwa
+
+- jika `nomorPertama` lebih besar dari `nomorKedua`
+- tetapkan `nomorPertama` ke `nomorTerbesar`
+- jika tidak tetapkan `nomorKedua`.
+
+Ekspresi terner hanyalah cara ringkas untuk menulis kode di bawah ini:
+
+```javascript
+let nomorTerbesar;
+if (nomorPertama > nomorKedua) {
+  nomorTerbesar = nomorPertama;
+} else {
+  nomorTerbesar = nomorKedua;
+}
+```
+
+---
+
+## 🚀 Tantangan
+
+Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang menggunakan ekspresi terner. Apa sintaks pilihan Anda?
+
+## Kuis Pasca-Kuliah
+
+[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/12?loc=id)
+
+## Review & Belajar Mandiri
+
+Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators).
+
+Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
+
+## Tugas
+
+[Operator](./assignment.id.md)
--- a/2-js-basics/3-making-decisions/translations/README.ja.md
+++ b/2-js-basics/3-making-decisions/translations/README.ja.md
@@ -0,0 +1,175 @@
+# JavaScript の基本: 意思決定
+
+![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## 
+レクチャー前クイズ
+[レクチャー前クイズ](.github/pre-lecture-quiz.md)
+
+意思決定を行い、コードの実行順序を制御することで、コードを再利用可能で堅牢なものにします。このセクションでは、JavaScript のデータフローを制御するための構文と、ブール値データ型で使用される場合の意味について説明します。
+
+[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
+
+## ブール値の簡単なまとめ
+
+ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。
+
+以下のように、ブール値を true か false に設定します:
+
+`let myTrueBool = true`
+`let myFalseBool = false`
+
+✅ ブール値は、イギリスの数学者、哲学者、論理学者のジョージ・ブール (1815-1864) にちなんで名づけられました。
+
+## 比較演算子とブール値
+
+演算子は、ブール値を生成するような比較をして条件を評価するために使用されます。以下に、よく使われる演算子の一覧を示します。
+
+| シンボル | 説明                                                                                                                                                   | 例            |
+| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `<`    | **小なり**: 2つの値を比較し、左側の値が右側の値よりも小さい場合は `true` のブール値を返します。                         | `5 < 6 // true`    |
+| `<=`   | **小なりイコール**: 2つの値を比較し、左側の値が右側の値以下の場合は `true` のブール値を返します。 | `5 <= 6 // true`   |
+| `>`    | **大なり**: 2つの値を比較し、左側の値が右側の値よりも大きい場合は `true` のブール値を返します。                            | `5 > 6 // false`   |
+| `>=`   | **大なりイコール**: 2つの値を比較し、左辺の値が右辺の値以上の場合は `true` のブール値を返します。    | `5 >= 6 // false`  |
+| `===`  | **同値**: 2つの値を比較し、右と左の値が等しく、かつ同じデータ型であれば `true` のブール値を返します。       | `5 === 6 // false` |
+| `!==`  | **非同値**: 2つの値を比較し、厳密な平等演算子が返す値の反対のブール値を返します。                                    | `5 !== 6 // true`  |
+
+✅ ブラウザのコンソールに比較を書き込んで、自分の知識を確認してみてください。返ってきたデータに驚きはありませんか？
+
+## If 文
+
+if 文は、条件が true であればブロック間でコードを実行します。
+
+```javascript
+if (condition){
+    //条件は true でした。このブロック内のコードが実行されます。
+}
+```
+
+論理演算子は、条件を形成するためによく使われます。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //条件は true でした。このブロック内のコードが実行されます。
+    console.log("新しいノートパソコンを手に入れよう!");
+}
+```
+
+## IF..Else 文
+
+`else` 文は、条件が false の場合にブロック間でコードを実行します。これは `if` 文ではオプションです。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+
+if (currentMoney >= laptopPrice){
+    //条件は true でした。このブロック内のコードが実行されます。
+    console.log("新しいノートパソコンを手に入れよう!");
+}
+else{
+    //条件は false でした。このブロック内のコードが実行されます。
+    console.log("新しいノートパソコンを買う余裕はまだない!");
+}
+```
+
+✅ ブラウザのコンソールで実行して、このコードと次のコードの理解度をテストしてください。currentMoney 変数と laptopPrice 変数の値を変更して、返される `console.log()` を変更します。
+
+## 論理演算子とブール値
+
+意思決定には複数の比較が必要な場合があり、論理演算子を使ってブール値を生成することができます。
+
+| シンボル | 説明                                                                                     | 例                                                                 |
+| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| `&&`   | **論理積**: 2つのブール式を逆さにします。両辺が真の場合 **のみ** true を返します。 | `(5 > 6) && (5 < 6 ) //片方が false、もう片方が true です。false を返します。` |
+| `||` | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。     | `(5 > 6) || (5 < 6) //片方が false、もう片方が true です。true を返します。` |
+| `!`    | **論理否定**: ブール式の反対の値を返します。                             | `!(5 > 6) // 5は6より大きくないが、"!" は true を返す`         |
+
+## 論理演算子を用いた条件と決定
+
+論理演算子は、if...else 文で条件を形成するために使用できます。
+
+```javascript
+let currentMoney;
+let laptopPrice;
+let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //ノートパソコンの価格が20％オフ
+
+if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
+    //条件は true でした。このブロック内のコードが実行されます。
+    console.log("新しいノートパソコンを手に入れよう!");
+}
+else {
+    //条件は false でした。このブロック内のコードが実行されます。
+    console.log("新しいノートパソコンを買う余裕はまだない!");
+}
+```
+
+### 否定演算子
+
+ここまでで、条件付きロジックを作成するために `if...else` 文を使用する方法を見てきました。`if` に入るものはすべて true/false を評価する必要があります。演算子 `!` を使用すると、式を _否定_ することができます。以下のようになります。
+
+```javascript
+if (!condition) {
+  // 条件が false の場合に実行されます。
+} else {
+  // 条件が true の場合に実行されます。
+}
+```
+
+### 三項式
+
+意思決定ロジックを表現する方法は `if...else` だけではありません。三項演算子と呼ばれるものを使うこともできます。その構文は次のようになります。
+
+```javascript
+let variable = condition ? <true ならばこれを返す> : <false ならばこれを返す>`
+```
+
+以下でより具体的な例を挙げてみます。
+
+```javascript
+let firstNumber = 20;
+let secondNumber = 10
+let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
+```
+
+✅ このコードを数回読むのに時間をかけてください。これらの演算子がどのように動作するか理解できましたか？
+
+上の例では次のようになっています。
+- `firstNumber` が `secondNumber` よりも大きければ
+- `biggestNumber` に `firstNumber` を代入し、
+- そうでなければ `secondNumber` に代入する
+  
+三項式は、以下のコードをコンパクトに書くだけです。
+
+```javascript
+let biggestNumber;
+if (firstNumber > secondNumber) {
+  biggestNumber = firstNumber;
+} else {
+  biggestNumber = secondNumber;
+}
+```
+
+---
+
+## 🚀 チャレンジ
+
+最初に論理演算子を使ってプログラムを作成し、それを三項式で書き換えます。お好みの構文は？
+
+## レクチャー後クイズ
+
+[レクチャー後クイズ](.github/post-lecture-quiz.md)
+
+## 復習と自己学習
+
+ユーザーが利用できる多くの演算子についての詳細は [mdn](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators) をご覧ください。
+
+Josh Comeau の素晴らしい [operator lookup](https://joshwcomeau.com/operator-lookup/) をご覧ください!
+
+## 課題
+
+[演算子](assignment.ja.md)
--- a/2-js-basics/3-making-decisions/translations/assignment.id.md
+++ b/2-js-basics/3-making-decisions/translations/assignment.id.md
@@ -0,0 +1,40 @@
+# Operator
+
+## Instruksi
+
+Bermain-main dengan operator. Berikut adalah saran untuk program yang dapat Anda terapkan:
+
+Anda memiliki satu set siswa dari dua sistem penilaian yang berbeda.
+
+### Sistem Layanan pertama
+
+Satu sistem didefinisikan sebagai nilai dari 1-5 di mana 3 ke atas berarti Anda lulus kursus.
+
+### Sistem Produk kedua
+
+Sistem nilai lain memiliki nilai berikut `A, A-, B, B-, C, C-` di mana `A` adalah nilai tertinggi dan `C` adalah nilai kelulusan terendah.
+
+### Tugas
+
+Diberikan array `semuaPelajar` yang mewakili semua siswa dan nilai, buat array baru `pelajarYangLulus` yang berisi semua siswa yang lulus.
+
+> TIPS, gunakan for-loop dan if ... else dan operator perbandingan:
+
+```javascript
+let semuaPelajar = [
+  'A',
+  'B-'
+  1,
+  4
+  5,
+  2
+]
+
+let pelajarYangLulus = [];
+```
+
+## Rubrik
+
+| Kriteria | Contoh                   | Memenuhi                       | Perlu Perbaikan             |
+| -------- | ------------------------ | ------------------------------ | --------------------------- |
+|          | Solusi lengkap disajikan | Solusi tidak lengkap disajikan | Solusi dengan bug disajikan |
--- a/2-js-basics/3-making-decisions/translations/assignment.ja.md
+++ b/2-js-basics/3-making-decisions/translations/assignment.ja.md
@@ -0,0 +1,40 @@
+# 演算子
+
+## 説明書
+
+演算子で遊んでみる。あなたが実装できるプログラムの提案です。
+
+あなたは2つの異なる成績評価システムの学生のセットを持っています。
+
+### ファーストグレーディングシステム
+
+1つの成績評価システムは、1～5までの成績で、3以上の成績は合格を意味すると定義されています。
+
+### セカンドグレーディングシステム
+
+もう一つのグレードシステムは、`A, A-, B, B-, C, C-` というグレードがあり、`A` が最高グレード、`C` が最低合格グレードです。
+
+### タスク
+
+すべての学生とその成績を表す以下の配列 `allStudents` が与えられた場合、合格した学生を含む新しい配列 `studentsWhoPass` を作成します。
+
+> ヒント: for ループと if...else と比較演算子を使用します。
+
+```javascript
+let allStudents = [
+  'A',
+  'B-'
+  1,
+  4
+  5,
+  2
+]
+
+let studentsWhoPass = [];
+```
+
+## ルーブリック
+
+| 基準 | 模範的な例                      | 適切な                      | 改善が必要               |
+| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
+|          | 完全なソリューションを提示 | 部分的な解決策を提示 | バグがある解決策を提示 |
--- a/2-js-basics/4-arrays-loops/README.md
+++ b/2-js-basics/4-arrays-loops/README.md
@@ -3,9 +3,8 @@
 ![JavaScript Basics - Arrays](images/webdev101-js-arrays.png)
 > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)

-## 
-Pre-Lecture Quiz
-[Pre-lecture quiz](.github/pre-lecture-quiz.md)
+## Pre-Lecture Quiz
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)

 This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data.

@@ -112,9 +111,8 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {

 There are other ways of looping over arrays other than for and while loops. There are [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.

-## 
-Post-Lecture Quiz
-[Post-lecture quiz](.github/post-lecture-quiz.md)
+## Post-Lecture Quiz
+[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)


 ## Review & Self Study
--- a/2-js-basics/4-arrays-loops/translations/README.id.md
+++ b/2-js-basics/4-arrays-loops/translations/README.id.md
@@ -0,0 +1,141 @@
+# Dasar-dasar JavaScript: Array dan Loop
+
+![Dasar-dasar JavaScript - Array](../images/webdev101-js-arrays.png)
+
+> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Kuis Pra-Kuliah
+
+[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=id)
+
+Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
+
+[![Array dan Loop](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
+
+## Array
+
+Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
+
+✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
+
+Sintaks untuk array adalah sepasang tanda kurung siku.
+
+`let arrayKu = [];`
+
+Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
+
+`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
+
+✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
+
+```javascript
+let rasaRasaEsKrim = [
+  "Chocolate",
+  "Strawberry",
+  "Vanilla",
+  "Pistachio",
+  "Rocky Road",
+];
+rasaRasaEsKrim[2]; //"Vanilla"
+```
+
+Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
+
+```javascript
+rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
+```
+
+Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
+
+```javascript
+rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
+```
+
+✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
+
+Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
+
+```javascript
+let rasaRasaEsKrim = [
+  "Chocolate",
+  "Strawberry",
+  "Vanilla",
+  "Pistachio",
+  "Rocky Road",
+];
+rasaRasaEsKrim.length; //5
+```
+
+✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
+
+## Loop
+
+Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
+
+### For Loop
+
+Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
+
+```javascript
+//Menghitung hingga 10
+for (let i = 0; i < 10; i++) {
+  console.log(i);
+}
+```
+
+✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
+
+### While loop
+
+Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
+
+```javascript
+//Menghitung hingga 10
+let i = 0;
+while (i < 10) {
+  console.log(i);
+  i++;
+}
+```
+
+✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
+
+## Loop dan Array
+
+Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
+
+```javascript
+let rasaRasaEsKrim = [
+  "Chocolate",
+  "Strawberry",
+  "Vanilla",
+  "Pistachio",
+  "Rocky Road",
+];
+
+for (let i = 0; i < rasaRasaEsKrim.length; i++) {
+  console.log(rasaRasaEsKrim[i]);
+} //Berakhir saat semua rasa dicetak
+```
+
+✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
+
+---
+
+## 🚀 Tantangan
+
+Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
+
+## Kuis Pasca-Kuliah
+
+[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=id)
+
+## Review & Belajar Mandiri
+
+Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
+
+## Tugas
+
+[Loop sebuah Array](./assignment.id.md)
--- a/2-js-basics/4-arrays-loops/translations/README.ja.md
+++ b/2-js-basics/4-arrays-loops/translations/README.ja.md
@@ -0,0 +1,124 @@
+# JavaScript の基本: 配列とループ
+
+![JavaScript Basics - Arrays](images/webdev101-js-arrays.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## レクチャー前クイズ
+[レクチャー前クイズ](.github/pre-lecture-quiz.md)
+
+このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。
+
+[![Arrays and Loops](https://img.youtube.com/vi/Q_CRM2lXXBg/0.jpg)](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
+
+## 配列
+
+データを扱うのはどの言語でも共通の作業ですが、データが配列のような構造的な形式で整理されている場合は、より簡単な作業となります。配列では、データはリストに似た構造で保存されます。配列の大きな利点の1つは、1つの配列に異なるタイプのデータを格納できることです。
+
+✅ 配列は身近なところにある!? 太陽光パネルの配列など、実際の配列の例を思い浮かべることができますか？
+
+配列の構文は角括弧のペアです。
+
+`let myArray = [];`
+
+これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
+
+`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
+
+配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
+
+✅ 配列のインデックスが 0 から始まるのは驚きですか？いくつかのプログラミング言語では、インデックスは1から始まります。これには興味深い歴史があり、[ウィキペディア](https://en.wikipedia.org/wiki/Zero-based_numbering) で読むことができます。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors[2]; //"Vanilla"
+```
+
+このように、インデックスにレバレッジをかけて値を変更することができます。
+
+```javascript
+iceCreamFlavors[4] = "Butter Pecan"; //"Rocky Road" を "Butter Pecan" に変更
+```
+
+そして、このように与えられたインデックスに新しい値を挿入することができます。
+
+```javascript
+iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" を追加しました。
+```
+
+✅ 値を配列にプッシュするより一般的な方法は、 array.push() のような配列演算子を使用することです。
+
+配列の中に何個の項目があるかを調べるには、`length` プロパティを使用します。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+iceCreamFlavors.length; //5
+```
+
+✅ 自分で試してみましょう。ブラウザのコンソールを使って、自分で作成した配列を作成して操作してみましょう。
+
+## ループ
+
+ループは、反復または**イテレーション**のタスクを可能にし、多くの時間とコードを節約することができます。各反復は、その変数、値、条件を変えることができます。JavaScript には異なるタイプのループがあり、小さな違いはありますが、基本的には同じことをします。
+
+### For ループ
+
+`for`ループは反復するために3つの部分を必要とする。
+    - `counter` 典型的には反復回数をカウントする数値で初期化される変数
+    - `condition` 比較演算子を用いて、`false` のときにループを停止させる式
+    - `iteration-expression` 各反復の最後に実行され，通常はカウンタの値を変更するために使用されます
+  
+```javascript
+    //10までカウントアップ
+    for (let i = 0; i < 10; i++) {
+        console.log(i);
+    }
+```
+
+✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか？カウントダウンを作成して逆走させることはできますか？
+
+### While ループ
+
+`for` ループの構文とは異なり、`while` ループは `false` のときにループを停止する条件を必要とするだけです。ループ内の条件は通常、カウンタのような他の値に依存しており、ループ中に管理しなければなりません。カウンタの開始値はループの外で作成しなければならず、カウンタの変更を含めて条件を満たすための式はすべてループ内で維持しなければなりません。
+
+```javascript
+//10までカウントアップ
+let i = 0;
+while (i < 10) {
+ console.log(i);
+ i++;
+}
+```
+
+✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
+
+## ループと配列
+
+ほとんどの条件がループを止めるために配列の長さを必要とし、インデックスはカウンタの値になることもあるため、配列はループと一緒によく使われます。
+
+```javascript
+let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
+
+for (let i = 0; i < iceCreamFlavors.length; i++) {
+  console.log(iceCreamFlavors[i]);
+} //すべてのフレーバーがプリントされた時点で終了
+```
+
+✅ ブラウザのコンソールで、自分で作った配列をループさせてみてください。
+
+---
+
+## 🚀 チャレンジ
+
+配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。
+
+## レクチャー後クイズ
+[レクチャー後クイズ](.github/post-lecture-quiz.md)
+
+
+## 復習と自己学習
+
+JavaScript の配列には多くのメソッドがあり、データ操作に非常に便利です。[これらのメソッドを読んでください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)。そして、あなたが作成した配列でそれらのいくつか (push, pop, slice, splice など) を試してみてください。
+
+## 課題
+
+[配列のループ](assignment.ja.md)
--- a/2-js-basics/4-arrays-loops/translations/assignment.id.md
+++ b/2-js-basics/4-arrays-loops/translations/assignment.id.md
@@ -0,0 +1,13 @@
+# Loop sebuah Array
+
+## Instruksi
+
+Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
+
+> TIPS: gunakan for-loop dan ubah ekspresi iterasi
+
+## Rubric
+
+| Kriteria | Contoh                                            | Memenuhi                      | Perlu Perbaikan                       |
+| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
+|          | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
--- a/2-js-basics/4-arrays-loops/translations/assignment.ja.md
+++ b/2-js-basics/4-arrays-loops/translations/assignment.ja.md
@@ -0,0 +1,13 @@
+# 配列のループ
+
+## 説明書
+
+1～20の間の3番目の数字をすべてリストアップしてコンソールに表示するプログラムを作成します。
+
+> TIP: for-loop を使用して、反復式を変更します。
+
+## ルーブリック
+
+| 基準 | 模範的な例                               | 適切な                 | 改善が必要              |
+| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
+|          | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
--- a/2-js-basics/translations/README.id.md
+++ b/2-js-basics/translations/README.id.md
@@ -0,0 +1,14 @@
+# Pengantar JavaScript
+
+JavaScript adalah bahasa web. Dalam empat pelajaran ini, Anda akan mempelajari dasar-dasarnya.
+
+### Topik
+
+1. [Variabel dan Jenis Data](../1-data-types/translations/README.id.md)
+2. [Fungsi dan Metode](../2-functions-methods/translations/README.id.md)
+3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.id.md)
+4. [Array dan Loop](../4-arrays-loops/translations/README.id.md)
+
+### Kredit
+
+Pelajaran ini ditulis dengan ♥️ ️oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring)
--- a/2-js-basics/translations/README.ja.md
+++ b/2-js-basics/translations/README.ja.md
@@ -0,0 +1,14 @@
+# JavaScript 入門
+
+JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。
+
+### トピック
+
+1. [変数とデータ型](1-data-types/README.md)
+2. [関数とメソッド](2-functions-methods/README.md)
+3. [JavaScript での意思決定](3-making-decisions/README.md)
+4. [配列とループ](4-arrays-loops/README.md)
+
+### Credits
+
+These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)