ตัวแปร ในภาษา JavaScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับตัวแปรในภาษา JavaScript เราจะพูดถึงการประกาศ การใช้งาน และขอบเขตของตัวแปร การทำงานของตัวแปรเมื่อข้อมูลที่ถูกเก็บเป็นออบเจ็ค นี่เป็นเนื้อหาของบทนี้

  • ตัวแปรคืออะไร
  • การประกาศและใช้งานตัวแปร
  • ตัวแปรและออบเจ็ค (Object)
  • ขอบเขตของตัวแปร
  • การประกาศตัวแปรแบบ var

ตัวแปรคืออะไร

ตัวแปร (Variable) คือชื่อหรือสัญลักษณ์ที่ใช้อ้างอิงถึงข้อมูลที่ถูกเก็บในหน่วยความจำ หรือกล่าวอีกนัยหนึ่ง ตัวแปรใช้สำหรับเก็บข้อมูลในโปรแกรมเพื่อเข้าถึงข้อมูลในภายหลัง โดยการใช้ชื่อของตัวแปรสำหรับอ้างถึงข้อมูลดังกล่าว เช่น การอ่านค่าในตัวแปร หรือการเปลี่ยนแปลงค่าของตัวแปรเป็นค่าใหม่

ภาษา JavaScript นั้นเป็นภาษาแบบ Dynamic typing นั่นหมายความว่าตัวแปรหนึ่งตัวสามารถเก็บข้อมูลได้หลายประเภทในขณะที่โปรแกรมทำงาน เราไม่จำเป็นต้องกำหนดประเภทข้อมูลให้กับตัวแปรเหมือนกับภาษาที่เป็น Static typing ยกตัวอย่างเช่น ภาษา Java หรือภาษา C

การประกาศและใช้งานตัวแปร

ก่อนที่เรานำตัวแปรมาใช้ได้ในเราต้องทำการประกาศมันก่อน ในภาษา JavaScript นั้นเราสามารถประกาศตัวแปรได้โดยการใช้คำสั่ง let ซึ่งเป็นคำสั่งที่ถูกแนะนำขึ้นมาใน ES6 (ECMAScript 2015) นี่เป็นรูปแบบของการประกาศตัวแปรในภาษา JavaScript

let name = value;

ในการประกาศตัวแปรเราใช้คำสั่ง let และตามด้วยชื่อของตัวแปร การตั้งชื่อของตัวแปรสามารถประกอบไปด้วย ตัวอักษร ตัวเลข สัญลักษณ์ Underscore (_) และดอลลา ($) และชื่อของตัวแปรนั้นจะไม่สามารถขึ้นต้นด้วยตัวเลขได้ ส่วน value เป็นค่าของตัวแปรที่อาจเป็น Literal หรือ Expression ใดๆ ก็ได้

และนี่เป็นตัวอย่างการประกาศตัวแปรในภาษา JavaScript สำหรับเก็บข้อมูลประเภทต่างๆ

let name = "Metin";
let salary = 59000;
let adress5 = null;
let speakLanguage = "English";
let dateOfBirth = "1988-03-12";

ในตัวอย่าง เป็นรูปแบบการประกาศตัวแปรที่ถูกต้องในภาษา JavaScript ในการตั้งชื่อของตัวแปรเรามักจะใช้ตัวพิมพ์เล็กเป็นหลัก และหากชื่อของตัวแปรมีหลายคำ ให้คั่นแต่ละคำด้วยตัวพิมพ์ใหญ่ในรูปแบบของ camelCase

และนี่เป็นตัวอย่างของการประกาศตัวแปรที่ไม่ถูกต้อง

let 1name = "Metin";    // Cannot start with number
let my var = "JS";      // Cannot contain space
let my+var  ="TS";     // Cannot contain symbol except _ and $

ในตัวอย่าง เป็นการตั้งชื่อตัวแปรที่ไม่ถูกต้องในภาษา JavaScript ตัวแปรแรกไม่ถูกต้องเนื่องจากชื่อของตัวแปรเริ่มต้นด้วยตัวเลข ตัวแปรต่อมามีเว้นวรรคอยู่ภายในชื่อ และสุดท้ายมีเครื่องหมาย + ซึ่งมันไม่สามารถใช้เป็นชื่อของตัวแปรได้

ในการประกาศตัวแปร เราสามารประกาศตัวแปรก่อน แล้วค่อยกำหนดค่าให้กับมันในภายหลังได้ ในตัวอย่างนี้ เราได้ประกาศตัวแปร apple หลังจากนั้นกำหนดค่าให้กับตัวแปรเป็น 3

