JavaScript Location object menyediakan akses ke komponen URL saat ini. Orang dapat menganggap objek ini sebagai jendela baca-saja ke lokasi saat ini.
Ada dua properti objek Location yang sering bikin bingung yaiut : host dan hostname.
Location.host
Properti host mengembalikan nama host, nomor port, dan protokol URL saat ini. Misalnya, jika URL saat ini adalah "http://example.com:8080/path/to/page.html", nilai host akan menjadi "example.com:8080".
Keuntungan menggunakan location.host
Ada juga beberapa keuntungan menggunakan location.host dibandingkan location.hostname.
- Pertama, lebih spesifik. Jika Anda memerlukan nomor port atau protokol, Anda dapat yakin bahwa itu akan dikembalikan oleh properti host.
- Kedua, lebih ringkas. Jika Anda hanya memerlukan nama host, Anda dapat menggunakan properti nama host yang lebih pendek. Tetapi jika Anda memerlukan nomor port atau protokol juga, Anda dapat menggunakan properti host dan mendapatkan semua informasi sekaligus.
- Ketiga, lebih tahan masa depan. Jika komponen URL baru ditambahkan, kemungkinan komponen tersebut akan disertakan dalam properti host. Ini belum tentu demikian halnya dengan properti nama host.
location.hostname
Properti hostname, di sisi lain, hanya mengembalikan bagian nama host dari URL saat ini. Misalnya, jika URL saat ini adalah "http://example.com:8080/path/to/page.html", nilai nama host akan menjadi "example.com".
Keuntungan menggunakan location.hostname
Ada beberapa keuntungan menggunakan location.hostname dibandingkan location.host.
- Pertama, lebih mudah dibaca. Saat Anda melihat URL, Anda umumnya lebih tertarik pada nama host daripada nomor port atau protokol.
- Kedua, lebih konsisten. Nama host adalah bagian yang diperlukan dari URL, sedangkan nomor port dan protokol bersifat opsional. Ini berarti bahwa tidak semua URL akan memiliki properti host, tetapi semuanya akan memiliki nama host.
- Ketiga, lebih tangguh. Jika Anda mengubah nomor port atau protokol URL, nama host akan tetap sama. Ini tidak terjadi dengan properti host.
Kapan menggunakan masing-masing?
Secara umum, Anda harus menggunakan location.hostname kecuali Anda secara khusus memerlukan nomor port atau protokol.
Alasannya adalah bahwa nama host adalah bagian "dapat dibaca manusia" dari URL, sedangkan properti host juga menyertakan nomor port dan protokol. Sebagian besar waktu, potongan informasi tambahan ini tidak diperlukan.
Namun, ada beberapa pengecualian. Salah satu contohnya adalah jika Anda perlu membuat URL baru menggunakan URL saat ini sebagai basis. Dalam hal ini, Anda perlu menggunakan location.host untuk mempertahankan nomor port dan protokol.
Pengecualian lain adalah jika Anda menggunakan penyingkat URL. Dalam hal ini, Anda ingin menggunakan location.host untuk mempertahankan nama host URL asli.
Perbedaan antara location.host dan location.hostname di JavaScript
Tabel berikut menyoroti perbedaan utama antara location.host dan location.hostname di JavaScript -
| Dasar perbandingan | location.host | location.hostname |
|---|---|---|
| Definisi | Properti host mengembalikan nama host, nomor port, dan protokol URL saat ini | Properti nama host, di sisi lain, hanya mengembalikan bagian nama host dari URL saat ini |
| Contoh | Jika URL saat ini adalah "http://example.com:8080/path/to /page.html", nilai host akan menjadi "example.com:8080 | Jika URL saat ini adalah "http://example.com:8080/path /to/page.html", nilai nama host akan menjadi "example.com". |
| Kapan bisa digunakan? | Anda harus menggunakan location.host jika Anda secara khusus memerlukan nomor port atau protokol. | Anda harus menggunakan location.hostname kecuali Anda secara khusus memerlukan nomor port atau protokol. |
| Readability | Properti host juga menyertakan nomor port dan protokol sehingga kurang mudah dibaca. Properti host juga menyertakan nomor port dan protokol sehingga kurang mudah dibaca. | Nama host adalah bagian "dapat dibaca manusia" dari URL. |
Kesimpulan
Dalam kebanyakan kasus, Anda harus menggunakan location.hostname di atas location.host. Ini lebih mudah dibaca, lebih konsisten, dan lebih tangguh. Namun, ada beberapa pengecualian, seperti saat Anda perlu membuat URL baru atau saat Anda menggunakan penyingkat URL.