
Buat kalian yang suka ngoding mungkin udah gak asing lagi bukan dengan istilah "Hello World" di dalam bahasa pemrograman. Hello World sendiri sebenarnya adalah sebuah kalimat yang biasanya digunakan untuk mengilustrasikan bagaimana sebuah program dapat berjalan dan buat mastiin aja sih kalo program yang kita buat berjalan dengan baik atau enggak.

Biasanya program hello world dibuat oleh para programmer pemula yang baru pertama kali belajar ngoding. Hampir setiap programmer pernah mencoba membuat program hello world di masing-masing bahasa pemrograman yang mereka pelajari.

Berikut ini cara buat program hello world pertama kalian dalam bahasa JavaScript. Cukup buka browser kalian dan buka console dengan cara inspect element lalu masuk ke tab console. Setelah itu ketikan perintah berikut ini untuk mencetak kalimat "Hello World" ke console lalu tekan enter untuk menjalankannya

```javascript
console.log("Hello World!");
```

Hasilnya kurang lebih seperti ini

![heloworld](https://i.ibb.co.com/f2n3CGY/Screenshot-329.png)

Selamat program hello world pertama kamu sudah berhasil dibuat! Sekarang saatnya kamu untuk belajar lebih banyak lagi tentang pemrograman dan perdalam bahasa pemrograman yang kamu suka, semangat!


Apa Itu "Hello World" Dalam Bahasa Pemrograman?


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)