Kenapa “Hello” + 1 + 2 Nggak Sama dengan 1 + 2 + “Hello” di JavaScript?

Baru-baru ini aku nemu perilaku JavaScript yang cukup aneh tapi menarik waktu lagi eksperimen dengan Javascript string concatenation — dan ini ngingetin aku kenapa dunia pemrograman kadang terasa kayak puzzle dengan logikanya sendiri.

Javascript string concatenation

Kalau kamu pernah nulis:

console.log('Hello' + 1 + 2);
console.log(1 + 2 + 'Hello');

Kamu mungkin bakal kaget lihat hasilnya yang beda banget:

Hello12
3Hello

Sekilas memang bikin bingung — dua-duanya punya elemen yang sama: satu string dan dua angka. Tapi JavaScript memperlakukan keduanya nggak sama karena ada dua hal yang main di sini: type coercion dan urutan operator.


Memahami Type Coercion di JavaScript

JavaScript secara otomatis bisa mengubah tipe data kalau dibutuhkan — proses ini disebut type coercion.
Operator + di JavaScript punya dua fungsi: bisa jadi penjumlahan atau penggabungan string, tergantung konteksnya.

Ketika JavaScript ketemu 'Hello' + 1, dia langsung ubah 1 jadi string → 'Hello1'.
Lalu 'Hello1' + 2 jadi 'Hello12'.

Tapi kalau angkanya ada di depan:
1 + 2 dihitung dulu sebagai angka → 3.
Lalu 3 + 'Hello' diubah jadi string → '3Hello'.

Jadi urutan eksekusi di JavaScript benar-benar mengubah hasilnya.

Kalau kamu mau baca penjelasan yang lebih dalam tentang perilaku ini, dokumentasi resmi JavaScript Type Conversion di Mozilla menjelaskannya dengan sangat jelas.


Ringkasan Cepat dalam Bentuk Visual

EkspresiLangkah Demi LangkahHasil
'Hello' + 1 + 2'Hello' + '1' + '2'"Hello12"
1 + 2 + 'Hello'(1 + 2) + 'Hello'"3Hello"

Ini bukan bug — ini cuma cara JavaScript membaca dan memproses ekspresi, dari kiri ke kanan.


Kenapa Ini Penting buat Coding di Dunia Nyata

Konversi otomatis kayak gini bisa bikin bug kecil yang susah dideteksi, terutama waktu kamu nggabungin angka dan teks secara dinamis — misalnya saat bikin tampilan UI atau ngerespons data dari API.

Javascript String Concatenation

Contohnya:

let score = 10;
console.log('Your score: ' + score + 5);

Kamu mungkin mikir hasilnya bakal Your score: 15,
tapi kenyataannya yang muncul adalah Your score: 105 😅

Cara yang lebih aman adalah dengan menambahkan tanda kurung untuk memperjelas maksudmu:

console.log('Your score: ' + (score + 5));

Insight Lain dan Fenomena Pemrograman Serupa

Menariknya, keanehan kecil kayak gini nggak cuma ada di JavaScript.

Waktu aku lagi eksplor database baru seperti FaunaDB dan SurrealDB, aku juga nemu desain yang terasa “nggak biasa” tapi jadi masuk akal setelah paham konteksnya.

Dan sama kayak waktu aku nulis tentang on-device AI dan model LLM lokal, hal ini ngingetin aku bahwa banyak inovasi — bahkan bug — muncul dari gimana sistem menafsirkan data secara berbeda dari ekspektasi kita.

Bahkan di tools seperti Excel, logika kecil kayak gini bisa ngasih efek besar. Aku pernah bahas soal conditional formatting otomatis di Excel, di mana hasilnya bisa berubah total cuma gara-gara formula ditulis dengan cara yang beda — sama persis kayak contoh JavaScript kita di atas.


Penutup

Awalnya aku kira kasus 'Hello' + 1 + 2 vs 1 + 2 + 'Hello' ini cuma sekadar meme khas JavaScript —
tapi setelah dilihat lebih dalam, ternyata ini mencerminkan salah satu prinsip utama bahasa ini: fleksibilitas yang datang dengan risiko tidak terduga.

Kalau kamu sedang belajar atau rutin nulis JavaScript, selalu biasakan pakai tanda kurung biar maksudmu jelas.
Kebiasaan kecil ini bisa nyelamatin kamu dari berjam-jam debugging yang nggak perlu. 😄

Related Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *