
Typing atau menentukan tipe data, suka atau tidak fitur ini memiliki banyak keuntungan seperti pengalaman development yang lebih baik (melalui intellisense auto-complete), dokumentasi kode yang lebih baik, dan memakan waktu yang lebih sedikit pada error. Manfaatnya jauh lebih besar daripada biayanya, jadi kenapa beberapa orang masih menghindari menggunakannya? Alasannya cuma satu yaitu karena **Typescript**. Kamu perlu menyiapkannya terlebih dahulu dan memastikan tools yang kamu gunakan benar-benar berjalan seperti yang diharapkan yang mana menambah sebuah layer frustasi pada proyek manapun.

Bagaimana jika native typing mungkin saja akan diadopsi di Javascript? Seperti mendapatkan sebuah hadiah yang luar biasa bukan.

<br>

### Proposal
TC39 adalah sebuah komisi yang bertanggung jawab atas spesifikasi Javascript. Mereka membantu untuk mempertahankan dan mengembangkan definisi Javascript. Kalau kamu penasaran kamu bisa membaca [artikel ini](https://dev.to/christopherkade/the-future-of-javascript-features-to-keep-an-eye-on-3d0h). Mereka baru saja memindahkan proposal Anotasi Tipe ke stage 1 (dari 4 stage), yang berarti saatnya untuk berspekulasi secara luas tentang dampak dan implikasi dari fitur tersebut!

>**Note:** Hal ini tidak akan menandakan berakhirnya TypeScript dengan cara apa pun, ini hanya akan memungkinkan kode Javascript yang lebih clean dan lebih andal untuk proyek yang tidak berencana menggunakan TypeScript atau yang ingin menggunakan keduanya secara bersamaan.

<br>

### Akan Seperti Apa Penampakan dari Native Typing Pada Javascript Jika Proposalnya Lolos?
Penampakannya akan sangat mirip seperti yang biasa kita gunakan pada Typescript dan Flow:

```javascript
// Kedua parameter bertipe data number dan method ini juga mereturn number
function add(a: number, b: number): number {
  return a + b;
}
```

Anotasi-anotasi ini tidak akan menghentikanmu dari mempassing sebuah string atau tipe variabel lain manapun sebagai parameter. Mereka akan diabaikan pada runtime dan disana fungsinya hanya sebagai guideline yang bisa digunakan oleh type checker pihak ketiga seperti IDE. Argumen untuk menentukan tipe data yang ketat mendapat tempatnya dalam diskusi ini. Dalam proposalnya saat ini, jenis ini hanyalah jenis anotasi, yang sudah kita miliki berkat JSDoc. Jadi pertanyaannya tetap: kenapa?

<br>

### Lalu Apa Gunanya?
Kita ada dalam situasi yang aneh. Javascript adalah satu-satunya bahasa yang membuat kita menulis dalam bahasa lain seperti Typescript untuk kemudian ditranspilasikan ke bahasa Javascript itu sendiri. Lapisan-lapisan ini menambah kerumitan dari proyek apapun, jadi semakin banyak tools yang ditambahkan pada default tool kita maka semakin baik.

Kebutuhan akan Typescript menciptakan bentuk monopoli pada tools yang tersedia saat ini, dimana masing-masing dan setiap orang perlu berevolusi dengan Typescript agar tidak tertinggal. [The State of the Octoverse 2022](https://octoverse.github.com/2022/top-programming-languages) menunjukkan popularitas TypeScript yang mengesankan pada tahun 2022, yang berarti kebutuhan untuk berevolusi menjadi hampir wajib untuk linter, bundler, dll.

Dengan adanya fitur ini yang sudah dibundel di dalam native Javascript akan membuatnya menjadi paket yang lebih lengkap dan membantu kita memperlambat pembengkakan tools yang saat ini sedang kita hadapi.

Jadi bagaimana pendapat kamu tentang hal ini baguskah atau biasa saja? Apakah kamu akan jadi orang yang pertama mencobanya setelah dirilis atau tetap setia dengan Typescript? Yuk diskusikan di kolom komentar!

Jika kamu suka artikel ini jangan lupa untuk share ke teman-temanmu ya! 😉

Sumber: [Dev.to](https://dev.to/christopherkade/goodbye-typescript-hello-native-typing-for-javascript-3ee1)

Selamat Tinggal Typescript, Halo Native Typing Javascript!


Kalau kamu lihat berbagai aplikasi React, kamu pasti tahu bagaimana caranya untuk merender bagian-bagian dari sebuah kompenen secara kondisional berdasarkan props dan state. Biarpun ada banyak cara untuk melakukan conditional rendering, artikel ini akan fokus membahas operator `&&` pada Javascript saja. Alasan utama untuk penekanan ini adalah operator `&&` sering kali memunculkan bug pada UI, yang mana sebenarnya bisa dihindari dengan mudah dan juga hal ini tidak banyak yang membahasnya.

<br>

### Cara "&&" Bekerja
Sebuah cara klasik dari penggunaan operator `&&` di React akan tampak seperti:
```jsx
function MyComponent({ condition }) {
  return (
    <div>
      <h1>Title</h1>
      {condition && <ConditionalComponent />}
    </div>
  );
}
```

Penjelasan:
- Jika `kondisi` adalah truthy value, maka `<ConditionalComponent />` akan dirender
- Jika `kondisi` adalah falsy value, maka `<ConditionalComponent />` tidak akan dirender

Kenapa demikian? Hal ini bukan spesifik di React saja tapi merupakan sebuah perilaku dari Javascript dan bahasa-bahasa pemrograman lainnya yang disebut dengan **_short-circuit evaluation_**. Yaitu jika operan pertama (`kondisi`) adalah falsy, operator AND (&&) akan berhenti dan tidak mengevaluasi operan kedua (`<ConditionalComponent />`).

Kamu dapat mencobanya di browser dengan menjalankan potongan kode berikut di console:
```javascript
// Ini akan menampilkan sebuah alert box.
true && alert('Hello');
// Ini tidak akan terjadi apa-apa
false && alert('Not hello');
```

<br>

### Kenapa Tidak Boleh Memakai "&&"?
Sintaks pendek `&&` sering lebih disukai dan memang juga berfungsi. Tapi hanya karena kamu bisa memakainya bukan berarti kamu harus memakainya juga.

Di kasus kita yang disebutkan diatas, jika `kondisi` bernilai `true` atau `false`, kamu akan mendapatkan hasil yang kamu harapkan — `<ConditionalComponent />` masing-masing akan dirender atau tidak. Semua berjalan baik sejauh ini. Namun, jika kondisi tidak mengevaluasi ke boolean, hal ini justru dapat menyebabkan masalah.

**Contohnya:**

- Jika `kondisi` adalah 0, 0 akan ditampilkan di UI
- Jika `kondisi` adalah `undefined`, kamu akan mendapatkan error: "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

<br>

### Lalu Apa Yang Seharusnya Digunakan Selain "&&"?
Untuk menghindari sesuatu yang tidak kamu inginkan di UI, misalnya nilai 0 yang bisa merusak layout, kamu bisa menggunakan ternary operator sebagai gantinya

```jsx
condition ? <ConditionalComponent /> : null
```

<br>

### Kesimpulan
Untuk mencegah bug UI yang dapat dihindari, gunakanlah operator ternary Javascript untuk melakukan conditional rendering komponen React daripada menggunakan logic operator AND (&&). Ini adalah mantra yang sederhana tapi tidak bisa dihancurkan 🧙‍♂️
```jsx
// 🔴 Jelek
condition && <ConditionalComponent />
// 🟢 Bagus
condition ? <ConditionalComponent /> : null
```

Jadi, apakah kamu masih sering menggunakan operator `&&` daripada ternary operator? Coba kasih tahu di kolom komentar dibawah!

Terimakasih sudah membaca, jangan lupa share juga ke teman-teman kamu kalau kamu suka artikel ini.

<br>

Sumber: [Medium](https://medium.com/geekculture/stop-using-for-conditional-rendering-in-react-a0f7b96200f8)

Berhenti Pakai '&&' Untuk Conditional Rendering Di React


Javascript adalah sebuah bahasa pemrograman yang menakjubkan, tapi meski begitu menulis clean code di javascript bisa menjadi tantangan tersendiri bahkan untuk para programmer yang sudah berpengalaman sekalipun.

Seperti apa sih clean code di Javascript? Kodenya haruslah:

1. Gampang dibaca
2. Gampang di debug
3. Efisien dan berperforma tinggi

Berikut ini adalah beberapa tools populer dan trik-trik yang dapat kamu gunakan agar kualitas kode javascript yang kamu tulis lebih kece lagi:

### 1. Gunakan Try Catch Pada Semua API Request dan JSON methods

Banyak hal yang bisa salah saat membuat request ke api untuk mengambil data, jadi menangani skenario ini adalah suatu keharusan. Saat menangani JSON tidak secara otomatis kita bisa begitu saja mempercayai apa yang diberikan, cobalah untuk membuat kode kamu menjadi lebih kuat dengan menangani kemungkinan inkonsistensi yang mungkin saja terjadi.

```javascript
try {
  // Membuat request ke API dan manipulasi JSON
} catch (error) {
  // Handle error
}
```

<br>

### 2. Gunakan Linter (ESLint)

Linter adalah sebuah alat analisis kode statis yang akan memeriksa kesalahan program dan gaya penulisan berdasarkan seperangkat aturan dan konfigurasi yang telah ditentukan. Singkatnya itu akan meningkatkan performa Javascript/TypeScript dan membantu membuatnya lebih konsisten secara penulisan.

<br>

### 3. Lacak Masalah-masalah Javascript di Editormu

Komponen utama untuk menjaga codebase Javascript kamu agar tetap bersih adalah memudahkan untuk melacak dan melihat masalah dalam kode itu sendiri. Melacak masalah codebase di editor memungkinkan para engineer untuk:

- Mendapatkan visibilitas penuh tentang masalah yang lebih besar seperti tech debt
- Melihat konteks untuk setiap masalah pada codebase
- Mengurangi context switching
- Menyelesaikan tech debt secara berkelanjutan

Kamu dapat menggunakan berbagai tools untuk melacak technical debt tapi cara tercepat dan termudah untuk memulai adala dengan menggunakan ekstensi Stepsize gratis untuk VSCode atau JetBrains yang terintegrasi dengan Jira, Linear, Asana dan project management tools lainnya.

<br>

### 4. Gunakan String Template

String template akan memungkinkan kamu untuk memasukkan nilai ke dalam string sambil mempertahankan format dan kodenya, jauh lebih ramah pembaca daripada melakukan aritmatika string.

```javascript
// Hindari ini
const headerText = "Halo " + user.name + " ✌️. Selamat datang di " + workspace.name;

// Lakukan ini
const headerText = `Halo ${user.name} ✌️. Selamat datang di ${workspace.name}`;
```

<br>

### 5. Gunakan Regex Saat Perlu Mencari String

Meskipun regex dapat terlihat esoterik dari luar, tapi ini adalah string parsing tool yang powerful dan memungkinkanmu untuk membuat pola yang kompleks untuk menjelaskan berbagai skenario pencocokan string yang sulit.

<br>

### 6. Gunakan Optional Chaining

Berhentilah memiliki konjungsi logis yang panjang dan sederhanakan kodemu dengan optional chaining.

```javascript
// Hindari ini
if(data && data.payload && data.payload.workspace.name === 'default') {
  // Lakukan sesuatu...
}

// Lakukan ini
if(data?.payload?.workspace.name === 'default') {
  // Lakukan sesuatu...
}
```

<br>

### 7. Hindari Bersarang (Nesting)

Bersarang (nesting) adalah cara yang pasti untuk meningkatkan kompleksitas kode dan membuatnya lebih sulit untuk dibaca dan dipahami. Pertimbangkan refactoring jika kedalamannya lebih dari dua level, dengan memiliki kondisi pengembalian level root, blok yang lebih pendek, dan abstraksi logika bersarang ke functionnya sendiri.

<br>

### 8. Komentari Semua Kode Atipikal, Tapi Jangan Biarkan Itu Menggantikan Keterbacaan Kode

Akan ada masanya saat kamu harus menghandle skenario yang tidak umum dimana tidak adanya konvensi yang jelas. Mengomentari kode seperti ini untuk membantu menjelaskan apa yang dilakukannya dan konteks yang sedang dipertimbangkan akan sangat membantu programmer lain untuk memahaminya juga menjadi pengingat untuk diri kamu sendiri ketika kamu kembali melihat kode tersebut di masa yang akan datang. Tapi cara ini tidak boleh digunakan sebagai cara utama karena kita malas memikirkan cara penulisan kode yang mudah dibaca sejak awal!

Itulah tips yang dapat kamu terapkan dalam menulis kode di Javascript agar lebih clean dan mudah dibaca, karena programmer yang baik adalah programmer yang dapat menulis kode yang bukan hanya bisa dibaca mesin tapi juga dapat dibaca manusia.

Terima kasih sudah membaca, jangan lupa share ke teman-temanmu juga ya! :)

<br>

Sumber: [Dev.to](https://dev.to/alexomeyer/8-must-know-tips-for-writing-clean-code-with-javascript-i4)
