{"id":25844175,"url":"https://github.com/dicodingacademy/javascript-style-guide","last_synced_at":"2025-09-03T17:45:29.659Z","repository":{"id":236030572,"uuid":"790640849","full_name":"dicodingacademy/javascript-style-guide","owner":"dicodingacademy","description":"Standar style and guidance for writing JavaScript code in Dicoding Academy ecosystem","archived":false,"fork":false,"pushed_at":"2025-06-25T01:13:49.000Z","size":49,"stargazers_count":21,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-30T09:35:20.702Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dicodingacademy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-23T08:55:54.000Z","updated_at":"2025-08-27T01:10:31.000Z","dependencies_parsed_at":"2024-12-28T23:02:59.873Z","dependency_job_id":null,"html_url":"https://github.com/dicodingacademy/javascript-style-guide","commit_stats":null,"previous_names":["dicodingacademy/javascript-style-guide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dicodingacademy/javascript-style-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dicodingacademy%2Fjavascript-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dicodingacademy%2Fjavascript-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dicodingacademy%2Fjavascript-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dicodingacademy%2Fjavascript-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dicodingacademy","download_url":"https://codeload.github.com/dicodingacademy/javascript-style-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dicodingacademy%2Fjavascript-style-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273484570,"owners_count":25114122,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-01T07:27:57.400Z","updated_at":"2025-09-03T17:45:29.607Z","avatar_url":"https://github.com/dicodingacademy.png","language":"JavaScript","readme":"# Dicoding Academy JavaScript - Style Guide\n\n## Introduction\n\n\u003e Ada banyak sekali opsi yang bisa diikuti perihal gaya penulisan kode JavaScript. Oleh sebab itu, untuk mengurangi kebingungan, kami standarkan penulisan kode JavaScript yang digunakan dalam lingkup Dicoding Academy.\n\n*Style guide* ini dibuat untuk menstandarkan penulisan kode JavaScript yang berada di dalam platform Dicoding Academy, seperti potongan kode yang kami ajarkan di dalam sebuah kelas. Selain itu, style guide ini bisa menjadi panduan bagi siswa untuk menstandarkan gaya penulisan kode JavaScript dalam berbagai aktivitas, salah satunya ketika pengerjaan proyek submission.\n\n\n\n## ESLint Sharable Config\n\nKami menyediakan ESlint *[sharable config](https://eslint.org/docs/latest/extend/shareable-configs)* yang bisa digunakan untuk menerapkan style guide yang didefinisikan di sini.\n\n### Using Sharable Config in ESLint  9 or Latest\n\nPasang package ESLint dan `eslint-config-dicodingacademy` dengan menggunakan perintah di bawah ini.\n\n```shell\nnpm install --save-dev eslint eslint-config-dicodingacademy\n```\n\nBuatlah berkas [konfigurasi ESLint](https://eslint.org/docs/latest/use/configure/#extending-configuration-files) (contoh: `eslint.config.mjs`) dan di dalamnya tulis kode di bawah ini.\n\n```javascript\nimport daStyle from 'eslint-config-dicodingacademy';\n\nexport default [\n  daStyle,\n  // other config style\n];\n\n```\n\nAnda bisa mendeteksi kesalahan penulisan JavaScript melalui perintah di bawah ini.\n\n```shell\nnpx eslint\n```\n\nJika ada kode yang tidak sesuai dengan aturan, ESLint akan menampilkan informasinya pada STDOUT.\n\n```text\n/home/dimas/eslint-test/index.js\n  1:22  error  Missing semicolon  semi\n\n✖ 1 problem (1 error, 0 warnings)\n  1 error and 0 warnings potentially fixable with the `--fix` option.\n\n```\n\n\n\n### Using Sharable Config in ESLint \u003c 9\n\nPasang package ESLint (versi di bawah 9) dan `eslint-config-dicodingacademy` dengan menggunakan perintah di bawah ini.\n\n```shell\nnpm install --save-dev eslint@8 eslint-config-dicodingacademy\n```\n\nBuatlah berkas [konfigurasi ESLint](https://eslint.org/docs/v8.x/use/configure/) (contoh: `.eslintrc.js`) dan di dalamnya tulis kode di bawah ini.\n\n```javascript\nmodule.exports = {\n  extends: ['dicodingacademy'],\n  parserOptions: {\n    ecmaVersion: 'latest'\n  }\n  // other config\n};\n\n```\n\nAnda bisa mendeteksi kesalahan penulisan JavaScript melalui perintah di bawah ini.\n\n```shell\nnpx eslint\n```\n\nJika ada kode yang tidak sesuai dengan aturan, ESLint akan menampilkan informasinya pada STDOUT.\n\n```text\n/home/dimas/eslint-test/index.js\n  1:22  error  Missing semicolon  semi\n\n✖ 1 problem (1 error, 0 warnings)\n  1 error and 0 warnings potentially fixable with the `--fix` option.\n\n```\n\n\n\n## Meta Rules\n\n### Encoding menggunakan UTF-8\n\nUntuk menampilkan dan mengubah teks dengan benar, teks editor harus mengetahui *text encoding* yang digunakan. Pastikan *text encoding* yang digunakan adalah **UTF-8**. Pada teks editor yang umum (seperti VSCode atau WebStorm), informasi encoding yang digunakan dapat ditemukan di *status bar* yang berada di bawah kode editor.\n\nInformasi tambahan:\n\n- https://www.jetbrains.com/help/idea/encoding.html\n\n\n\n### Comments\n\nGunakan komentar untuk menjelaskan kode yang ditulis, seperti baris kode yang sulit dimengerti, informasi argumen pada sebuah fungsi, dan lain sebagainya. Jangan menambahkan komentar pada kode yang \"mudah\" untuk dibaca dan dimengerti.\n\n#### Multiline Comment\n\nGunakan `/** ... */` untuk komentar lebih dari satu baris.\n\nContoh **SALAH** ⛔.\n\n```javascript\n// make() returns a new element\n// based on the passed in tag name\nfunction make(tag) {\n  \n  // ...\n    \n  return element;\n}\n```\n\nContoh **BENAR** ✅.\n\n```javascript\n/**\n * make() returns a new element\n * based on the passed in tag name\n */\nfunction make(tag) {\n  \n  // ...\n    \n  return element;\n}\n```\n\n\n\n#### Singleline Comment\n\nGunakan `//` untuk komentar satu baris. Sebisa mungkin komentar ditulis di baris baru.\n\nContoh **SALAH** ⛔.\n\n```javascript\nconst interval = 60_000; // 1 hour in millis\n\n/**\n * 1 hour in milis\n */\nconst interval = 60_000;\n```\n\nContoh **BENAR** ✅.\n\n```javascript\n// 1 hour in millis\nconst interval = 60_000;\n```\n\n\n\n#### Type Information\n\nAnda dapat (secara opsional) mendokumentasikan kode yang ditulis (termasuk menjelaskan informasi tipe data) menggunakan komentar yang ditulis dengan mengikuti format standar JSDoc. Format yang standar dapat dikenali oleh Code Editor sehingga dapat membantu memudahkan pengembangan.\n\nContoh **SALAH** ⛔ karena tidak menggunakan standar format apa pun.\n\n```javascript\n/**\n * function that sum two of numbers\n * Potentially throwing an TypeError\n * a is number\n * b is number\n */\nfunction sum(a, b) {\n  if (typeof a !== 'number' || typeof b !== 'number') {\n    throw new TypeError('all given argument should be a number');\n  }\n  \n  return a + b;\n}\n```\n\nContoh **BENAR** ✅ dengan mengikuti format JSDoc.\n\n```javascript\n/**\n * function that sum two of numbers\n * \n * @throws {TypeError} will throw if the arguments is not number\n * @params {number} a\n * @params {number} b\n */\nfunction sum(a, b) {\n  if (typeof a !== 'number' || typeof b !== 'number') {\n    throw new TypeError('all given argument should be a number');\n  }\n  \n  return a + b;\n}\n```\n\nInformasi tambahan:\n\n- https://jsdoc.app/\n\n  \n\n### Action Items\n\nTandai sebuah  *placeholder* (hal yang perlu dilakukan) dengan teks `TODO:`. Anda bisa gunakan `//` jika to-do dijelaskan dalam satu baris atau `/** */` jika lebih dari satu baris. Jangan tambahkan karakter lain seperti `@` atau `@@` ketika menulis `TODO:` karena tidak perlu.\n\nBerikut adalah contoh yang **SALAH** ⛔.\n\n```javascript\nfunction sum(a, b) {\n    // @TODO: throws an TypeError when both argument is not number\n    \n    return a + b;\n}\n```\n\nBerikut adalah contoh yang **BENAR** ✅.\n\n```javascript\nfunction sum(a, b) {\n  // TODO: throws an TypeError when both argument is not number\n  \n  return a + b;\n}\n\n\n/**\n * TODO:\n * Create a function that:\n *  - called average\n *  - receives an array of numbers as argument\n *  - ... etc\n */\n```\n\n\n\n### Line Break (Line Endings)\n\nAnda harus menggunakan format baris baru yang konsisten pada setiap berkas. Di panduan ini kami fokuskan hanya pada penggunaan **unix** (LF atau \\n). Pada teks editor yang umum (seperti VSCode atau WebStorm), informasi *line endings* yang digunakan dapat ditemukan di *status bar* yang berada di bawah kode editor.\n\nInformasi tambahan:\n\n- https://www.jetbrains.com/help/webstorm/configuring-line-endings-and-line-separators.html\n- https://www.cs.toronto.edu/~krueger/csc209h/tut/line-endings.html\n\n\n\n## Code Styles\n\n### Trailing Whitespace\n\nTerkadang kita tidak sadar menambahkan spasi (*whitespace*) yang tidak perlu di akhir baris kode. Bila whitespace tersebut terbawa ke VCS seperti git, tidak jarang developer menjadi bingung dan frustrasi mencari \"perbedaan\" dari sebuah baris kode karena sulit untuk terlihat. Maka dari itu, pastikan setiap akhir baris kode bersih dari *whitespace*.\n\nContoh yang **SALAH** ⛔ karena baris kode (pertama) mengandung *whitespace*.\n\n```javascript\nconst foo = 0;        \nconst bar = 5;\n```\n\nContoh yang **BENAR** ✅. Tidak ada *whitespace* di setiap akhir baris kode.\n\n```javascript\nconst foo = 0;\nconst bar = 5;\n```\n\n\n\n### Indentation\n\nPenggunaan indentasi pada kode harus konsisten. Untuk menjaga konsistensi, kami menggunakan **2**  buah **spasi** sebagai indentasi.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nfunction adder(by) {\n    return (value) =\u003e {\n        return by + value;\n  }\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nfunction adder(by) {\n  return (value) =\u003e {\n    return by + value;\n  }\n}\n```\n\n\n\n### Naming\n\nSecara umum penamaan variabel atau fungsi harus menggunakan format `camelCase`.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nconst my_favorite_color = '#112C85';\n\nfunction do_something() {\n  // ...\n}\n\nconst { from_json } = JSON.parse('{}');\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nconst myFavoriteColor = '#112C85';\n\nfunction doSomething() {\n  // ...\n}\n\nconst { from_json: fromJson } = JSON.parse('{}');\n```\n\n\n\n### Arrow Function Parentheses\n\nAgar menjaga konsistensi penulisan, selalu gunakan tanda kurung (parentheses) setiap kali membuat arrow function baik tanpa argumen, 1 argumen, atau lebih.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\ndocument.addEventListener('click', event =\u003e {\n  // ...\n});\n\nstore.subscribe(() =\u003e {\n  // ...\n})\n\nserver.handler((request, response) =\u003e {\n  // ...\n});\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\ndocument.addEventListener('click', (event) =\u003e {\n  // ...\n});\n\nstore.subscribe(() =\u003e {\n  // ...\n})\n\nserver.handler((request, response) =\u003e {\n  // ...\n});\n```\n\n\n\n### Formatting\n\n#### Comma\n\nSelalu tambahkan spasi di antara nilai yang dipisahkan oleh tanda koma.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nfunction sum(a,b,c) {\n  // ...\n}\n\nconst numbers = [1,2,3,4];\nconst person = { name: 'Fulan',age: 30 };\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nfunction sum(a, b, c) {\n  // ...\n}\n\nconst numbers = [1, 2, 3, 4];\nconst person = { name: 'Fulan', age: 30 };\n```\n\n\n\n#### Object Literals\n\nSelalu tambahkan spasi di antara tanda `{ }` dan nama properti yang didefinsikan dalam satu baris.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nconst person = {name: 'Fulan', age: 30};\nconst {name, age} = person;\n\nfunction printPerson({name, age}) {\n  // ...\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nconst person = { name: 'Fulan', age: 30 };\nconst { name, age } = person;\n\n\nfunction printPerson({ name, age }) {\n  // ...\n}\n```\n\n\n\n#### Array Literals\n\nJangan tambahkan spasi di antara tanda `[ ]` dan elemen di dalam array.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nconst numbers = [ 1, 2, 3 ];\nconst [ first, second ] = numbers;\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nconst numbers = [1, 2, 3];\nconst [first, second] = numbers;\n```\n\n\n\n#### Parentheses\n\nJangan tambahkan spasi di antara tanda `( )` dan expression yang ada di dalamnya.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nfunction sum( a, b ) {\n  // ...\n}\n\nconst value = 1 + ( 2 * 1 );\n\nif ( value === 1 ) {\n  // ...\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nfunction sum(a, b) {\n  // ...\n}\n\nconst value = 1 + (2 * 1);\n\nif (value === 1) {\n  // ...\n}\n```\n\n\n\n#### Control Statement\n\nBeri 1 spasi sebelum menggunakan tanda `()` pada *control statement* (contohnya `if`, `while`, `for`, dan lainnya). Namun, jangan berikan 1 spasi antara daftar argumen dan nama fungsi ketika mendeklarasikan regular function ataupun ketika memanggil sebuah fungsi.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nfunction fight () {\n  console.log('Swooosh!');\n}\n\nif(isJedi) {\n  fight ();\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nfunction figth() {\n  console.log('Swooosh!');\n}\n\nif (isJedi) {\n  fight();\n}\n```\n\n\n\n## Language Rules\n\n### Variable Declaration\n\n#### Prefer using `const`\n\nGunakan `const` ketika membuat sebuah variabel yang tidak ditetapkan ulang nilainya.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nlet a = 1;\nvar b = 2;\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nconst a = 1;\nconst b = 2;\n```\n\n\n\n#### Using `let`, avoid `var`\n\nJika sebuah variabel perlu ditetapkan ulang nilainya, gunakan `let` alih-alih `var`.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\nvar count = 1;\n\nif (true) {\n  count += 1;\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\nlet count = 1;\n\nif (true) {\n  count += 1;\n}\n```\n\nInformasi tambahan:\n\n- https://dev.to/mindninjax/stop-using-var-for-declaring-variables-2p3a\n\n### Semicolon\n\nDi balik layar, JavaScript akan menambahkan **titik koma**--*sesuai aturan yang berlaku*--sebagai tanda berakhirnya statement pada baris kode yang tidak diberikan semicolon. Aturan ini disebut sebagai *[Automatic Semicolon Insertion (ASI)](https://tc39.es/ecma262/#sec-automatic-semicolon-insertion)*. ASI mengandung beberapa perilaku yang esentrik dan membuat kode yang kita tulis rusak jika ia salah menginterpretasikan baris kode tersebut. ASI juga akan semakin rumit dipahami seiring bertambahnya fitur atau sintaks pada bahasa pemrograman JavaScript. Dengan menuliskan titik koma (semicolon) secara eksplisit tentu akan membantu untuk mencegah masalah-masalah yang ditimbulkan karena ASI.\n\nBerikut contoh yang **SALAH** ⛔ karena kode akan membangkitkan error.\n\n```javascript\n// will raise exception\nconst luke = {}\nconst leia = {}\n[luke, leia].forEach((jedi) =\u003e jedi.father = 'vader')\n\n\n// will raise exception\nconst reaction = \"No! That’s impossible!\"\n(async function meanwhileOnTheFalcon() {\n  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`\n  // ...\n}())\n\n\n// return undefined because ASI insert semicolon after `return`\nfunction foo() {\n  return\n    'search your feelings, you know it to be foo'\n}\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n``` javascript\n// good\nconst luke = {};\nconst leia = {};\n[luke, leia].forEach((jedi) =\u003e  jedi.father = 'vader');\n\n// good\nconst reaction = 'No! That’s impossible!';\n(async function meanwhileOnTheFalcon() {\n  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`\n  // ...\n}());\n\n// good\nfunction foo() {\n  return 'search your feelings, you know it to be foo';\n}\n```\n\nInformasi tambahan:\n\n-  https://stackoverflow.com/questions/7365172/semicolon-before-self-invoking-function/7365214#7365214\n\n### Strings\n\nAgar konsisten, selalu gunakan **kutip satu** `' '` untuk membuat nilai string.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\n// Bad\nconst name = \"Fulan\";\n\n// Bad\nconst address = `Bandung`;\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\n// Good\nconst name = 'Fulan';\nconst address = 'Bandung';\n```\n\nAnda boleh gunakan tanda lain untuk kasus-kasus tertentu, seperti:\n\nGunakan `\" \"` jika nilai string mengandung karakter '.\n\n```javascript\n// Bad\nconst movie = 'Howl\\'s Moving Castle';\n\n// Good\nconst movie = \"Howl's Moving Castle\";\n```\n\nGunakan ` `` ` jika membutuhkan JavaScript expression dalam membangun nilai string.\n\n```javascript\n// Bad\nfunction sayHi(name) {\n  return 'How are you, ' + name + '?';\n}\n\n// Good\nfunction sayHi(name) {\n  return `How are you, ${name}?`;\n}\n```\n\n\n\n### Arrow Function for Function Expressions\n\nFunction di JavaScript merupakan first-class citizen. Sama seperti nilai primitif, function dapat  berupa expression dan disimpan menjadi nilai variabel, argumen fungsi, atau nilai yang dikembalikan oleh fungsi. Ketika Anda membuat function expression (contohnya menetapkan fungsi callback), gunakanlah arrow function.\n\nBerikut contoh yang **SALAH** ⛔.\n\n```javascript\n[1, 2, 3].map(function(x) {\n  return x * 2;\n});\n```\n\nBerikut contoh yang **BENAR** ✅.\n\n```javascript\n[1, 2, 3].map((x) =\u003e x * 2);\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdicodingacademy%2Fjavascript-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdicodingacademy%2Fjavascript-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdicodingacademy%2Fjavascript-style-guide/lists"}