ข้อผิดพลาดในการเปลี่ยนแปลงองค์ประกอบอาร์เรย์ใน JavaScript

ลองพิจารณาข้อผิดพลาดที่เกิดขึ้น เมื่อเปลี่ยนแปลงองค์ประกอบอาร์เรย์ อย่างไม่ถูกต้อง สมมติว่าเรามีอาร์เรย์ดังนี้:

let arr = [1, 2, 3, 4, 5];

สมมติว่าเรามีฟังก์ชัน ซึ่งรับพารามิเตอร์เป็นตัวเลข และคืนค่ากำลังสองของตัวเลขนั้น:

function func(num) {
	return num ** 2;
}

ลองใช้ลูป for-of วนผ่านอาร์เรย์ของเราและนำฟังก์ชันของเรา ไปใช้กับแต่ละองค์ประกอบ:

for (let elem of arr) {
	elem = func(elem);
}

ณ จุดนี้ผู้เริ่มต้นมักทำผิดพลาด ประเด็นคือการเปลี่ยนแปลงตัวแปร elem ไม่ทำให้องค์ประกอบ ในอาร์เรย์เองเปลี่ยนแปลง มาดูกัน:

console.log(arr); // อาร์เรย์ไม่เปลี่ยนแปลง

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

เพื่อแก้ปัญหา ต้องเปลี่ยนแปลง องค์ประกอบของอาร์เรย์โดยตรง:

for (let i = 0; i < arr.length; i++) {
	arr[i] = func(arr[i]);
}

console.log(arr); // ตอนนี้อาร์เรย์เปลี่ยนแปลงแล้ว