JavaScript - Konversi Tipe

Halo sana, para pengembang JavaScript yang sedang berkembang! Hari ini, kita akan melihat dunia yang menarik dari konversi tipe dalam JavaScript. Jangan khawatir jika Anda baru dalam programming; saya akan memandu Anda dalam perjalanan ini langkah demi langkah, seperti yang telah saya lakukan untuk ribuan siswa selama tahun-tahun mengajar saya. Jadi, ambil secangkir kopi (atau minuman kesukaan Anda), dan mari kita mulai!

Konversi Tipe dalam JavaScript

Sebelum kita masuk ke hal-hal teknis, mari kita pahami apa yang dimaksud dengan konversi tipe. Bayangkan Anda memiliki kotak Legos, tapi beberapa pieces terbuat dari kayu. Untuk membangun kastil Lego Anda, Anda perlu mengonversi pieces kayu itu menjadi blok Lego. Itu sebenarnya apa yang dimaksud dengan konversi tipe dalam JavaScript – mengubah data dari satu tipe ke tipe lainnya.

Dalam JavaScript, kita memiliki dua jenis konversi utama:

1. Konversi Implikit (juga disebut Type Coercion)
2. Konversi Eksplisit (juga disebut Type Casting)

mari kita jelajahi masing-masing ini secara rinci.

Konversi Tipe Implikit

Konversi implikit terjadi secara otomatis ketika JavaScript mencoba melakukan operasi pada nilai-niali tipe yang berbeda. Itu seperti JavaScript mengatakan, "Jangan khawatir, saya akan menangani ini!" dan mengonversi tipe di belakang layar.

Konversi ke String (Konversi implikit)

JavaScript sangat ramah saat mengonversi hal-hal ke string. Itu seperti teman yang bisa memulai percakapan dengan siapa saja!

let num = 5;
let str = "The number is: " + num;
console.log(str); // Output: "The number is: 5"
console.log(typeof str); // Output: "string"

Dalam contoh ini, JavaScript secara otomatis mengonversi angka 5 ke string saat kita menggunakan operator + dengan string. Itu seperti JavaScript menempatkan tanda kutip di sekitar angka itu untuk kita.

Konversi ke Number (Konversi implikit)

Ketika berbicara tentang angka, JavaScript mencoba melakukan hal-hal yang membuat sense, seperti guru matematika yang mencoba menguraikan tulisan kotor siswa.

let str = "10";
let num = str - 5;
console.log(num); // Output: 5
console.log(typeof num); // Output: "number"

Di sini, JavaScript melihat operator - dan berpikir, "Aha! Kita pasti melakukan matematika!" Jadi dia mengonversi string "10" ke angka 10 sebelum mengurangi 5.

Konversi ke Boolean (Konversi implikit)

JavaScript memiliki aturan sederhana untuk mengonversi ke boolean: nilai tertentu dianggap "benar" dan yang lain "salah". Itu seperti mengklasifikasikan siswa menjadi "hadir" dan "tidak hadir".

if ("Hello") {
console.log("This will run because 'Hello' is truthy");
}

if (0) {
console.log("This won't run because 0 is falsy");
}

Dalam contoh ini, JavaScript secara implikit mengonversi "Hello" ke true dan 0 ke false.

Null ke Number (Konversi implikit)

Null adalah pelanggan yang sulit. Saat dikonversi ke angka, dia menjadi 0. Itu seperti siswa yang tidak mengirimkan pekerjaan rumah tetapi masih mendapat nol poin.

let x = null;
console.log(+x); // Output: 0

Operator unary + mencoba mengonversi null ke angka, yang menghasilkan 0.

Undefined dengan Number dan Boolean (Konversi implikit)

Undefined adalah lebih sulit lagi. Itu seperti siswa yang tidak hanya tidak mengirimkan pekerjaan rumah tetapi bahkan tidak ada di daftar kelas!

let x;
console.log(+x); // Output: NaN (Bukan Angka)
console.log(Boolean(x)); // Output: false

Saat dikonversi ke angka, undefined menjadi NaN. Saat dikonversi ke boolean, dia menjadi false.

Konversi Tipe Eksplisit

Konversi eksplisit terjadi saat kita, para pemrogram, mengambil kontrol dan memberitahu JavaScript tepat apa tipe yang kita inginkan. Itu seperti menjadi direktur drama dan memberitahu aktor-aktor Anda tepat apa peran yang mereka perlu mainkan.

Konversi ke String (Konversi eksplisit)

Kami memiliki beberapa metode yang tersedia untuk konversi ke string:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Output: "123" string
console.log(str2, typeof str2); // Output: "123" string
console.log(str3, typeof str3); // Output: "123" string

Semua metode ini mencapai hasil yang sama, tetapi String() dan toString() lebih eksplisit tentang kehendak kita.

Konversi ke Number (Konversi eksplisit)

Untuk konversi ke angka, kita memiliki pilihan yang sama:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Output: 456 number
console.log(num2, typeof num2); // Output: 456 number
console.log(num3, typeof num3); // Output: 456 number

Number() dan parseInt() lebih jelas tentang apa yang kita coba lakukan, sedangkan unary + adalah singkatan yang digunakan oleh beberapa pengembang.

Konversi ke Boolean (Konversi eksplisit)

Konversi ke boolean adalah mudah:

let str = "Hello";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Output: true boolean
console.log(bool2, typeof bool2); // Output: true boolean

Fungsi Boolean() adalah jelas dan mudah dibaca. Double negation (!!) adalah singkatan yang digunakan oleh beberapa pengembang, tetapi mungkin membingungkan bagi pemula.

Konversi Date ke String/Number

Dates adalah kasus khusus dalam JavaScript. Mereka dapat dikonversi ke keduanya, string dan angka:

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Output: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Output: 1684154096000 (milidetik sejak 1 Januari 1970)

Mengonversi tanggal ke string memberikan kita format yang dapat dibaca manusia, sedangkan mengonversi ke angka memberikan kita milidetik sejak era Unix.

Tabel Konversi dalam JavaScript

Untuk mengingat semua metode konversi yang kita pelajari, ini adalah tabel praktis:

Nilai Asli	ke String	ke Number	ke Boolean
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Dan begitulah kita melintasi negeri konversi tipe dalam JavaScript. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba konsep ini. Siapa tahu? Anda mungkin bahkan menikmati proses mengubah blok Lego menjadi papan kayu dan kembali lagi!

Selamat coding, para master JavaScript masa depan!

Credits: Image by storyset