ตัวแปร const และ let ใน JavaScript

ใน JavaScript การประกาศตัวแปรเป็นสิ่งจำเป็นสำหรับการจัดเก็บข้อมูลและใช้งานในโปรแกรม ก่อนปี 2015 (ES6) เราใช้ var เป็นหลัก แต่ปัจจุบันเรามี let และ const ซึ่งมีข้อดีและข้อจำกัดที่แตกต่างกันไป บทความนี้จะอธิบายความแตกต่างระหว่าง var, let และ const รวมถึงการใช้งานที่เหมาะสม

ความแตกต่างระหว่าง var, let และ const

ความแตกต่างหลักๆ อยู่ที่ scope (ขอบเขตการใช้งาน) และการเปลี่ยนแปลงค่า (mutability):

var: มี function scope หรือ global scope (ถ้าประกาศนอกฟังก์ชัน) สามารถ redeclare (ประกาศซ้ำ) และ reassign (กำหนดค่าใหม่) ได้
let: มี block scope (ขอบเขตการใช้งานภายในบล็อกโค้ด เช่น if, for, while) ไม่สามารถ redeclare ใน scope เดียวกัน แต่สามารถ reassign ได้
const: มี block scope เหมือน let ไม่สามารถ redeclare หรือ reassign ได้ (แต่ถ้าเป็น object หรือ array, properties/elements ภายในสามารถเปลี่ยนแปลงได้)

Scope คืออะไร? Scope คือบริเวณที่ตัวแปรสามารถเข้าถึงและใช้งานได้ การเข้าใจ scope เป็นสิ่งสำคัญในการเขียนโค้ดที่ถูกต้องและหลีกเลี่ยงข้อผิดพลาดที่ไม่คาดคิด

Scope ของ let และ const

let และ const มี block scope ซึ่งหมายความว่าตัวแปรที่ประกาศด้วย let หรือ const จะสามารถใช้งานได้เฉพาะภายในบล็อกโค้ดที่ประกาศเท่านั้น บล็อกโค้ดคือส่วนของโค้ดที่อยู่ภายในเครื่องหมายปีกกา {} เช่น if, for, while หรือฟังก์ชัน

function example() {
  if (true) {
    let x = 10;
    const y = 20;
    var z = 30; // var มี function scope
    console.log(x); // Output: 10
    console.log(y); // Output: 20
    console.log(z); // Output: 30
  }
  console.log(z); // Output: 30 (var สามารถเข้าถึงได้นอก if block)
  console.log(x); // Error: x is not defined (let ไม่สามารถเข้าถึงได้นอก if block)
  console.log(y); // Error: y is not defined (const ไม่สามารถเข้าถึงได้นอก if block)
}

example();

จากตัวอย่างข้างต้น จะเห็นว่าตัวแปร x และ y ที่ประกาศด้วย let และ const ไม่สามารถเข้าถึงได้นอก if block ในขณะที่ z ที่ประกาศด้วย var สามารถเข้าถึงได้ภายในฟังก์ชัน example ทั้งหมด

Redeclare และ Reassign

Redeclare คือการประกาศตัวแปรชื่อเดิมซ้ำใน scope เดียวกัน Reassign คือการกำหนดค่าใหม่ให้กับตัวแปร

var a = 10;
var a = 20; // redeclare ได้
a = 30; // reassign ได้
console.log(a); // Output: 30

let b = 10;
// let b = 20; // Error: Identifier 'b' has already been declared (redeclare ไม่ได้)
b = 30; // reassign ได้
console.log(b); // Output: 30

const c = 10;
// const c = 20; // Error: Identifier 'c' has already been declared (redeclare ไม่ได้)
// c = 30; // Error: Assignment to constant variable. (reassign ไม่ได้)
console.log(c); // Output: 10

var อนุญาตให้ redeclare และ reassign ได้อย่างอิสระ ซึ่งอาจนำไปสู่ข้อผิดพลาดได้ง่าย let อนุญาตให้ reassign ได้ แต่ไม่อนุญาตให้ redeclare ใน scope เดียวกัน const ไม่อนุญาตให้ทั้ง redeclare และ reassign

