เทคนิค JavaScript 2 : สร้าง scope อย่างมีขอบเขต

การสร้าง scope ใน JavaScript มี วิธีเดียวคือ สร้าง function

scope คือ ขอบเขต
การสร้าง scope คือการสร้างขอบเขต
ขอบเขตทำให้ code นอก scope ไม่เห็นตัวแปรใน scope

function foo () {
   var x = 'hi';
}
x; // error : x is not defined

scope foo ทำให้ code ข้างนอกไม่รู้จัก x
นั่นคือ x เป็น local variable ของ foo

💥 for-loop, while-loop, if, else ไม่ได้สร้าง scope 

if (true) {
   var x = 'hi';
}
x; // hi

ถึงจะประกาศ x ใน if แต่ code ข้างนอกก็ยังเห็น x
📢 เพื่อป้องกันความสับสน ควรประกาศตัวแปรทั้งหมดที่บรทัดแรกของ function

JavaScript มี global scope หรือเรียกว่า window scope
การประกาศตัวแปรลอยๆ นอก function เป็นการสร้างตัวแปรให้ global scope

var x = 'hi';
x;                // hi
window.x;  // hi
this.x;         // hi

y = 'bye';     // ไม่มี var ให้ผลเหมือนกัน
y;               // bye
window.y;  // bye
this.y;        // bye

📢 ไม่ควรประกาศตัวแปรนอก function
เพราะมันจะเป็น global variable และอาจไปซ้ำกับโค้ดอื่นที่อยู่ในเพจ

ถ้าจำเป็นต้องสร้าง global variable แนะนำให้ใช้ namespace คู่กับ IIFE
namespace ควรเป็นชื่อบริษัท ทีม หรือโปรเจ็กที่กำลังทำอยู่

(function (ns) {
   ns.theme = "dark";
})(window.wonderProject = window.wonderProject || {});

window.wonderProject.theme;  // dark

ดูวิธีอื่นๆ ได้ ที่นี่

📢 ไม่ควรสร้างตัวแปรใน function โดยไม่ใช้ var
เพราะเมื่อ function ทำงาน จะเป็นการสร้างตัวแปรที่ global scope

function foo() {
   z = 'Oh';
}
foo();

z;                // Oh
window.z;  // Oh
this.z;         // Oh

z สร้างครั้งแรกใน function
แต่เพราะไม่ใช้ var ทำให้มันเป็นตัวแปรของ global (window) ไป
อันตรายเพราะอาจเกิด bug ได้

สรุป

1. สร้าง scope ทำโดยใช้ function เท่านั้น
2. for, while, if, else ไม่สร้าง scope
3. ประกาศตัวแปรทั้งหมดตั้งแต่บรรทัดแรกของ function
4. ใช้ namespace คู่กับ IIFE ถ้าต้องการสร้างตัวแปรที่ global scope (window scope)

blog หน้าผมจะอธิบาย JavaScript closure ครับ 😃

บทความน่าสนใจ
เทคนิค JavaScript 1 : "use strict" ทำไม และ อย่างไร ?
Soft Skills 1 : Agile ก็เท่านั้น ถ้าไม่มีใครฟังเราพูด !