วันนี้ Keancode.com จะพาทุกคนไปทำความเข้าใจประเภท ตัวแปร JavaScript Variables พร้อมแนะนำเทคนิคการเลือกใช้ตัวแปรให้เหมาะสมกับสถานการณ์ต่างๆ เพื่อยกระดับการเขียนโค้ดให้มีประสิทธิภาพ และพัฒนางานได้ถูกต้องตามหลักภาษา หลายคนอาจคุ้นเคยตัวแปรเหล่านี้ var, let และ const อยู่บ้างแล้ว ไปเริ่มต้นกันเลย ~
![การเลือกใช้ Javascript Variables ให้ถูกหลักภาษา](http://keancode.com/wp-content/uploads/2024/06/JS-Var-opt.png)
วิธีการใช้งานตัวแปร Javascript Variables อย่างเหมาะสม
ในภาษาจาวาสคริปต์ (JS Variables) สามารถแบ่งประเภทของตัวแปรออกเป็น 3 ชนิด ได้แก่ var, let และ const โดยมีวิธีการใช้งานที่แตกต่างกัน ดังนี้
var ตัวแปรที่มีรูปแบบ [Function-Scoped] ซึ่งมีขอบเขตการใช้งานกว้างทั่วทั้งฟังก์ชัน ตัวแปรประเภทนี้จะถูกยกไปที่ line ด้านบนสุดของ scope โดยเราสามารถใช้ตัวแปรก่อนที่จะประกาศค่าได้ แต่ค่าที่ได้จะเป็น undefined จะกว่าจะพบการกำหนดค่า หรือประกาศค่านั้นขึ้นมาจริง นอกจากนี้ตัวแปรประเภทนี้ยังสามารถประกาศอีกครั้ง (Re-declaration) ใน scope เดียวกันได้
ตัวอย่าง :
console.log(x); // undefined (เรียกใช้ตัวแปรก่อนการประกาศ x)
var x = 10;
console.log(x); // 10 (ผลลัพธ์ x)
—
function test() {
var y = 20;
if (true) {
var y = 30; // Re-declaration (ประกาศตัวแปรซ้ำ เพื่อเปลี่ยนแปลงค่า y จาก 20 เป็น 30)
console.log(y); // 30
}
console.log(y); // 30
}
let ตัวแปรที่มีรูปแบบ [Block-Scoped] มีขอบเขตเป็นบล็อก คือตัวแปรจะสามารถใช้ได้ใน Function scope และ Condition scope เท่านั้น ซึ่งตัวแปรประเภทนี้แตกต่างจากตัวแปรประเภท var โดยไม่สามารถเรียกใช้ได้ก่อนการประกาศได้ และยังไม่สามารถประกาศซ้ำในบล็อกเดียวกัน
ตัวอย่าง :
console.log(a); // เกิด ReferenceError
let a = 10;
console.log(a); // 10
—
function test() {
let b = 20;
if (true) {
let b = 30; // ตัวแปรที่ถูกประกาศใน Condition scope : if-else
console.log(b); // 30
}
console.log(b); // 20 (ผลลัพธ์ b ในส่วนของ Function scope : test())
}
const ตัวแปรที่มีรูปแบบ [Block-Scoped] เช่นเดียวกับ let คุณสมบัติแทบทุกอย่างคล้าย let แต่การใช้งานจำเป็นต้องประกาศตัวแปรทุกครั้งในจุดเริ่มต้นของการใช้งาน และไม่สามารถเปลี่ยนแปลงค่าในภายหลังได้ ยกเว้น แต่ชนิดของตัวแปรเป็น Object หรือ Array ซึ่งยังสามารถปรับปรุงค่าได้ในภายหลัง
ตัวอย่าง :
console.log(c); // เกิด ReferenceError
const c = 10;
console.log(c); // 10
—
function test() {
const d = 20;
if (true) {
const d = 30; // ตัวแปรที่ถูกประกาศใน Condition scope : if-else
console.log(d); // 30
}
console.log(d); // 20 (ผลลัพธ์ d ในส่วนของ Function scope : test())
}
test();
—
// ใช้ Const กับชนิดตัวแปรที่เป็น Object หรือ Array
const obj = { key: "value" };
obj.key = "newValue"; // อนุญาติให้รับค่าใหม่
console.log(obj.key); // "newValue"
const arr = [1, 2, 3];
arr.push(4); // อนุญาติให้รับค่าใหม่เพิ่มเข้ามา
console.log(arr); // [1, 2, 3, 4]
บทสรุป
การเลือกใช้ประเภทตัวแปร var, let และ constอย่างถูกต้องตามหลักภาษาโปรแกรม จะช่วยให้การเขียนโค้ดของนักพัฒนามีประสิทธิภาพ ง่ายต่อการบำรุงรักษา และลดความซับซ้อนที่อาจเกิดขึ้นได้ในอนาคต การฝึกฝนอย่างสม่ำเสมอเป็นสิ่งจำเป็นเพื่อให้การใช้งานประเภทตัวแปรเป็นไปได้อย่างราบรื่น