variables หลักๆตอนนี้มี let กับ const

let vs const

คุณสมบัติ	let	const
การเปลี่ยนแปลงค่า	สามารถเปลี่ยนแปลงค่าได้	ไม่สามารถเปลี่ยนแปลงค่าได้ (สำหรับค่าพื้นฐาน)
ขอบเขต (Scope)	Block-scoped	Block-scoped
การประกาศซ้ำ	ไม่สามารถประกาศซ้ำในขอบเขตเดียวกัน	ไม่สามารถประกาศซ้ำในขอบเขตเดียวกัน
การกำหนดค่าเริ่มต้น	ไม่จำเป็นต้องกำหนดค่าเริ่มต้น	ต้องกำหนดค่าเริ่มต้นเสมอ
การใช้งานที่เหมาะสม	สำหรับตัวแปรที่ต้องการเปลี่ยนค่าในภายหลัง	สำหรับค่าคงที่หรือการอ้างอิงที่ไม่ต้องการเปลี่ยนแปลง
พฤติกรรมกับ Object และ Array	สามารถเปลี่ยนแปลงค่าภายใน Object หรือ Array ได้	สามารถเปลี่ยนแปลงค่าภายใน Object หรือ Array ได้ แต่ไม่สามารถเปลี่ยนการอ้างอิงได้
การ Hoisting	ถูก Hoisted แต่ไม่ถูกกำหนดค่าเริ่มต้น	ถูก Hoisted แต่ไม่ถูกกำหนดค่าเริ่มต้น
การใช้ใน Loop	เหมาะสำหรับใช้ใน for loop	ไม่เหมาะสำหรับใช้เป็นตัวนับใน loop แต่สามารถใช้เป็นค่าคงที่ใน loop ได้
การใช้ใน Global Scope	ไม่แนะนำให้ใช้ใน global scope	สามารถใช้ใน global scope ได้อย่างปลอดภัยสำหรับค่าคงที่
ประสิทธิภาพ	มีประสิทธิภาพเท่ากับ const ในการทำงานทั่วไป	อาจมีประสิทธิภาพดีกว่าเล็กน้อยในการ optimize ของ JavaScript engine

ก่อนหน้านี้มี var ด้วย แต่ไม่ค่อยนิยมแล้ว

var นิยมน้อยลง let และ const เป็นที่นิยมมากขึ้นเนื่องจาก

• การควบคุมขอบเขต ของตัวแปรที่ดีขึ้น
• การป้องกันการประกาศซ้ำ และการป้องกันปัญหาเกี่ยวกับการยกขึ้น (hoisting)
• การป้องกันการเปลี่ยนแปลงค่า โดยใช้ const สำหรับค่าคงที่

การใช้ var ยังสามารถพบได้ในโค้ดเก่าหรือในบางสถานการณ์ที่ต้องการความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า, แต่โดยทั่วไปแล้วการใช้ let และ const จะช่วยให้การเขียนโค้ดมีความชัดเจนและปลอดภัยมากขึ้น

การเปลี่ยนแปลงค่า

let อนุญาตให้เปลี่ยนแปลงค่าได้ ในขณะที่ const ไม่อนุญาตให้เปลี่ยนแปลงค่าสำหรับค่าพื้นฐาน

let x = 5;
x = 10; // สามารถทำได้

const y = 5;
y = 10; // TypeError: Assignment to a constant variable

ขอบเขต (Scope)

ทั้ง let และ const มีขอบเขตแบบ block-scoped ซึ่งหมายความว่าตัวแปรจะมีอยู่เฉพาะภายในบล็อกที่ประกาศเท่านั้น

{
  let x = 5;
  const y = 10;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined

การประกาศซ้ำ

ทั้ง let และ const ไม่อนุญาตให้ประกาศซ้ำในขอบเขตเดียวกัน

let x = 5;
let x = 10; // SyntaxError: Identifier 'x' has already been declared

const y = 5;
const y = 10; // SyntaxError: Identifier 'y' has already been declared

การกำหนดค่าเริ่มต้น

let ไม่จำเป็นต้องกำหนดค่าเริ่มต้น แต่ const ต้องกำหนดค่าเริ่มต้นเสมอ

let x; // สามารถทำได้
const y; // SyntaxError: Missing initializer in const declaration

การใช้งานที่เหมาะสม

let เหมาะสำหรับตัวแปรที่ต้องการเปลี่ยนค่าในภายหลัง ส่วน const เหมาะสำหรับค่าคงที่หรือการอ้างอิงที่ไม่ต้องการเปลี่ยนแปลง

let counter = 0;
counter++; // เหมาะสมสำหรับ let

const PI = 3.14159;
const MAX_SIZE = 100; // เหมาะสมสำหรับ const

พฤติกรรมกับ Object และ Array

ทั้ง let และ const สามารถเปลี่ยนแปลงค่าภายใน Object หรือ Array ได้ แต่ const ไม่สามารถเปลี่ยนการอ้างอิงได้

let arr = [1, 2, 3];
arr.push(4); // สามารถทำได้
arr = [5, 6, 7]; // สามารถทำได้

const obj = { x: 1 };
obj.y = 2; // สามารถทำได้
obj = { z: 3 }; // TypeError: Assignment to a constant variable

การ Hoisting

ทั้ง let และ const ถูก hoisted แต่ไม่ถูกกำหนดค่าเริ่มต้น ทำให้เกิด Temporal Dead Zone (TDZ)

console.log(x); // ReferenceError: Cannot access 'x' before initialization
let x = 5;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
const y = 10;

การใช้ใน Loop

let เหมาะสำหรับใช้ใน for loop ส่วน const ไม่เหมาะสำหรับใช้เป็นตัวนับใน loop แต่สามารถใช้เป็นค่าคงที่ใน loop ได้

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (const MAX = 5, i = 0; i < MAX; i++) {
  console.log(i);
}

การใช้ใน Global Scope

ไม่แนะนำให้ใช้ let ใน global scope แต่ const สามารถใช้ใน global scope ได้อย่างปลอดภัยสำหรับค่าคงที่

// ไม่แนะนำ
let globalVar = 'ไม่ควรใช้';

// สามารถใช้ได้
const APP_VERSION = '1.0.0';

ประสิทธิภาพ

โดยทั่วไป let และ const มีประสิทธิภาพใกล้เคียงกัน แต่ const อาจมีข้อได้เปรียบเล็กน้อยในการ optimize ของ JavaScript engine เนื่องจากค่าไม่เปลี่ยนแปลง

// ใช้ const สำหรับค่าที่ไม่เปลี่ยนแปลง
const MAX = 1000000;
let sum = 0;

// loop นี้อาจทำงานเร็วกว่าเล็กน้อย เพราะ MAX เป็นค่าคงที่
for (let i = 0; i < MAX; i++) {
  sum += i;
}

// เทียบกับการใช้ let สำหรับค่าที่ไม่เปลี่ยนแปลง
let max = 1000000;
let sum2 = 0;

// loop นี้อาจทำงานช้ากว่าเล็กน้อย เพราะ max อาจถูกเปลี่ยนแปลงได้
for (let i = 0; i < max; i++) {
  sum2 += i;
}