Dalam dunia pemrograman modern, Template Literal dan Modul JavaScript (sebelumnya sudah dibahas dalam tutorial modular JavaScript) menjadi dua fitur penting yang membuat penulisan kode lebih rapi, efisien, dan mudah dikelola. Jika dulu kita sering menggunakan tanda kutip biasa (' atau ") untuk membuat string dan harus repot menambahkan tanda + untuk menggabungkannya, kini JavaScript menyediakan cara yang jauh lebih elegan dengan Template Literal menggunakan tanda backtick (`).
Sementara itu, dalam proyek besar, penulisan seluruh kode dalam satu file sering kali membuat program sulit diatur. Di sinilah Modul JavaScript berperan penting. Dengan sistem import/export, kita bisa memisahkan logika menjadi beberapa file sehingga lebih mudah dibaca, diuji, dan dikembangkan. Kombinasi antara Template Literal dan Modul JavaScript menjadikan proses pengembangan web jauh lebih profesional dan efisien.
Apa Itu Template Literal?
Template Literal adalah fitur JavaScript modern (ES6) yang memungkinkan kita membuat string dinamis dengan lebih mudah.
Alih-alih menggunakan tanda petik ganda (") atau tunggal ('), kita memakai backtick (`).
Contoh Dasar Template Literal:
const nama = "Arvian";
const pesan = `Halo ${nama}, selamat belajar JavaScript!`;
console.log(pesan);
Penjelasan:
-
Gunakan backtick untuk membungkus string.
-
Gunakan
${variabel}untuk memasukkan nilai variabel langsung ke dalam teks.
Kita juga bisa menulis multi-line string tanpa \n:
const teks = ` Baris pertama Baris kedua Baris ketiga `; console.log(teks);
Keunggulan Template Literal
-
Mudah Digunakan — Tidak perlu lagi concatenation (
+) untuk menggabungkan string. -
Lebih Rapi — Cocok untuk membuat output HTML atau teks panjang.
-
Interaktif — Bisa langsung menampilkan ekspresi JavaScript di dalam string.
Contoh:
const harga = 5000;
const qty = 3;
const total = `Total belanja: Rp${harga * qty}`;
console.log(total);
Apa Itu Modul JavaScript?
Modul JavaScript adalah cara untuk membagi kode ke dalam beberapa file dan mengelolanya dengan sistem import dan export. Dengan modul, kode lebih mudah dibaca, diuji, dan digunakan ulang (reusable).
Struktur Dasar Modul
Misalnya kita memiliki dua file:
js/ ┣ hitung.js ┗ app.js
File hitung.js
export function tambah(a, b) {
return a + b;
}
export const PI = 3.14;
File app.js
import { tambah, PI } from './hitung.js';
console.log(`Hasil penjumlahan: ${tambah(10, 5)}`);
console.log(`Luas lingkaran: ${PI * 5 * 5}`);
Catatan penting:
Agar browser mengenali kode modular, gunakan:
<script type="module" src="app.js"></script>
Menggabungkan Template Literal dan Modul JavaScript
Kedua fitur ini sangat ideal jika digunakan bersama. Contoh membuat pesan hasil perhitungan dengan Template Literal dan fungsi dari Modul:
File mathUtil.js
export function kali(a, b) {
return a * b;
}
File main.js
import { kali } from './mathUtil.js';
const hasil = kali(7, 8);
console.log(`Hasil perkalian 7 x 8 adalah ${hasil}`);
Kelebihan kombinasi ini:
-
Template Literal membuat output mudah dibaca.
-
Modul JavaScript membuat fungsi dapat digunakan ulang di file lain.
Studi Kasus Mini: Modul Greeting
File greet.js
export default function greet(nama) {
return `Halo ${nama}, selamat datang di sistem modular JavaScript!`;
}
File main.js
import greet from './greet.js';
console.log(greet("Arvian"));
Output:
Halo Arvian, selamat datang di sistem modular JavaScript!
Dengan cara ini, kode menjadi modular, efisien, dan mudah dikembangkan tanpa menulis ulang fungsi berulang kali.
Kesimpulan
| Fitur | Fungsi Utama |
|---|---|
| Template Literal | Membuat string dinamis dengan backtick |
| Modul JavaScript | Mengatur kode dengan import/export |
| Kombinasi keduanya | Membuat aplikasi lebih rapi dan efisien |
Template Literal dan Modul JavaScript adalah dua fitur modern yang wajib dikuasai oleh setiap developer web. Dengan memanfaatkan keduanya, kamu bisa menulis kode yang lebih bersih, efisien, dan mudah di-maintain.