ค่าคงที่ ในภาษา JavaScript

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

• ค่าคงที่คืออะไร
• การประกาศค่าคงที่
• ตัวอย่างการใช้งานค่าคงที่
• Built-in ค่าคงที่ในภาษา JavaScript
• ค่าคงที่กับออบเจ็ค

ค่าคงที่คืออะไร

ในการเขียนโปรแกรมคอมพิวเตอร์ ค่าคงที่ (Constant) คือค่าไม่มีสามารถเปลี่ยนแปลงค่าได้หลังจากที่มันถูกประกาศและกำหนดค่าไปแล้ว ในภาษา JavaScript เราสามารถประกาศและกำหนดค่าคงที่ได้ในตอนที่โปรแกรมทำงาน (Run-time) นั่นหมายความว่าค่าของค่าคงสามารถกำหนดได้จากการคำนวณ เช่น Expression หรือการเรียกใช้งานฟังก์ชันได้

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

const NAME = value;

การประกาศจะคล้ายกับตัวแปร แต่สำหรับค่าคงที่นั้นเราจะใช้คำสั่ง const แทน โดยที่ NAME นั้นเป็นชื่อของค่าคงที่ ที่มีกฏการตั้งชื่อเหมือนกับตัวแปรที่สามารถประกอบไปด้วยตัวอักษร ตัวเลข และสัญลักษณ์ _ หรือ @ เท่านั้น

ชื่อของค่าคงที่มักจะใช้ตัวพิมพ์ใหญ่และหากมีหลายคำจะคั่นแต่ละคำด้วยเครื่องหมาย Underscore _ อย่างไรก็ตาม คุณสามารถตั้งชื่อมันเหมือนกับตัวแปรปกติได้

การประกาศค่าคงที่

นี่เป็นตัวอย่างการประกาศค่าคงที่ในภาษา JavaScript

const SITE_NAME = "marcuscode";
const YEAR = 2015;

ในตัวอย่าง เราได้ประกาศค่าคงที่สองตัวคือ SITE_NAME สำหรับเก็บชื่อของเว็บไซต์ และ YEAR สำหรับเก็บปีที่เว็บไซต์เปิดตัว

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

const MY_NAME = "Metin";
MY_NAME = "Haha";       // Error

const MY_CONSTANT;
MY_CONSTANT = 5;        // Error

นี่เป็นผลลัพธ์ที่จะได้รับเมื่อเรารันโปรแกรม

TypeError: Assignment to constant variable.
SyntaxError: Missing initializer in const declaration

ในตัวอย่าง เมื่อรันโปรแกรมจะทำให้เกิดข้อผิดพลาดขึ้น ในตัวแปรค่าคงที่ MY_NAME เราได้เปลี่ยนแปลงค่าของมันหลังกำหนดค่าไปแล้ว และในตัวแปร MY_CONSTANT นั้นเป็นการกำหนดค่าในภายหลัง ซึ่งไม่สามารถทำได้สำหรับค่าคงที่

ตัวอย่างการใช้งานค่าคงที่ในภาษา JavaScript

ในการเขียนเว็บไซต์ เรามักจะใช้ค่าคงที่สำหรับเก็บข้อมูลการตั้งค่าต่างๆ ของเว็บไซต์ ในตัวอย่างนี้ จะเป็นการสร้างหน้าเว็บไซต์ผ่านทาง Console มันอาจดูไม่สวยงาม แต่มันให้ข้อมูลได้ เนื่องจากเราแค่ต้องการแสดงตัวอย่างการใช้งานค่าคงที่ นี่เป็นโค้ดสำหรับแสดงเว็บไซต์ของเรา

const SITE_NAME = "MarcusCode";
const BASE_URL = "http://marcuscode.com/";
const COLOR_THEME = "blue";
const ALLOW_SIGNUP = true;

console.log("Welcome to " + SITE_NAME);

console.log("Latest tutorial from " + SITE_NAME);

let languages = ["JavaScript", "Python", "Ruby", "Java", "PHP"];
for (let i in languages) {
    let url = BASE_URL + "lang/" + languages[i].toLowerCase();
    console.log(`- ${languages[i]} programming (${url})`);
}

console.log("Footer");

let footer = ["About", "Privacy"];
for (let i in footer) {
    let url = BASE_URL + footer[i].toLowerCase();
    console.log(`- ${footer[i]} (${url})`);
}

if (ALLOW_SIGNUP) {
    console.log("[Sign up for new settle]");
}

console.log(`© ${new Date().getFullYear()} ${SITE_NAME}`);

และนี่เป็นผลลัพธ์การทำงานของโปรแกรม เราได้สร้างหน้าเว็บไซต์ขึ้นมาและแสดงมันออกมาทาง Console

Welcome to MarcusCode
Latest tutorial from MarcusCode
- JavaScript programming (http://marcuscode.com/lang/javascript)
- Python programming (http://marcuscode.com/lang/python)
- Ruby programming (http://marcuscode.com/lang/ruby)
- Java programming (http://marcuscode.com/lang/java)
- PHP programming (http://marcuscode.com/lang/php)
Footer
- About (http://marcuscode.com/about)
- Privacy (http://marcuscode.com/privacy)
[Sign up for new settle]
© 2020 MarcusCode

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

const SITE_NAME = "MarcusCode";

ในตัวแปรค่าคงที่ SITE_NAME ใช้สำหรับเก็บชื่อของเว็บไซต์ สังเกตว่าตัวแปรนี้ถูกใช้งานบ่อยมากในโปรแกรม ดังนั้นถ้าหากเรามีค่าบางอย่างที่ใช้บ่อยๆ และแน่ใจว่ามันจะไม่เปลี่ยนแปลงในขณะที่โปรแกรมทำงาน เราควรประกาศมันเป็นค่าคงที่

const BASE_URL = "http://marcuscode.com/";
...
let url = BASE_URL + "lang/" + languages[i].toLowerCase();
...
let url = BASE_URL + footer[i].toLowerCase();

ต่อมาตัวแปรค่าคงที่ BASE_URL เป็นตัวแปรที่ใช้สำหรับเก็บ URL หลักของเว็บไซต์ และอย่างที่คุณเห็นในคำสั่ง for loop เราได้ใช้มันวนอาเรย์และสร้าง URL ของบทความ ซึ่งเป็นหน้าที่อยู่อ้างอิงจาก BASE_URL

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

const COLOR_THEME = "blue";
const ALLOW_SIGNUP = true;

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

ค่าคงที่ Built-in ในภาษา JavaScript

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

console.log(Math.E);        // 2.718281828459045
console.log(Math.LOG10E);   // 0.4342944819032518
console.log(Math.SQRT2);    // 1.4142135623730951
console.log(Math.PI);       // 3.141592653589793

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

const UNIT = "cm";
let radius = 5;

let circum = 2 * Math.PI * radius;
let area = 2 * Math.PI * (radius ^ 2);
let volume = 4 / 3 * Math.PI * (radius ^ 3);

console.log("Circle radius: " + radius + " " + UNIT);
console.log("Circumference: " + circum + " " + UNIT);
console.log("Area: " + area + " square " + UNIT);
console.log("Volume: " + volume + " cubic " + UNIT);

ในตัวอย่าง เป็นโปรแกรมสำหรับคำนวณหาขนาดพื้นที่ ความยาวเส้นรอบวง และปริมาตรของวงกลม และเราได้ใช้ค่าคงที่สองตัวคือ Math.PI ซึ่งเป็นค่าคงที่ Built-in ใน ภาษา JavaSctipt และค่าคงที่ที่เราประกาศขึ้นมา UNIT สำหรับเก็บหน่วยของการคำนวณ

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

Circle radius: 5 cm
Circumference: 31.41592653589793 cm
Area: 43.982297150257104 square cm
Volume: 25.132741228718345 cubic cm

จะเห็นว่าการใช้ค่าคงที่ทำให้โค้ดของเราดูเป็นระเบียบและง่ายต่อการทำความเข้าใจ เนื่องมันสามารถแยกได้ง่ายว่าค่าตัวแปรไหนเป็นตัวแปรหรือค่าคงที่ และถ้าหากเราต้องการเปลี่ยนหน่วยเป็นหน่วยอื่น เช่น const UNIT = "meter" เราก็แค่เปลี่ยนมันในค่าคงที่

ค่าคงที่กับออบเจ็ค

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

const DATABASE_CONFIG = {
    HOST: "localhost",
    PORT: "3306",
    DB: "my_database",
    PASSWORD: "secret"
};

DATABASE_CONFIG.PASSWORD = "1234";
console.log(DATABASE_CONFIG);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม จะเห็นว่าค่าของรหัสผ่านสามารถเปลี่ยนได้ ถึงแม้ตัวแปรถูกประกาศด้วยคำสั่ง const

{
  HOST: 'localhost',
  PORT: '3306',
  DB: 'my_database',
  PASSWORD: '1234'
}

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

ดังนั้นโค้ดนี้จะทำให้เกิดข้อผิดพลาด เพราะเราพยายามกำหนดค่าใหม่ให้กับตัวแปรค่าคงที่ ซึ่งแน่นอนว่ามันชัดเจน เราไม่สามารถทำเช่นนี้ได้

DATABASE_CONFIG = "somethings"; // Error

อย่างไรก็ตาม มีวิธีที่ทำให้ Property ในออบเจ็คนั้นไม่สามารถเปลี่ยนแปลงค่าได้ หรือกล่าวอีกนัยหนึ่ง ทำให้มันเป็น Property ที่สามารถอ่านค่าได้อย่างเดียว (Read-only) ซึ่งมีสองวิธีดังนี้

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

const user = Object.freeze({
    id: 1,
    name: "Metin"
});

user.id = 123;     // Assignment ignored
console.log(user);

หลังจากนั้นเรารันโปรแกรม และพยายามเปลี่ยนค่าของ user.id เป็น 123 นี่จะไม่ทำให้เกิดข้อผิดพลาดขึ้น แต่โปรแกรมแค่ข้ามการทำงานของมันไป

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

{ id: 1, name: 'Metin' }

ในกรณีที่เราต้องการกำหนดให้แค่บาง Property เท่านั้นที่สามารถอ่านค่าได้อย่างเดียว เราสามารถใช้เมธอด Object.defineProperty เพื่อกำหนด Property ให้กับออบเจ็คได้ นี่เป็นตัวอย่าง

const user = {
    isAdmin: true
};
Object.defineProperty(user, 'id', {
    value: 1,
    writable: false,
    enumerable: true
});
Object.defineProperty(user, 'name', {
    value: "Metin",
    writable: true,
    enumerable: true
});

user.id = 123;       // Ignored
user.name = "METIN"; // Worked
console.log(user);   // { isAdmin: true, id: 1, name: 'METIN' }

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

{ isAdmin: true, id: 1, name: 'METIN' }

ในตัวอย่าง เราต้องการกำหนดให้แค่ Property id เท่านั้นที่ไม่สามารถเปลี่ยนแปลงค่าได้ ดังนั้นเราใช้เมธอด Object.defineProperty เพื่อช่วยเราให้ทำเช่นนี้ได้

Object.defineProperty(user, 'id', {
    value: 1,
    writable: false,
    enumerable: true
});

เมธอด Object.defineProperty นั้นรับพารามิเตอร์สามตัวคือออบเจ็คเป้าหมาย ชื่อของ Property และสุดท้ายเป็นออบเจ็คเพื่อกำหนดตัวเลือกของ Property ดังกล่าว ซึ่งประกอบไปด้วย

• value: คือค่าของ Property ดังนั้น user.id จะมีค่าเท่ากับ 1
• writable: กำหนดว่าจะให้ Property สามารถเปลี่ยนแปลงค่าได้หรือไม่ กำหนดเป็น false เพื่อทำให้ id สามารถอ่านค่าได้อย่างเดียว
• enumerable: กำหนดว่าจะให้ Property สามารถวนซ้ำได้หรือไม่ ค่านี้ควรจะเป็น true เสมอสำหรับการใช้งานทั่วไป

const user = {
    isAdmin: true
};
...
Object.defineProperty(user, 'name', {
    value: "Metin",
    writable: true,
    enumerable: true
});

จากนั้นเรากำหนด Property name เพื่อให้มันสามารถเปลี่ยนแปลงค่าได้ โดยใช้ writable เป็น true ซึ่งเป็นค่าเริ่มต้นของการประกาศ Property เหมือนกับ Property isAdmin ที่กำหนดลงบนออบเจ็คโดยตรง

ในตัวอย่างของการใช้งานคำสั่ง const กับออบเจ็ค การที่ Property ไม่สามารถเปลี่ยนแปลงค่าได้ไม่ได้ถือว่ามันเป็นค่าคงที่ แต่มันเป็นความสามารถของออบเจ็คที่เราสามารถกำหนดคุณสมบัติให้กับ Property เพื่อไม่ให้มันเปลี่ยนแปลงค่าได้นั่นเอง

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