variable && function () /JavaScript
ความสัมพันธ์ระหว่าง ตัวแปร (Variables) และ ฟังก์ชัน (Functions) ใน JavaScript เป็นพื้นฐานที่สำคัญของการเขียนโปรแกรม โดยหลัก ๆ สามารถสรุปได้ดังนี้:
1. การใช้ตัวแปรเพื่อเก็บค่าของฟังก์ชัน
ใน JavaScript, ฟังก์ชันเป็นออบเจกต์ประเภทหนึ่ง (First-Class Functions) ซึ่งหมายความว่าสามารถปฏิบัติกับฟังก์ชันได้เหมือนกับออบเจกต์หรือค่าอื่น ๆ สิ่งนี้ทำให้เราสามารถใช้ ตัวแปร เพื่อเก็บค่าของฟังก์ชันได้:
JavaScript
// ตัวแปร 'myFunction' เก็บค่าที่เป็นฟังก์ชัน
const myFunction = function(a, b) {
return a + b;
};
// สามารถเรียกใช้ฟังก์ชันผ่านตัวแปรได้
let result = myFunction(5, 3); // result คือ 8
ประโยชน์: การกำหนดฟังก์ชันให้กับตัวแปรช่วยให้สามารถส่งฟังก์ชันเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่น (Callbacks) หรือส่งคืนฟังก์ชันจากฟังก์ชันอื่น (Higher-Order Functions) ได้
2. ฟังก์ชันใช้ตัวแปร (Scope)
ตัวแปรมีความสัมพันธ์อย่างใกล้ชิดกับฟังก์ชันผ่านแนวคิดของ ขอบเขต (Scope):
A. ตัวแปรภายในฟังก์ชัน (Local Variables)
ตัวแปรที่ประกาศภายในฟังก์ชันจะเข้าถึงได้เฉพาะในฟังก์ชันนั้นเท่านั ้น (Local Scope) และจะถูกสร้างขึ้นใหม่ทุกครั้งที่ฟังก์ชันถูกเรียกใช้
JavaScript
function calculate(x) {
// ตัวแปร 'y' เป็นตัวแปรภายในฟังก์ชัน
const y = 10;
return x + y;
}
// console.log(y); // Error: y is not defined
B. ตัวแปรภายนอกฟังก์ชัน (Global/Outer Scope Variables)
ฟังก์ชันสามารถเข้าถึงตัวแปรที่ประกาศภายนอกฟังก์ชันได้ (Lexical Scope)
JavaScript
const taxRate = 0.07; // ตัวแปรภายนอก
function calculateTax(price) {
// ฟังก์ชันสามารถเข้าถึง 'taxRate' ได้
return price * taxRate;
}
Closure: นี่คือความสัมพันธ์ที่ทรงพลังที่สุด เมื่อฟังก์ชัน "จดจำ" และยังคงเข้าถึงตัวแปรจากขอบเขตที่ถูกสร้างขึ้น แม้ว่าขอบเขตนั้นจะทำงานเสร็จไปแล้ว
3. ตัวแปรเป็นอาร์กิวเมนต์และค่าที่ส่งคืน
ฟังก์ชันใช้ตัวแปรเพื่อรับข้อมูลเข้าและส่งข้อมูลออก:
อาร์กิวเมนต์ (Arguments): ตัวแปรที่ใช้รับค่าที่ส่งเข้ามาในฟังก์ชัน
ค่าที่ส่งคืน (Return Value): ฟังก์ชันใช้คำสั่ง return เพื่อส่งค่า (ซึ่งเป็นค่าที่เก็บในตัวแปรหรือเป็นค่าคงที่) กลับไปยังโค้ดที่เรียกใช้
JavaScript
function multiply(num1, num2) { // num1 และ num2 เป็นตัวแปรอาร์กิวเมนต์
const product = num1 * num2; // 'product' เป็นตัวแปรภายใน
return product; // ส่งค่าที่เก็บใน 'product' กลับไป
}
const finalAnswer = multiply(4, 5); // 'finalAnswer' เก็บค่าที่ส่งคืนมา
หลายคนเริ่มเรียน JavaScript แล้วติดอยู่ 2 คำนี้เหมือนกัน: “const คืออะไร” และ “อาร์กิวเมนต์คืออะไร” เลยขอสรุปแบบที่ผมใช้ทำงานจริงให้เข้าใจเร็วขึ้น 1) const คืออะไร? const เป็นคีย์เวิร์ดสำหรับ “ประกาศตัวแปรที่ห้ามเปลี่ยนค่าอ้างอิง (reassign) ใหม่” พูดง่าย ๆ คือประกาศแล้ว “เอาตัวแปรไปชี้ค่าใหม่ไม่ได้” เช่น const taxRate = 0.07; // taxRate = 0.1; // จะ error เพราะเปลี่ยนค่าที่ผูกไว้ไม่ได้ สิ่งที่มือใหม่สับสนบ่อย: const ไม่ได้แปลว่า “ค่าข้างในเปลี่ยนไม่ได้เสมอไป” ถ้า const เก็บเป็น object/array เราแก้ไข “ภายใน” ได้ เพราะตัวที่ห้ามเปลี่ยนคือ “ตัวอ้างอิง” ไม่ใช่ข้อมูลข้างใน const user = { name: "A" }; user.name = "B"; // ทำได้ // user = { name: "C" }; // ทำไม่ได้ (reassign) แล้วทำไมคนชอบใช้ const? - โค้ดอ่านง่าย: เห็นปุ๊บรู้ว่าไม่ควรตั้งใจเปลี่ยนไปมา - ลดบั๊กจากการเผลอ reassign - เหมาะมากกับการประกาศฟังก์ชันแบบเก็บในตัวแปร const myFunction = function(a, b) { return a + b; }; 2) const ใช้กับ scope ยังไง? const เป็น block scope (อยู่ในวงเล็บปีกกา { } ) คล้าย let ถ้าประกาศในฟังก์ชันก็จะเป็นตัวแปรภายในฟังก์ชัน (local) เช่นตัวอย่างที่เจอบ่อย: function calculate(x) { const y = 10; // ตัวแปร 'y' เป็นตัวแปรภายในฟังก์ชัน return x + y; } // console.log(y); // Error: y is not defined 3) อาร์กิวเมนต์ (Arguments) คืออะไร? อาร์กิวเมนต์คือ “ค่าที่ส่งเข้าไปตอนเรียกฟังก์ชัน” ส่วนตัวแปรที่รับค่าด้านในวงเล็บของฟังก์ชัน เรามักเรียกว่า parameter (พารามิเตอร์) แต่ในชีวิตจริงหลายคนเรียกรวม ๆ ว่าอาร์กิวเมนต์เหมือนกัน function multiply(num1, num2) { // num1, num2 = parameters return num1 * num2; } multiply(4, 5); // 4 และ 5 = arguments ทริคที่ช่วยจำ: - เขียนฟังก์ชัน: (ตัวรับ) = parameters - เรียกใช้ฟังก์ชัน: (ตัวส่ง) = arguments 4) ข้อควรระวังที่เจอบ่อย - ลืม return: ฟังก์ชันจะได้ค่า undefined - ส่ง argument ไม่ครบ: ค่าที่หายไปจะเป็น undefined ทำให้คำนวณเพี้ยน - ใช้ const แล้วคิดว่าแก้ array/object ไม่ได้: จริง ๆ แก้ได้ แต่ห้าม reassign ถ้าอ่านถึงตรงนี้แล้วลองไล่โค้ดทีละบรรทัด จะเริ่มเห็นความสัมพันธ์ของ “ตัวแปร (variables) + ฟังก์ชัน (functions) + scope + arguments” ชัดขึ้นมาก และจะช่วยลด error แนว y is not defined ได้ไวสุดครับ
