การใช้งานตัวแปร Javascript Variables อย่างมีประสิทธิภาพ [JS #2] |

วันนี้ Keancode.com จะพาทุกคนไปทำความเข้าใจประเภท ตัวแปร JavaScript Variables พร้อมแนะนำเทคนิคการเลือกใช้ตัวแปรให้เหมาะสมกับสถานการณ์ต่างๆ เพื่อยกระดับการเขียนโค้ดให้มีประสิทธิภาพ และพัฒนางานได้ถูกต้องตามหลักภาษา หลายคนอาจคุ้นเคยตัวแปรเหล่านี้ var, let และ const อยู่บ้างแล้ว ไปเริ่มต้นกันเลย ~

วิธีการใช้งานตัวแปร 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อย่างถูกต้องตามหลักภาษาโปรแกรม จะช่วยให้การเขียนโค้ดของนักพัฒนามีประสิทธิภาพ ง่ายต่อการบำรุงรักษา และลดความซับซ้อนที่อาจเกิดขึ้นได้ในอนาคต การฝึกฝนอย่างสม่ำเสมอเป็นสิ่งจำเป็นเพื่อให้การใช้งานประเภทตัวแปรเป็นไปได้อย่างราบรื่น