Tuple

Analogi: Koordinat di Peta

Untuk menunjukkan lokasi di peta, kamu butuh dua angka: lintang dan bujur, dalam urutan itu. (6.2, 106.8) artinya Jakarta. Kalau urutannya dibalik atau angkanya jadi tiga, artinya berubah total atau tidak valid. Tuple seperti koordinat: jumlah elemen tetap, tipe tiap posisi tetap, dan urutannya bermakna.

Array biasa seperti daftar belanja: isinya boleh nambah, boleh campur, urutan tidak penting. Tuple seperti formulir resmi: kolom 1 selalu nama, kolom 2 selalu tanggal lahir. Beda kebutuhan, beda alat.

Kenapa Tuple Ada?

JavaScript tidak punya konsep "array dengan panjang tetap". Fungsi yang butuh mengembalikan dua nilai terkait biasanya memakai array biasa atau object. Masalahnya: array biasa kehilangan informasi penting. number[] tidak memberi tahu apakah isinya 2 elemen atau 200, dan tidak memberi tahu tipe tiap posisi.

Tuple menutup lubang itu: [number, number] berarti "tepat dua angka, tidak lebih tidak kurang". Informasi ini dibaca compiler dan diteruskan ke semua yang memakai nilainya, misalnya saat destructuring.

Contoh 1: Tuple Paling Sederhana

let koordinat: [number, number] = [6.2, 106.8];

// Jumlah elemen dikunci:
koordinat = [6.2, 106.8, 0];
// Error: Type '[number, number, number]' is not assignable to type '[number, number]'.

// Tipe tiap posisi dikunci:
koordinat[0] = "selatan";
// Error: Type 'string' is not assignable to type 'number'.

Dua aturan itu (panjang tetap + tipe per posisi) adalah seluruh esensi tuple. Sederhana, tapi menghilangkan satu kelas bug: data yang "bentuknya mirip tapi tidak sama".

Contoh 2: Fungsi Mengembalikan Dua Nilai

Kasus paling populer untuk tuple: fungsi yang mengembalikan sepasang nilai terkait.

function bagiHasil(bagi: number, pembagi: number): [number, number] {
  return [Math.floor(bagi / pembagi), bagi % pembagi];
}

const [hasil, sisa] = bagiHasil(10, 3);
console.log(`Hasil: ${hasil}, Sisa: ${sisa}`); // Hasil: 3, Sisa: 1

// Destructuring otomatis dapat tipe benar per posisi:
const [h, s] = bagiHasil(7, 2);
// h: number, s: number, tanpa anotasi tambahan

// Tuple berlabel (TS 4.0+) bikin maksud tiap posisi jelas:
type HasilBagi = [hasil: number, sisa: number];
function bagi2(a: number, b: number): HasilBagi {
  return [Math.floor(a / b), a % b];
}

Tanpa tuple, return type-nya jadi number[] dan kamu kehilangan info "pasti 2 elemen". Dengan tuple, pemanggil langsung tahu struktur hasilnya, dan label membuat kode dokumentatif sendiri.

Contoh Nyata: Error Compiler Beraksi

Kesalahan umum: mencampur urutan posisi.

// [nama: string, umur: number]
let pengguna: [string, number] = ["Budi", 17];

// Tertukar:
pengguna = [17, "Budi"];

Di array biasa, (17, "Budi") vs ("Budi", 17) tidak ada yang protes dan bug urutan baru ketahuan saat data ditampilkan salah ke user. Di tuple, posisi punya makna dan compiler menjaganya.

Kesalahan Umum Pemula

1. Memakai array biasa untuk data berpasangan

// SALAH: informasi "tepat 2 elemen" hilang
function bagiHasil(a: number, b: number): number[] {
  return [Math.floor(a / b), a % b];
}
const hasil = bagiHasil(10, 3);
console.log(hasil[5]); // undefined, tidak ada yang protes

// BENAR: tuple mengunci panjang dan tipe posisi
function bagiHasil(a: number, b: number): [number, number] {
  return [Math.floor(a / b), a % b];
}

2. Mengira push ke tuple akan dicek panjangnya

// SALAH: mengira tuple anti-push
const t: [string, number] = ["Budi", 17];
t.push(99); // LOLOS! push tidak dicek panjangnya (keterbatasan TS)

// BENAR: sadari celahnya. Kalau panjang harus saklek,
// hindari push pada tuple atau bungkus dengan readonly:
const t2: readonly [string, number] = ["Budi", 17];
// t2.push(99); // Error: Property 'push' does not exist

3. Tuple terlalu panjang sampai tidak terbaca

// SALAH: tuple 6 elemen, tidak ada yang ingat posisi 4 itu apa
let data: [string, number, boolean, string, number, string] = ["a", 1, true, "b", 2, "c"];

// BENAR: lebih dari 3-4 posisi, pakai object ber-nama saja
type DataPengguna = {
  nama: string;
  umur: number;
  aktif: boolean;
};
let data: DataPengguna = { nama: "a", umur: 1, aktif: true };
// Aturan praktis: tuple untuk 2-3 nilai terkait, object untuk sisanya.

Catatan teknis: Label tuple ([nama: string, umur: number]) hanya dokumentasi, tidak mengubah perilaku runtime atau pengecekan. Tapi ia membuat error message dan tooltip editor jauh lebih mudah dibaca, jadi biasakan memakainya untuk tuple yang dipakai lintas fungsi.