Arrays

Index คือเลขตำแหน่งของข้อมูลใน Array

เมื่อเราเก็บข้อมูลหลายค่าไว้ใน array เราจะเข้าถึงแต่ละค่าได้ด้วย **index** index คือเลขตำแหน่งของ element ใน array และ JavaScript เริ่มนับที่ `0` เสมอ ดังนั้นตัวแรกคือ index `0` ตัวที่สองคือ index `1`

เวลาอ่านค่าจาก array ให้คิดว่า index คือเลขช่องของข้อมูล โดยช่องแรกเริ่มที่ 0 ไม่ใช่ 1

const fruits = ["แอปเปิ้ล", "กล้วย", "ส้ม"];
//              index: 0         1        2

console.log(fruits[0]); // "แอปเปิ้ล"
console.log(fruits[1]); // "กล้วย"
console.log(fruits[2]); // "ส้ม"

ถ้า array มี 3 ค่า index ที่ใช้ได้คือ `0`, `1`, `2` ไม่ใช่ `1`, `2`, `3` นี่เป็นจุดที่มือใหม่พลาดบ่อยที่สุด

อ่านค่าด้วย `arr[index]`

รูปแบบมาตรฐานในการอ่านค่าจาก array คือ `arr[index]` เราเรียกวิธีนี้ว่า **bracket notation** ในวงเล็บไม่จำเป็นต้องเป็นเลขที่พิมพ์ตรง ๆ เสมอไป ขอแค่ผลลัพธ์สุดท้ายเป็นตัวเลขตำแหน่งที่ต้องการ

const colors = ["แดง", "เขียว", "น้ำเงิน", "เหลือง"];

const first = colors[0];
const third = colors[2];

console.log(first); // "แดง"
console.log(third); // "น้ำเงิน"

เวลาพูดว่า element ตัวที่ 3 ให้แปลงเป็น index `2` ในหัวเสมอ เพราะ index นับจาก 0

ใช้ expression และ `length - 1` เพื่ออ่านค่าที่ตำแหน่งสัมพันธ์กัน

ถ้าเราไม่อยากนับ index เอง เราใช้ expression คำนวณตำแหน่งได้ เช่น `arr.length - 1` สำหรับตัวสุดท้าย ในบทนี้ให้มอง `length` เป็นแค่จำนวนสมาชิกของ array ก่อน ส่วนพฤติกรรมเชิงลึกของ `.length` เราจะเจาะอีกบทหนึ่ง

const scores = [85, 92, 78, 95, 88];
const pos = 1;

console.log(scores[pos]); // 92
console.log(scores[pos + 2]); // 95
console.log(scores[scores.length - 1]); // 88
console.log(scores[scores.length - 2]); // 95

รูปแบบ `arr[arr.length - 1]` ใช้บ่อยมาก เพราะช่วยให้เราอ่านค่าตัวท้ายได้โดยไม่ต้องรู้ล่วงหน้าว่า array ยาวเท่าไร

ถ้า index ไม่ถูกต้อง JavaScript จะได้ `undefined`

ถ้าเราอ่านค่าด้วย index ที่ไม่มีอยู่จริง JavaScript จะคืน `undefined` แทนการ error ทันที และอีกเรื่องที่ต้องจำคือ JavaScript ไม่รองรับการใช้ index ติดลบแบบภาษาบางตัว ดังนั้น `arr[-1]` ไม่ได้หมายถึงตัวสุดท้าย

const items = ["ดินสอ", "ปากกา", "สมุด"];

console.log(items[5]); // undefined
console.log(items[-1]); // undefined
console.log(items[items.length - 1]); // "สมุด"

const items = ["ดินสอ", "ปากกา", "สมุด"];
const idx = 5;

const safeItem = idx < items.length ? items[idx] : "ไม่มีรายการนี้";
console.log(safeItem); // "ไม่มีรายการนี้"

ถ้า index มาจาก input ของผู้ใช้หรือมาจากการคำนวณ ควรเช็กขอบเขตก่อนอ่านค่าเพื่อป้องกัน bug เงียบ ๆ จาก `undefined`

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

• นับตำแหน่งแบบมนุษย์แล้วลืมแปลงเป็น index ที่เริ่มจาก 0
• คิดว่า `arr[-1]` คือค่าตัวสุดท้าย ทั้งที่ใน JavaScript จะได้ `undefined`
• ใช้เลข index ตรง ๆ ทั้งที่ array อาจยาวไม่เท่ากัน ควรใช้ `arr.length - 1` เมื่อต้องการตัวท้าย
• ลืมเช็กขอบเขตก่อนอ่าน เมื่อตำแหน่งมาจากตัวแปรหรือการคำนวณ

Lab 1: อ่านค่าด้วย index แบบตรง

Lab 2: อ่านค่าจากท้าย array ด้วย `length - 1`

Lab 3: ใช้ตัวแปรและ expression เป็น index

Lab 4: รับมือ index นอกขอบเขตอย่างปลอดภัย