Teknik 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)

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

Shorthand

Copy
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

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

Shorthand

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

3. If

Longhand

Copy
1if(isDino === true)

Shorthand

Copy
1if(isDino)

4. Object Property

Longhand

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

Shorthand

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

5. Object Values

Longhand

Copy
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

Copy
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

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

Shorthand

Copy
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.