Style Guide

Beberapa contoh rules dikelompokkan berdasarkan tipenya untuk membantu Anda memahami tujuannya.

Code Styles

Tidak ada komentar yang inline

Komentar dilarang ditempatkan dalam baris kode yang sama. Ini dapat mempersulit pembacaan kode jika penulisan komentar diikuti dengan kode inti pada baris yang sama.

Contoh yang SALAH ⛔.

var foo = 4; // other thing

/* A block comment before code */ var b = 2;

function getRandomNumber(){
  return 4; // chosen by fair dice roll.
            // guaranteed to be random.
}

Contoh yang BENAR ✅.

// other thing
var foo = 4;

/* A block comment before code */
var b = 2;

function getRandomNumber(){
    // chosen by fair dice roll.
    // guaranteed to be random.\
    return 4;
}

Gunakan camelCase sebagai penamaan

Secara umum, semua nama variabel atau function harus menggunakan format camelCase. Biasanya setiap kata baru diawali dengan kapital untuk memudahkan pembaca, tetapi tidak untuk kata pertama.

Contoh yang SALAH ⛔.

const my_favorite_color = '#112C85';

function do_some_stuff() {
  // ...
}

const { from_json } = JSON.parse('{}');

Contoh yang BENAR ✅.

const myFavoriteColor = '#112C85';

function doSomeStuff() {
  // ...
}

const { from_json: fromJson } = JSON.parse('{}');

Language Rules

Semicolon

Di 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).

Berikut contoh yang SALAH ⛔.

// will raise exception
const luke = {}
const leia = {}
[luke, leia].forEach((jedi) => jedi.father = 'vader')

// will raise exception
const reaction = "No! That’s impossible!"
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}())

// return undefined because ASI insert semicolon after `return`
function foo() {
  return
    'search your feelings, you know it to be foo'
}

Berikut contoh yang BENAR ✅.

// good
const luke = {};
const leia = {};
[luke, leia].forEach((jedi) =>  jedi.father = 'vader');

// good
const reaction = 'No! That’s impossible!';
(async function meanwhileOnTheFalcon() {
  // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
  // ...
}());

// good
function foo() {
  return 'search your feelings, you know it to be foo';
}

Informasi tambahan:

• Semicolon before self-invoking function? Dari Stack Overflow.

Utamakan const

Utamakan const untuk membuat variabel yang tidak ditetapkan ulang nilainya (reinitialize).

Berikut contoh yang SALAH ⛔.

let a = 1;
var b = 2;

Berikut contoh yang BENAR ✅.

const a = 1;
const b = 2;

Selalu gunakan kurung kurawal (curly braces)

Kehadiran curly braces tetap dibutuhkan dalam kondisi apa pun. Contohnya, ada kondisi bahwa percabangan dapat menganggap curly braces tidak wajib digunakan meskipun hanya ada satu statement. Kasus tersebut semestinya tidak menghilangkan penggunaan curly braces.

Berikut contoh yang SALAH ⛔.

let increment = true;
let i = 0;

if (increment) i++;

Berikut contoh yang BENAR ✅.

let increment = true;
let i = 0;

if (increment) {
    i++;
}

Tidak ada assignment yang berlipat ganda

Melakukan rangkaian assignment pada variabel dapat mempersulit bacaan dan menghasilkan output yang tidak sesuai.

Berikut contoh yang SALAH ⛔.

let a = b = c = 5;

const foo = bar = "baz";

a = b = "quux";

Berikut contoh yang BENAR ✅.

let a = 5;
let b = 5;
let c = 5;

const foo = "baz";
const bar = "baz";

a = "quux";
b = "quux";