0Pricing
JavaScript Academy · Pelajaran

Variabel Lingkungan dan Pola Konfigurasi

Konfigurasikan aplikasi dengan nilai bawaan kecil, pembacaan env yang aman, dan objek eksplisit. Hindari membocorkan rahasia di peramban. Pola yang ramah pemula

Variabel Lingkungan dan Pola Konfigurasi adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Gambaran besar

Tujuan: Baca konfigurasi dengan aman di lingkungan apa pun.

  • Gunakan nilai bawaan terlebih dahulu
  • Deteksi fitur lingkungan; jangan berasumsi process.env tersedia
  • Uraikan string menjadi angka atau nilai benar-salah
  • Jangan sertakan rahasia dalam paket peramban
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 1

Pembacaan lingkungan yang aman

Gunakan deteksi fitur untuk membaca lingkungan hanya saat tersedia. Sediakan penyimpanan demo kecil untuk contoh yang dapat dijalankan.

// Read an env var if available; otherwise use a fallback
function readEnv(name, fallback) {
  // detect Node-like env
  const hasProcessEnv = typeof process !== "undefined" && process && process.env && typeof process.env === "object";
  if (hasProcessEnv && typeof process.env[name] === "string") {
    return process.env[name];
  }
  // demo fallback store so this snippet runs everywhere
  const DEMO = { API_URL: "https://api.example.com", NODE_ENV: "development" };
  if (typeof DEMO[name] === "string") return DEMO[name];
  return fallback;
}

console.log("API_URL:", readEnv("API_URL", "https://fallback.local"));
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 2

Konfigurasi dari bawaan+lingkungan

Gunakan nilai bawaan terlebih dahulu, lalu timpa dari lingkungan. Ubah string menjadi angka/nilai benar-salah secara eksplisit.

// Build config from defaults, then override via env when present
function buildConfig() {
  const defaults = {
    apiUrl: "https://api.example.com",
    port: 3000,
    debug: false
  };

  // env values are strings; parse to right types
  const apiUrl = readEnv("API_URL", defaults.apiUrl);
  const portStr = readEnv("PORT", String(defaults.port));
  const debugStr = readEnv("DEBUG", defaults.debug ? "1" : "0");

  return {
    apiUrl: apiUrl,
    port: Number.parseInt(portStr, 10),
    debug: debugStr === "1" || debugStr === "true"
  };
}

const cfg = buildConfig();
console.log("config:", cfg);
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 3

Parameter konfigurasi eksplisit

Teruskan objek konfigurasi kecil ke fungsi. Cara ini menghindari keadaan global dan kejutan yang tidak diinginkan.

// Pass config into functions explicitly (easier to test)
function startApp(config) {
  // use values directly
  const mode = config.debug ? "debug" : "prod";
  return "Starting " + mode + " at " + config.apiUrl + " on :" + config.port;
}

console.log(startApp(cfg));
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 4

Uraikan lingkungan dengan aman

Nilai lingkungan adalah string. Tulis pengurai kecil untuk nilai benar-salah dan bilangan bulat agar terhindar dari bug.

// Helpers to parse common env shapes safely
function toBool(s, fallback) {
  if (typeof s !== "string") return fallback;
  const v = s.trim().toLowerCase();
  if (v === "1" || v === "true" || v === "yes") return true;
  if (v === "0" || v === "false" || v === "no") return false;
  return fallback;
}

function toInt(s, fallback) {
  const n = Number.parseInt(s, 10);
  return Number.isFinite(n) ? n : fallback;
}

console.log("toBool:", toBool("yes", false), toBool("no", true));
console.log("toInt :", toInt("8080", 3000), toInt("oops", 3000));
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 5

Rahasia dan kode klien

Penting:

  • Jangan menaruh rahasia dalam JS sisi klien; pengguna dapat membacanya.
  • Simpan hanya tanda dan URL yang tidak berbahaya di peramban.
  • Di Node, baca rahasia sebenarnya dari process.env atau brankas rahasia.
  • Selalu sediakan konfigurasi bawaan untuk proses lokal.
Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 6

Kuis dasar lingkungan/konfigurasi

Pemeriksaan singkat: Pola konfigurasi yang portabel.

Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 7

Ringkasan

Ringkasan: Bangun konfigurasi dari defaults + pembacaan lingkungan yang aman, parse string, dan teruskan objek konfigurasi eksplisit. Jangan pernah mengirimkan rahasia dalam kode klien.

Variabel Lingkungan dan Pola Konfigurasi — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Variabel Lingkungan dan Pola Konfigurasi” gratis?

Ya — teks lengkap “Variabel Lingkungan dan Pola Konfigurasi” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Variabel Lingkungan dan Pola Konfigurasi”?

Konfigurasikan aplikasi dengan nilai bawaan kecil, pembacaan env yang aman, dan objek eksplisit. Hindari membocorkan rahasia di peramban. Pola yang ramah pemula Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 3.

Berapa lama pelajaran “Variabel Lingkungan dan Pola Konfigurasi” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Global, Ketersediaan fetch, API Berkas/Jaringan
  2. Keunikan Pemuat ESM, Perbedaan PATH/URL
  3. Variabel Lingkungan dan Pola Konfigurasi
← Kembali ke JavaScript Academy