Arrays

อัปเดตค่าด้วย `arr[index] = newValue`

ถ้า `arr[index]` ใช้สำหรับอ่านค่า รูปแบบเดียวกันนี้ก็ใช้สำหรับ **เปลี่ยนค่า** ได้เช่นกัน โดยเขียนไว้ทางซ้ายของ `=` แนวคิดคือเราเลือกช่องที่ต้องการ แล้วใส่ค่าชุดใหม่ลงไปในช่องนั้น

การอัปเดตด้วย index เปลี่ยนเฉพาะช่องที่เลือกไว้ ค่าอื่นใน array ยังอยู่เหมือนเดิม

const prices = [120, 250, 80, 300];

prices[0] = 150;
prices[2] = 100;

console.log(prices); // [150, 250, 100, 300]

เวลามี bug จากการอัปเดต array มักไม่ได้เกิดจาก syntax ผิด แต่เกิดจากเลือก index ผิดตำแหน่ง

อัปเดตตัวแรก ตัวกลาง และตัวท้ายให้เป็น

เราอัปเดตตำแหน่งไหนก็ได้ใน array ขอแค่รู้ตำแหน่งนั้นให้ถูกต้อง ถ้าต้องการตัวท้ายแบบไม่ต้องนับเอง ให้ใช้ `arr.length - 1`

const letters = ["a", "b", "c", "d"];

letters[0] = "A"; // ตัวแรก
letters[2] = "C"; // ตำแหน่งกลาง
letters[letters.length - 1] = "D"; // ตัวท้าย

console.log(letters); // ["A", "b", "C", "D"]

รูปแบบนี้เหมาะกับงานที่เรารู้ชัดว่าควรแก้ช่องไหน เช่น แทนสถานะบางตำแหน่ง หรือแก้ค่าตัวล่าสุดในรายการ

`const` array เปลี่ยน element ภายในได้

หลายคนงงว่า array ที่ประกาศด้วย `const` ทำไมยังแก้ค่าได้ คำตอบคือ `const` ล็อกตัวแปรไม่ให้ชี้ไปหา array ก้อนใหม่ แต่ไม่ได้ล็อกข้อมูลข้างใน array ดังนั้นเราเปลี่ยน element ภายในได้ แต่ห้ามเขียน `numbers = [...]` ใหม่ทั้งก้อน

const numbers = [10, 20, 30];

numbers[1] = 99; // ทำได้
console.log(numbers); // [10, 99, 30]

// numbers = [1, 2, 3]; // ทำไม่ได้

เวลาเจอ `const` ในบทนี้ ให้แปลว่า “เปลี่ยนสมาชิกข้างในได้ แต่เปลี่ยนทั้งก้อนไม่ได้”

Reference sharing ทำให้การอัปเดตกระทบหลายตัวแปรได้

ถ้าเราเขียน `const b = a` สำหรับ array ตัวแปรใหม่ไม่ได้ copy ข้อมูล แต่ชี้ไป array เดียวกัน ผลคือถ้าอัปเดตผ่าน `b` การเปลี่ยนแปลงจะสะท้อนใน `a` ด้วย

const a = [1, 2, 3];
const b = a;

b[0] = 99;
b[b.length - 1] = 77;

console.log(a); // [99, 2, 77]
console.log(b); // [99, 2, 77]
console.log(a === b); // true

นี่คือ side effect สำคัญของการอัปเดต array ถ้าเราเข้าใจช้า จะรู้สึกเหมือนค่าเปลี่ยนเองทั้งที่จริงเกิดจากทั้งสองตัวแปรชี้ object เดียวกัน

จุดที่มือใหม่มักพลาดเวลาอัปเดตค่า

• เลือก index ผิด เช่น ตั้งใจแก้ตัวที่ 3 แต่ไปเขียน index 3 แทน index 2
• นับตำแหน่งตัวท้ายเองทั้งที่ควรใช้ `arr.length - 1`
• เห็น `const` แล้วคิดว่า element ข้างในแก้ไม่ได้
• assign `const b = a` แล้วคิดว่าเป็นการ copy ทั้งที่จริงยังชี้ array เดียวกัน

Lab 1: อัปเดตตำแหน่งพื้นฐาน

Lab 2: อัปเดตตัวท้ายด้วย `length - 1`

Lab 3: อัปเดตด้วยตัวแปรและ index ที่คำนวณได้

Lab 4: สังเกต reference sharing หลังอัปเดต