Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วิธีป้องกันการประกาศตัวแปรซ้ำใน JavaScript

เพื่อป้องกันการประกาศตัวแปรซ้ำใน 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 ต่อไฟล์