let apple;
apple = 3;

นอกจากนี้ เรายังสามารถประกาศหลายตัวแปรได้ในคำสั่งเดียวโดยคั่นแต่ละตัวแปรด้วยเครื่องหมายคอมมา (,) และประกาศตัวแปรหลายตัวพร้อมกันที่มีค่าเดียวกันได้ นี่เป็นตัวอย่าง

let name = "Metin", height = 6.8;
let apple = orange = banana = 10;

ในบรรทัดแรก เป็นการประกาศตัวแปร name และ height ในคำสั่งเดียวกัน จากนั้นประกาศอีกสามตัวแปร apple, orange และ banana โดยการกำหนดค่าให้กับตัวแปรทุกตัวเป็น 10

เนื่องจากภาษา JavaScript นั้นเป็นภาษาแบบ Dynamic typing นั่นหมายความว่าตัวแปรที่ประกาศด้วยข้อมูลประเภทหนึ่ง สามารถเปลี่ยนค่าเป็นข้อมูลประเภทอื่นได้ตลอดการทำงานของโปรแกรม ยกตัวอย่างเช่น

let universal = 16;
universal = true;
universal = "JS";
console.log("Last value: " + universal);

ในตัวอย่าง เราได้ประกาศตัวแปร universal พร้อมกำหนดค่าเป็นตัวเลขให้กับตัวแปร จากนั้นเราเปลี่ยนค่าในตัวแปรเป็น Boolean และสุดท้ายเปลี่ยนค่าของตัวแปรเป็น String และแสดงค่าสุดท้ายในตัวแปรออกมาทางหน้าจอ

นี่เป็นสิ่งที่สามารถทำได้ในภาษา JavaScript แต่ในทางปฏิบัติ เรามักใช้หนึ่งตัวแปรสำหรับเก็บข้อมูลประเภทเดียวเท่านั้น ยกเว้น null ที่อาจจะมีการใช้งานร่วมกับข้อมูลประเภทอื่น

นอกจากค่า Literal แล้วเรายังสามารถกำหนดค่าให้กับตัวแปรจากการคำนวณ หรือจาก Expression ที่ซับซ้อน หรือการเรียกใช้ฟังก์ชันได้ ยกตัวอย่างเช่น

let sum = 10 + 3;

// Pythagoras' theorem, find C
let a = 3, b = 4;
let c = Math.sqrt(a ** 2 + b ** 2);

// Function calls
let timestamp = Date.now();
let count = "marcuscode".length;

console.log("sum: " + sum);
console.log("c: " + c);
console.log("timestamp: " + timestamp);
console.log("count: " + count);

ในตัวอย่าง เป็นการหาผลรวมของตัวเลขเก็บไว้ในตัวแปร sum จากนั้นเป็นการหาความยาวของด้านตรงข้ามสามเหลี่ยมมุมฉากจากทฤษฎีบทปีทาโกรัส และเก็บไว้ในตัวแปร c ต่อมาเป็นการเรียกใช้งานฟังก์ชันและเก็บค่าไว้ในตัวแปร timestamp ซึ่งเป็นค่าเวลาปัจจุบัน และนับจำนวนตัวอักษรใน String และเก็บในตัวแปร count ตามลำดับ

ไม่ใช่เพียงประเภทข้อมูลพื้นฐานเท่านั้นที่เราสามารถกำหนดให้กับตัวแปร ในภาษา JavaScript เราสามารถใช้ตัวแปรเพื่อเก็บค่าของออบเจ็ค ฟังก์ชัน หรือคลาสได้ ยกตัวอย่างเช่น

let user = {
    id: 1,
    name: "Metin",
    isAdmin: true
};

let sayHi = function (user) {
    console.log("Hi " + user.name + ", how are you?");
}

