Cách định nghĩa biến toàn cục (global variable) trong hàm JavaScript

Trong JavaScript, biến toàn cục (global variable) là biến có thể truy cập từ bất kỳ đâu trong chương trình. Có 2 cách chính để tạo biến toàn cục từ bên trong hàm:

Cách 1: Khai báo ở phạm vi toàn cục (Global Scope)

Đặt var, let, hoặc const **ngoài** mọi hàm:

<script>
  // Phạm vi toàn cục (global scope)
  var myGlobalVariable;        // var: function-scoped, hoisted, gán vào window
  let myGlobalLet = "hello";   // let: block-scoped, không gán vào window
  const MY_CONST = 42;         // const: hằng số toàn cục

  function display() {
    // Truy cập được myGlobalVariable, myGlobalLet, MY_CONST
    console.log(myGlobalVariable);
  }
</script>

Cách 2: Gán thuộc tính cho object window (trong hàm)

Trong môi trường trình duyệt, window là global object. Gán trực tiếp vào window tạo biến toàn cục:

<script>
  function display() {
    // Tạo biến toàn cục từ trong hàm
    window.myGlobalVariable = "Giá trị nào đó";
    // Hoặc dùng this (nếu this === window, ví dụ: gọi trực tiếp display())
    this.anotherGlobal = 123;
  }

  display(); // Gọi hàm để tạo biến
  console.log(window.myGlobalVariable); // "Giá trị nào đó"
  console.log(anotherGlobal); // 123 (truy cập trực tiếp)
</script>

So sánh các cách khai báo

⚠️ Cảnh báo

• Ô nhiễm global scope: Dễ gây xung đột tên biến, khó debug, bảo trì.
• Module pattern / IIFE / ES Modules: Hiện đại nên dùng module (import/export) để đóng gói, tránh global.
• Strict mode: "use strict" ngăn gán vào window ngầm (gán biến không khai báo sẽ báo lỗi).

Best Practice hiện đại

// utils.js (module)
export const API_URL = "https://api.example.com";
export let currentUser = null;

// main.js
import { API_URL, currentUser } from './utils.js';
// Sử dụng an toàn, không ô nhiễm global