ตัวแปรระดับโลกและพารามิเตอร์ของฟังก์ชันใน JavaScript

สมมติว่าเรามีฟังก์ชันที่รับพารามิเตอร์เป็น ตัวเลข:

javascriptfunction func(localNum) {
  console.log(localNum);
}

สมมติว่าภายนอกฟังก์ชันมีตัวแปร num:

javascriptfunction func(localNum) {
  console.log(localNum);
}

let num = 1; // ตัวแปรระดับภายนอก (global)

ลองเรียกใช้ฟังก์ชันของเรา โดยส่ง ตัวแปร num เป็นพารามิเตอร์:

javascriptfunction func(localNum) {
  console.log(localNum);
}

let num = 1;
func(num); // เรียกใช้ฟังก์ชันพร้อมพารามิเตอร์ จะแสดงผล 1

ผลลัพธ์ที่ได้คือภายในฟังก์ชันจะสามารถเข้าถึงได้ทั้ง ตัวแปร localNum (พารามิเตอร์ ของฟังก์ชัน) และตัวแปร num (เป็น ตัวแปรภายนอก):

javascriptfunction func(localNum) {
  console.log(num); // จะแสดงผล 1
  console.log(localNum); // จะแสดงผล 1
}

let num = 1;
func(num);

ตัวแปร localNum เองจะเป็นตัวแปรท้องถิ่น (local) ของฟังก์ชันและจะไม่สามารถเข้าถึงได้จากภายนอก:

javascriptfunction func(localNum) {
  
}

let num = 1;
func(num); // เรียกใช้ฟังก์ชันพร้อมพารามิเตอร์
console.log(localNum); // จะเกิดข้อผิดพลาด

เนื่องจากตัวแปร localNum เป็นตัวแปรท้องถิ่น การเปลี่ยนแปลงใดๆ กับมันจะไม่ส่งผลกระทบต่อภายนอก:

javascriptfunction func(localNum) {
  localNum = 2; // ไม่มีการเปลี่ยนแปลงใดๆ ภายนอก
}

let num = 1;
func(num);

แต่ถ้าเราเปลี่ยนตัวแปร num (ตัวแปรระดับโลก) ภายใน การเปลี่ยนแปลงจะปรากฏภายนอกด้วย:

javascriptfunction func(localNum) {
  num = 2;
}

let num = 1;
func(num);
console.log(num); // จะแสดงผล 2

อย่างไรก็ตาม หากประกาศตัวแปร num ภายในฟังก์ชันผ่านคำสั่ง let เราจะสร้างตัวแปรท้องถิ่น num ที่ไม่ส่งผลต่อตัวแปรภายนอก:

javascriptfunction func(localNum) {
  let num = 2; // ประกาศผ่าน let
}

let num = 1;
func(num);
console.log(num); // จะแสดงผล 1 - ไม่มีอะไรเปลี่ยนแปลง

javascriptfunction func(localNum) {
  console.log(localNum);
}

func(1);

javascriptfunction func(localNum) {
  console.log(localNum);
}

let num = 1;
func(num);

javascriptfunction func(localNum) {
  console.log(localNum);
}

let num = 1;
func(num);
num = 2;

javascriptlet num = 1;

function func(localNum) {
  console.log(localNum);
}

num = 2;
func(num);

javascriptfunction func(localNum) {
  localNum = 2;
}

let num = 1;
func(num);
console.log(num);

javascriptfunction func(localNum) {
  num = 2;
}

let num = 1;
func(num);
console.log(num);

javascriptfunction func(localNum) {
  let num = 2;
}

let num = 1;
func(num);
console.log(num);