การใช้งาน const สำหรับค่าคงที่

const เหมาะสำหรับใช้กับค่าคงที่ (constant) คือค่าที่ไม่ควรเปลี่ยนแปลงหลังจากกำหนดค่าเริ่มต้นแล้ว ตัวอย่างเช่น:

const PI = 3.14159;
const GRAVITY = 9.81;
const API_KEY = "YOUR_API_KEY";

// PI = 3.14; // Error: Assignment to constant variable.

การใช้ const สำหรับค่าคงที่ช่วยให้โค้ดมีความชัดเจนและป้องกันการเปลี่ยนแปลงค่าที่ไม่ตั้งใจ

Const กับ Object และ Array

แม้ว่า const จะไม่อนุญาตให้ reassign ตัวแปร แต่ถ้าตัวแปรนั้นเป็น object หรือ array, properties หรือ elements ภายใน object/array นั้นสามารถเปลี่ยนแปลงได้

const person = {
  name: "John",
  age: 30
};

person.age = 31; // สามารถเปลี่ยนแปลง property ได้
console.log(person.age); // Output: 31

// person = { name: "Jane", age: 25 }; // Error: Assignment to constant variable. (reassign object ไม่ได้)

const numbers = [1, 2, 3];
numbers.push(4); // สามารถเพิ่ม element ได้
console.log(numbers); // Output: [1, 2, 3, 4]

// numbers = [4, 5, 6]; // Error: Assignment to constant variable. (reassign array ไม่ได้)

ถ้าต้องการให้ object หรือ array เป็น immutable จริงๆ (ไม่สามารถเปลี่ยนแปลงได้เลย) คุณจะต้องใช้เทคนิคเพิ่มเติม เช่น Object.freeze()

const immutablePerson = Object.freeze({
  name: "John",
  age: 30
});

// immutablePerson.age = 31; // Error: Cannot assign to read only property 'age' of object '#<Object>'

Hoisting

Hoisting คือกลไกของ JavaScript ที่ทำให้การประกาศตัวแปรและฟังก์ชันถูก "ยกขึ้น" ไปไว้บนสุดของ scope ก่อนที่จะมีการ execute โค้ดจริง

var ถูก hoisted และ initialized ด้วย undefined ในขณะที่ let และ const ก็ถูก hoisted เช่นกัน แต่จะไม่ถูก initialized ทำให้เกิด error ถ้าพยายามเข้าถึงก่อนการประกาศ (Temporal Dead Zone - TDZ)

console.log(x); // Output: undefined (var ถูก hoisted และ initialized ด้วย undefined)
var x = 10;

// console.log(y); // Error: Cannot access 'y' before initialization (let ถูก hoisted แต่ไม่ initialized)
let y = 20;

// console.log(z); // Error: Cannot access 'z' before initialization (const ถูก hoisted แต่ไม่ initialized)
const z = 30;

การที่ let และ const ไม่ถูก initialized ทำให้ช่วยป้องกันข้อผิดพลาดที่อาจเกิดขึ้นจากการใช้งานตัวแปรที่ยังไม่ถูกกำหนดค่า

สรุป

let และ const เป็นเครื่องมือที่มีประโยชน์ในการเขียน JavaScript ที่ทันสมัย ช่วยให้โค้ดมีความชัดเจน ปลอดภัย และง่ายต่อการบำรุงรักษา

ใช้ const สำหรับค่าคงที่ที่ไม่ควรเปลี่ยนแปลง
ใช้ let สำหรับตัวแปรที่อาจมีการเปลี่ยนแปลงค่า
หลีกเลี่ยงการใช้ var ในโค้ดใหม่

การเข้าใจความแตกต่างระหว่าง var, let และ const เป็นพื้นฐานที่สำคัญสำหรับการเขียน JavaScript ที่มีคุณภาพ