variable && function () /JavaScript
The relationship between variables and functions in JavaScript is an important basis of programming. It can be summarized mainly as follows:
1. Using a variable to store the value of a function
In JavaScript, a function is a type of object (First-Class Functions). This means that it can be treated as an object or other value. This allows us to use variables to store the value of the function:
JavaScript
/ / The variable 'myFunction' stores a value that is a function.
const myFunction = function (a, b) {
return a + b;
};
/ / A function can be called through a variable.
Let result = myFunction (5, 3); / / result is 8
Benefits: Assigning a function to a variable allows a function to be sent as an argument to another function (Callbacks) or returned a function from another function (Higher-Order Functions).
2.Function uses variable (Scope)
Variables are closely related to functions through the concept of Scope:
A. Variables within a function (Local Variables)
Variables declared within a function are accessed only in that function (Local Scope) and are recreated every time the function is invoked.
JavaScript
Function calculated (x) {
/ / The variable 'y' is a variable within the function.
const y = 10;
return x + y;
}
/ / console.log (y); / / Error: y is not defined
B. External Function Variables (Global / Outer Scope Variables)
The function can access variables declared outside the function (Lexical Scope).
JavaScript
Const taxRate = 0.07; / / External variable
Function calculateTax (price) {
/ / The function can access' taxRate '.
return price * taxRate;
}
Closure: This is the most powerful relationship, when the function "remembers" and continues to access variables from the created boundary, even if the boundary has already been completed.
3.The variable is the argument and the value returned.
The function uses variables to receive input and output information:
Arguments: The variable used to receive the value sent into the function.
Return Value: The function uses the return command to send a value (which is a value stored in a variable or as a constant) back to the executed code.
JavaScript
The functions multiply (num1, num2) {/ / num1 and num2 are argument variables.
const product = num1 * num2; / / 'product' is an internal variable
Return product; / / Send back the value stored in 'product'
}
const finalAnswer = multiply (4, 5); / / 'finalAnswer' stores the returned value
หลายคนเริ่มเรียน 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 ได้ไวสุดครับ














































































































