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