let Animal = class {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

let dog = new Animal("Dog", "Brown");

sayHi(user);
console.log(dog);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Hi Metin, how are you?
Animal { name: 'Dog', color: 'Brown' }

ในตัวอย่าง เราได้กำหนดค่าออบเจ็คให้กับตัวแปร user มันเป็นออบเจ็คที่ใช้เก็บข้อมูลเกี่ยวกับผู้ใช้ จากนั้นเราประกาศตัวแปร sayHi ตัวแปรนี้เก็บค่าเป็นฟังก์ชัน ดังนั้นเราสามารถใช้ตัวแปรนี้เหมือนกับว่ามันเป็นฟังก์ชันได้ เนื่องจากว่าในภาษา JavaScript ฟังก์ชันนั้นถือว่าเป็นออบเจ็คหรือค่าๆ หนึ่ง

let Animal = class {
    constructor(name, color) {
        this.name = name;
        this.color = color;
    }
}

ในคำสั่งนี้ เราสร้างคลาสแบบไม่มีชื่อ (Anonymous class) และกำหนดมันให้กับตัวแปร Animal สำหรับชื่อของคลาสนั้นเรามักจะขึ้นต้นด้วยตัวพิมพ์ใหญ่ ซึ่งเป็นวิธีที่เราตั้งชื่อคลาสในภาษา JavaScript จากนั้นเราสามารถใช้คลาส Animal เพื่อนำไปสร้างออบเจ็คได้

ตัวแปรและออบเจ็ค (Object)

เมื่อทำงานกับตัวแปร มีสิ่งหนึ่งที่คุณควรรู้ระหว่างข้อแตกต่างของการใช้ตัวแปรเก็บข้อมูลพื้นฐาน (Primitive data type) และออบเจ็ต (Object) นั่นคือเมื่อเราใช้ตัวดำเนินการกำหนดค่า = ในการคัดลอกค่าจากตัวแปรหนึ่งไปยังอีกตัวแปรหนึ่ง ยกตัวอย่างเช่น

let a = 5;
let b = a;
b++;
console.log('a = ' + a);   // 5
console.log('b = ' + b);   // 6

ในตัวอย่าง เราได้ประกาศตัวแปร a และกำหนดค่าเป็น 5 จากนั้นประกาศตัวแปร b และกำหนดค่าให้กับตัวแปรนี้เป็นค่าจากตัวแปร a

let b = a;

ในคำสั่งนี้ ค่าของตัวแปร a จะถูกคัดลอกไปยังตัวแปร b นั่นทำให้ในตอนนี้ทั้งสองตัวแปรมีค่าเท่ากับ 5 จากนั้นเราเพิ่มค่าในตัวแปร b และแสดงค่าของตัวแปรทั้งสองออกมาทางหน้าจอ ทั้งสองตัวแปรเก็บข้อมูลคนละค่ากันและไม่ขึ้นต่อกัน หรือกล่าวอีกนัยหนึ่ง ตัวแปรแต่ละตัวมีค่าเป็นของมันเอง

นั่นเป็นเพราะว่าสำหรับประเภทข้อมูลพื้นฐานในภาษา JavaScript เช่น ตัวเลข Boolean หรือ String นั้น การกำหนดค่าให้กับตัวแปรจะเป็นการคัดลอกค่าใหม่ขึ้นมา แต่การทำงานจะแตกต่างกันสำหรับออบเจ็ค ยกตัวอย่างเช่น

let user1 = {
    name: "Metin",
    isAdmin: true
};

let user2 = user1;
user1.name = "Mateo";

console.log("user1", user1);
console.log("user2", user2);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

user1 { name: 'Mateo', isAdmin: true }
user2 { name: 'Mateo', isAdmin: true }

ในตัวอย่าง เรามีตัวแปรออบเจ็ค user1 ที่มี Property name สำหรับเก็บชื่อและ isAdmin เพื่อเก็บค่า Boolean ว่าเป็นผู้ดูแลหรือไม่ ตอนนี้ลองจินตนาการว่าเราต้องการสร้างออบเจ็คใหม่ขึ้นมาโดยให้มี Property เหมือนกับออบเจ็คแรก แต่เราต้องการเปลี่ยนชื่อ name ในตัวแปรที่สองเป็นชื่อใหม่

let user2 = user1;
user1.name = "Mateo";

ดังนั้นเราสร้างตัวแปร user2 และกำหนดค่าจากตัวแปร user1 ลงไป และเปลี่ยนชื่อเป็นชื่อใหม่เพื่อหวังว่ามันจะเป็นตามที่เราต้องการ แต่การทำเช่นนี้กับออบเจ็คไม่ใช่การคัดลอกข้อมูล แต่มันเป็นการสร้างตัวแปรใหม่ขึ้นมาสำหรับอ้างถึงออบเจ็คที่ตัวแปร user1 อ้างถึงอยู่

let user1 = {
    name: "Metin",
    isAdmin: true
};

หรืออธิบายง่ายๆ ก็คือเมื่อเรากำหนดค่าเป็นออบเจ็คให้กับตัวแปรในตอนที่ประกาศ user1 ตัวแปรนี้ไม่ได้เก็บค่าของออบเจ็คโดยตรง แต่มันเก็บค่าอ้างอิงในหน่วยความจำที่ออบเจ็คนั้นถูกเก็บอยู่ ดังนั้นในคำสั่ง let user2 = user1; คือการกำหนดค่าในตัวแปร user2 ให้เก็บค่า (ค่าอ้างอิงในหน่วยความจำ) เดียวกันกับตัวแปรแรก user1 เก็บอยู่

console.log("user1", user1);
console.log("user2", user2);

นั่นทำให้ตัวแปรทั้งสองอ้างถึงออบเจ็คเดียวกัน ซึ่งเราสามารถเข้าถึงค่าของออบเจ็คผ่านทางตัวแปรทั้งสองได้ ดังนั้นเมื่อเราทำการเปลี่ยนแปลงค่า user2.name นั่นจะทำให้ค่าใน user1.name เปลี่ยนไปด้วยเนื่องจากมันอ้างถึงออบเจ็คเดียวกันนั่นเอง

กฏการทำงานนี้ถูกนำไปใช้กับอาเรย์ด้วย เนื่องจากว่าอาเรย์เป็นออบเจ็ค นี่เป็นตัวอย่าง

let basket = ["Item1", "Item2", "Item3"];
let anotherBasket = basket;

basket.push("Item4");

console.log("basket: " + basket);
console.log("anotherBasket: " + anotherBasket);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

basket: Item1,Item2,Item3,Item4
anotherBasket: Item1,Item2,Item3,Item4

ในตัวอย่าง เราประกาศตัวแปร basket และกำหนดค่าให้กับมันเป็นอาเรย์ ในตอนนี้ตัวแปรได้อ้างถึงตำแหน่งในหน่วยความจำที่ข้อมูลจริงๆ ของอาเรย์ถูกเก็บอยู่

let anotherBasket = basket;

จากนั้นเรากำหนดค่าในตัวแปร basket ให้กับตัวแปร anotherBaske นี่ทำให้ทั้งสองตัวแปรมีค่าเดียวกัน (ตำแหน่งในหน่วยความจำเดียวกัน) นั่นหมายความว่ามันอ้างถึงอาเรย์เดียวกัน หลังจากที่เราเพิ่มข้อมูลเข้าไปยังอาเรย์ผ่านตัวแปร basket ค่าของอาเรย์ในตัวแปรทั้งสองจะเปลี่ยนไป

Object cloning

เพื่อแก้ปัญหานี้ ในกรณีที่เราต้องการคัดลอกออบเจ็คที่มีอยู่เป็นออบเจ็คใหม่ โดยที่ยังมี Property และข้อมูลทุกอย่างเหมือนกับออบเจ็คต้นฉบับ และเป็นอิสระจากกัน เราสามารถใช้เมธอด Object.assign สำหรับโคลนออบเจ็คได้ นี่เป็นตัวอย่าง

object_cloning.js
let user1 = {
    name: "Metin",
    isAdmin: true
};

let user2 = {};
Object.assign(user2, user1); // Clone object
user2.name = "Mateo";

console.log("user1", user1);
console.log("user2", user2);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

user1 { name: 'Metin', isAdmin: true }
user2 { name: 'Mateo', isAdmin: true }

ในตัวอย่าง เราต้องการสร้างออบเจ็ค user2 โดยที่คัดลอกค่าของมันมาจาก user1 และอย่างที่เรารู้ การใช้ตัวดำเนินกำหนดค่า = จะไม่ใช่เป็นการคัดลอกออบเจ็ต แต่จะเป็นการทำให้ตัวแปรทั้งสองอ้างอิงออบเจ็คเดียวกันแทน

let user2 = {};
Object.assign(user2, user1); // Clone object

ในภาษา JavaScript เราสามารถใช้เมธอด Object.assign เพื่อคัดลอก Property และค่าของมันจากออบเจ็ค user1 ไปยังออบเจ็ค user2 สองได้ ซึ่งในตอนแรกเราได้ประกาศออบเจ็ค user2 ว่างเปล่าเนื่องจากเราจะคัดลอกค่ามันมาจาก user1 แทน

user2.name = "Mateo";

ในตอนนี้ทั้งสองตัวแปรเป็นคนละออบเจ็คกัน ดังนั้นเราสามารถเปลี่ยนค่า user2.name ในออบเจ็ค user2 โดยที่ไม่ส่งผลกับออบเจ็ค user1

ขอบเขตของตัวแปร

ขอบเขตของตัวแปร (Variable scope) คือขอบเขตภายในโปรแกรมที่ตัวแปรสามารถถูกเข้าถึงได้หลังจากที่มันถูกประกาศ โดยทั่วไปแล้วเมื่อเราฟังก์ชันหรือกำหนดบล็อคของคำสั่งควบคุม if for หรือ while ขอบเขตใหม่ของตัวแปรจะถูกสร้างขึ้น และตัวแปรที่ถูกสร้างขึ้นในบล็อคจะสามารถเข้าถึงได้ภายในบล็อคดังกล่าวเท่านั้น ยกตัวอย่างเช่น

variable_scope.js
let a = 10;

// Create new block
{
    let b = 20;
    console.log("Inside block");
    console.log("b = " + b);
}

console.log("Top Level");
console.log("a = " + a);
// Cannot access b from here

ในตัวอย่าง แสดงการทำงานของขอบเขตตัวแปรภายในบล็อค เราได้สร้างบล็อคใหม่และภายในบล็อคนั้นมีประกาศตัวแปร b ดังนั้นตัวแปรนี้จะสามารถใช้ได้ภายในบล็อคเท่านั้น เมื่อจบการทำงานของบล็อคมันจะหายไป

let a = 10;

ในการประกาศตัวแปร a เมื่อเราเขียนโค้ดภาษา JavaScript โดยที่ไม่ได้อยู่ในบล็อคใดๆ หมายความว่าคำสั่งเหล่านี้อยู่ในบล็อคสูงสุด หรือบล็อค Top Level ของภาษา JavaScript

ฟังก์ชันหรือบล็อคในภาษา JavaScript นั้นสามารถซ้อนกันได้ เหมือนกับในตัวอย่างก่อนหน้า เรามีหนึ่งบล็อคที่อยู่ใน Top Level ดังนั้นมาดูตัวอย่างเพิ่มเติม

variable_scope2.js
// Top Level block
let a = 10;

// Level 1 Block
function outerFunction() {
    let b = 20;

    // Level 2 Block
    function innerFunction() {
        let c = 30;
        console.log("Inside innerFunction");
        console.log("a = " + a);
        console.log("b = " + b);
        console.log("c = " + c);
    }

    innerFunction();

    console.log("Inside outerFunction");
    console.log("a = " + a);
    console.log("b = " + b);
}

outerFunction();

console.log("Top Level");
console.log("a = " + a);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Inside innerFunction
a = 10
b = 20
c = 30
Inside outerFunction
a = 10
b = 20
Top Level
a = 10

ในตัวอย่าง แสดงให้เห็นถึงวิธีที่บล็อคถูกซ้อนกันได้ในภาษา JavaScript ในตอนแรกเราได้ประกาศตัวแปร a และสร้างฟังก์ชัน outerFunction ที่อยู่ระดับเดียวกัน (Top Level) กับตัวแปรนี้ ดังนั้นภายใน Top Level เราสามารถเข้าถึงตัวแปรและฟังก์ชันที่สร้างขึ้นภายในบล็อคนี้เท่านั้น ในกรณีนี้คือ a และ outerFunction

// Level 1 Block
function outerFunction() {
    let b = 20;

    // Level 2 Block
    function innerFunction() {
        ...
    }

    innerFunction();

    console.log("Inside outerFunction");
    console.log("a = " + a);
    console.log("b = " + b);
}

ในฟังก์ชัน outerFunction เราได้ประกาศตัวแปร b และฟังก์ชัน innerFunction ขึ้นมา ฟังก์ชันนี้เป็นฟังก์ชันที่อยู่ใน Top Level; และในภาษา JavaScript นั้นบล็อคสามารถเข้าถึงขอบเขตของตัวแปรของบล็อคที่อยู่สูงกว่ามันได้ นั่นหมายความว่าเราสามารถเข้าถึงตัวแปร a ที่ประกาศใน Top Level จากในฟังก์ชัน outerFunction ได้

// Level 2 Block
function innerFunction() {
    let c = 30;
    console.log("Inside innerFunction");
    console.log("a = " + a);
    console.log("b = " + b);
    console.log("c = " + c);
}

สุดท้ายฟังก์ชัน innerFunction นั้นเป็นฟังก์ชันที่อยู่ข้างในสุด นั่นทำให้มันสามารถเข้าถึงตัวแปรภายในฟังก์ชัน outerFunction และ Top Level ได้ทั้งหมด

และเช่นเดียวกัน อีกการสร้างบล็อคที่พบได้บ่อยที่สุดก็คือเมื่อตอนที่เราใช้คำสั่งควบคุมการทำงานของโปรแกรม นี่เป็นตัวอย่าง

control_structure_scope.js
let langs = ["Python", "Ruby", "JavaScript", "TypeScript"];
for (let item of langs) {
    console.log(item);
}

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

if (3 < 5) {
    let message = "3 less than 5 is truthly";
    console.log(message);
}

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Python
Ruby
JavaScript
TypeScript
Loop 0
Loop 1
Loop 2
Loop 3
Loop 4
3 less than 5 is truthly

ในตัวอย่าง เราได้ใช้งานคำสั่งควบคุมสามประเภทแต่ละคำสั่งนั้นต้องการบล็อคสำหรับกำหนดสั่งการทำงานของโปรแกรม คำสั่ง for of นั้นมีตัวแปร item ซึ่งเป็นตัวแปรที่ถูกสร้างขึ้นและใช้งานภายในบล็อค

คำสั่ง for นั้นมีการประกาศตัวแปร i สำหรับใช้เป็นตัวนับภายในบล็อค นอกจากนี้เรายังมีตัวแปร message สำหรับสร้างข้อความสำหรับแสดงภายในบล็อคด้วย

if (3 < 5) {
    let message = "3 less than 5 is truthly";
    console.log(message);
}

สุดท้ายคำสั่ง if ก็สร้างบล็อคใหม่เช่นเดียวกัน มันมีตัวแปร message สำหรับเก็บข้อความเพื่อแสดงออกทางหน้าจอ ซึ่งตัวแปร message ในคำสั่ง for และ if นั้นเป็นคนละตัวแปรกัน มันถูกสร้างและทำลายเมื่อบล็อคทำงานเสร็จสิ้น

let langs = ["Python", "Ruby", "JavaScript", "TypeScript"];

ดังนั้นในตัวอย่างนี้มีเพียงตัวแปรเดียวที่อยู่ใน Top Level คือ langs ที่ถูกประกาศไว้ในตอนต้น มันสามารถเข้าถึงได้จากภายในบล็อคทั้งหมด

การประกาศตัวแปรแบบดั้งเดิม var

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

คำสั่ง var ใช้สำหรับสร้างตัวแปรที่มีขอบเขตภายในฟังก์ชันที่มันอยู่ และเพิกเฉยต่อขอบเขตของบล็อคคำสั่งควบคุมเช่น คำสั่ง if for หรือคำสั่งอื่นๆ นี่เป็นตัวอย่าง

if (true) {
    var name = "Metin";
}
console.log(name);  // Metin

เมื่อเรารันโปรแกรม จะเห็นว่าเราสามารถเข้าถึงค่าของตัวแปร name นอกบล็อคของคำสั่ง if ได้ นั่นเป็นเพราะว่าคำสั่ง var ใช้สำหรับประกาศตัวแปรที่ม่ีขอบเขตในฟังก์ชันที่มันอยู่ ถ้าหากมันไม่ได้อยู่ในฟังก์ชัน ขอบเขตของตัวแปรจะเป็น Top Level แทน

และนี่เป็นตัวอย่างของการประกาศตัวแปรด้วยคำสั่ง var ภายในฟังก์ชัน ยกตัวอย่างเช่น

function init() {
    var name = "Metin";
}

init();
console.log(name);  // Error

ในตัวอย่าง ขอบเขตของตัวแปรของ name จะอยู่ภายในฟังก์ชัน init เท่านั้น นั่นทำให้เราไม่สามารถเข้าถึงค่าของตัวแปรภายในฟังก์ชันได้ นั่นเป็นเรื่องปกติ เราไม่ควรเข้าถึงค่าในฟังก์ชันจากภายนอก ถ้าหากเราต้องการเราสามารถส่งค่านั้นกลับออกมาจากฟังชันก์ได้

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

ในบทนี้ คุณได้รู้ว่าตัวแปรคืออะไร เราได้พูดถึงการประกาศและใช้งานตัวแปรในภาษา JavaScript รวมถึงการทำงานของตัวแปรเมื่อค่าที่เก็บเป็นออบเจ็ค และสุดท้ายคุณได้รู้จักกับขอบเบตของตัวแปรในภาษา JavaScript