Search by

    Terakhir diperbaharui: Oct 24, 2020

    JavaScript Shorthand & Style Guide

    Teknik Shorthand

    shorthand

    Teknik Shorthand adalah teknik menulis dalam versi lain yang lebih ringkas.

    Beberapa teknik Shorthand pada JavaScript yang bisa digunakan:

    1. Ternary Operator

    Longhand (versi Panjang)

    1let color = 'red';
    2let dinoName;
    3
    4if (color === 'red') {
    5 dinoName = 't-rex';
    6} else {
    7 dinoName = 'brachio';
    8}

    Shorthand

    1let color = 'red';
    2
    3const dinoName = color === 'red' ? 't-rex' : 'brachio';

    2. Short-circuit Evaluation

    Short-circuit Evaluation sering digunakan untuk memvalidasi sebuah value sebelum disimpan ke dalam variable.

    Longhand

    1let redDino = 't-rex';
    2let blackDino;
    3
    4if (redDino !== null || redDino !== undefined || redDino !== '') {
    5 blackDino = redDino;
    6} else {
    7 blackDino = 'allo';
    8}

    Shorthand

    1let redDino = 't-rex';
    2
    3const blackDino = redDino || 'allo';

    3. If

    Longhand

    1if(isDino === true)

    Shorthand

    1if(isDino)

    4. Object Property

    Longhand

    1const redDino = 't-rex';
    2const blueDino = 'brachio';
    3
    4const dino = {
    5 redDino: redDino,
    6 blueDino: blueDino
    7};

    Shorthand

    1const redDino = 't-rex';
    2const blueDino = 'brachio';
    3
    4const dino = {
    5 redDino,
    6 blueDino
    7};

    5. Object Values

    Longhand

    1const dino = {
    2 color: 'red',
    3 height: '1.5 m',
    4 weight: 100
    5};
    6
    7const array = [ dino.color, dino.height, dino.weight ];
    8
    9// output [ 'red', '1.5 m', 100 ]

    Shorthand

    1const dino = {
    2 color: 'red',
    3 height: '1.5 m',
    4 weight: 100
    5};
    6
    7const array = Object.values(dino);
    8
    9// output [ 'red', '1.5 m', 100 ]

    6. Convert string to Number

    Longhand

    1const dinoWeight = Number('100');
    2const dinoHeight = parseFloat('1.5');

    Shorthand

    1const dinoWeight = +'100';
    2const dinoHeight = +'1.5';

    7. Destructuring

    Lihat Destructuring.

    JavaScript Style Guide

    Dalam menulis code di JavaScript banyak sekali pilihan atau bentuk yang bisa digunakan.

    Contohnya:

    • Dalam membuat string kita bisa memilih antara menggunakan double quote atau single quote
    • Bebas memilih antara menambahkan semicolon (;) di akhir baris atau tidak menggunakannya sama sekali
    • Dalam membuat function kita bisa menggunakan function declaration, function expression atau arrow function
    • dll

    Mungkin timbul pertanyaan, bagaimana code kita bisa konsisten jika ada terlalu banyak pilihan bentuk dimana antara satu bentuk dengan bentuk yang lain terkadang tidak memiliki perbedaan yang berarti?

    Apalagi jika harus bekerja dalam sebuah team dimana setiap developer mungkin memiliki style code masing-masing.

    Untuk mengatasi masalah ini kita bisa menggunakan JavaScript Style Guide / JavaScript Standard yaitu standard yang bisa digunakan dalam menulis code JavaScript.

    Sehingga code menjadi lebih konsisten serta tidak perlu menghabiskan banyak waktu untuk memilih.

    Beberapa JavaScript Style Guide yang sering dipakai:

    1. Airbnb JavaScript Style Guide
    2. Google JavaScript Style Guide
    3. Standard JavaScript Style Guide

    Kita bisa memilih salah satu dari JavaScript Style Guide yang ada dan menggunakannya mulai dari awal hingga akhir pembuatan aplikasi.

    Linter

    Selain menerapkan JavaScript Style Guide kita mungkin juga membutuhkan Linter.

    Linter adalah tool untuk menganalisa code untuk menemukan error, bug, typo atau code smell serta memberikan info bagaimana menghindari atau memperbaiki error yang ditemukan.

    Salah satu linter yang umum digunakan adalah ESLint.

    Bahkan kita bisa menggabungkan antara ESLint dengan JavaScript Style Guide, sehingga ESLint akan menganalisa code sesuai standard dari JavaScript Style Guide yang digunakan.

    Langkah konfigurasi keduanya akan dibahas pada bagian Membuat Aplikasi.

    linter style guide