เพื่อป้องกันการประกาศตัวแปรซ้ำใน JavaScript ให้ห่อการประกาศตัวแปรด้วย function expression (IIFE):
(function(){
var rank = 1;
}())
โค้ดข้างต้นป้องกันตัวแปรจากตัวแปรและฟังก์ชันอื่นๆ ไม่ส่งผลต่อ global variables ภายนอกฟังก์ชัน
ตัวแปร rank จะไม่มองเห็นได้ภายนอกฟังก์ชัน ดังนั้นโค้ดที่เกี่ยวกับตัวแปรควรอยู่ภายในฟังก์ชัน
วิธีสมัยใหม่ (ES6+)
// 1. Block scope ด้วย let/const (แนะนำ)
{
const rank = 1;
// rank ใช้ได้เฉพาะในบล็อกนี้
}
// rank ไม่เข้าถึงได้ที่นี่
// 2. ES Modules (มาตรฐานปัจจุบัน) - แต่ละไฟล์เป็น scope ของตัวเอง
// ไฟล์ A
export const rank = 1;
// ไฟล์ B
import { rank } from './A.js';
// 3. IIFE แบบ arrow function (สั้นกว่า)
(() => {
const rank = 1;
})();
สรุป
- เก่า: IIFE
(function(){ ... })() - ES6+: Block scope
{ ... }กับlet/const - สมัยใหม่: ES Modules (
import/export) — แยก scope ต่อไฟล์