Arrays + Objects

เก็บอายุคนเดียว ใช้ let age = 22 ก็พอ แต่ถ้าจะเก็บอายุ 50 คน ในห้องเรียนล่ะ จะสร้าง 50 ตัวแปรไหวไหม

JS มีโครงสร้างข้อมูล 2 ตัวที่แก้ปัญหานี้ คือ array (รายการที่มีลำดับ) กับ object (กลุ่มข้อมูลที่มี label) ทั้ง 2 ตัวนี้ใช้ทุกที่ในโค้ด JS

Array รายการที่มีลำดับ

Array สร้างด้วยวงเล็บเหลี่ยม [ ] เก็บได้หลายค่า มีลำดับ มี index เริ่มที่ 0

const fruits = ["apple", "banana", "cherry"]

fruits[0]        // "apple"     ← index แรกคือ 0 ไม่ใช่ 1
fruits[2]        // "cherry"
fruits[10]       // undefined   ← เกิน length ไม่ error แค่ undefined
fruits.length    // 3

Array operations พื้นฐาน

4 method ที่ต้องรู้คือ push, pop (ทำที่ท้าย), unshift, shift (ทำที่หัว) ลองกดปุ่มดู

const arr = ["A", "B", "C"]
// เริ่มต้น: arr = ['A', 'B', 'C']

Object กลุ่มข้อมูลที่มี label

Object สร้างด้วยวงเล็บปีกกา { } เก็บข้อมูลเป็นคู่ key: value ไม่มีลำดับ (ไม่ต้องสนใจลำดับ) เข้าถึงด้วย key ไม่ใช่ index

const user = {
  name: "Top",
  age: 22,
  isStudent: true
}

user.name         // "Top"
user.age          // 22
user["name"]      // "Top"  ← bracket notation ก็ได้

Nested object คือ object ใน object

Object เก็บ value ได้ทุก type รวมทั้ง object หรือ array ที่ซ้อนเข้าไปอีก ใช้ chain dot ลึกๆ ได้

const user = {
  name: "Top",
  age: 22,
  isStudent: true,
  address: {
    street: "Sukhumvit",
    city: "Bangkok",
    zip: "10110"
  },
  hobbies: ["coding", "music", "running"]
}

เพิ่ม / แก้ / ลบ property ของ object

const user = { name: "Top", age: 22 }

user.email = "[email protected]"   // เพิ่ม email
user.age = 23                 // แก้ age
delete user.age               // ลบ age

// ตรวจว่ามี key ไหม
"name" in user                // true
"phone" in user               // false
user.phone === undefined      // true (เหมือนกัน)

Destructuring ดึง property ออกมาเป็น variable

แทนที่จะเขียน user.name, user.age ทุกที่ destructure ดึงออกมาทีเดียว

const user = { name: "Top", age: 22, city: "Bangkok" }

// แทนที่จะเขียน
const name = user.name
const age = user.age

// destructure ทีเดียว
const { name, age } = user

// rename ตอนดึงก็ได้
const { name: userName } = user   // userName = "Top"

// default value
const { phone = "ไม่มี" } = user   // phone = "ไม่มี"

Array ก็ destructure ได้ แต่ใช้ตำแหน่ง (index) ไม่ใช่ key

const colors = ["red", "green", "blue"]

const [first, second, third] = colors
// first = "red", second = "green", third = "blue"

// ข้ามตัวกลางได้
const [, , last] = colors   // last = "blue"

Spread ... กระจายและรวม

... 3 จุดใช้ กระจาย array หรือ object ออกมา หรือ รวม เข้าด้วยกัน เป็น feature ที่ใช้ทุกวัน

// copy array
const arr1 = [1, 2, 3]
const arr2 = [...arr1]            // [1, 2, 3] ตัวใหม่

// concat array
const merged = [...arr1, ...arr2, 4]   // [1, 2, 3, 1, 2, 3, 4]

// copy object
const user = { name: "Top", age: 22 }
const copy = { ...user }

// merge object key ที่ซ้ำตัวขวาทับซ้าย
const updated = { ...user, age: 23, city: "Bangkok" }
// { name: "Top", age: 23, city: "Bangkok" }

Array กับ Object ใช้อันไหน

• Array ใช้เมื่อ ลำดับสำคัญ และ items เป็นแบบเดียวกัน เช่น list ของ user, list ของ product
• Object ใช้เมื่อต้องการ label แต่ละ field และเก็บ หลาย type คละกัน เช่น 1 user มี name, age, email

ในโลกจริงใช้รวมกัน เช่น array ของ object users = [{ name, age }, { name, age }]

สรุป

• Array [ ] มีลำดับ index เริ่ม 0 ใช้ push/pop/shift/unshift
• Object { } เป็น key-value ใช้ dot notation หรือ bracket notation
• Nested ได้ ระวัง access undefined ใช้ ?. optional chaining
• Destructuring ดึง property ออกมาเป็น variable สั้นกว่า
• Spread ... กระจายหรือรวม ใช้ทุกวันใน React, Redux และที่อื่น
• const ห้าม reassign ตัวแปร แต่ไม่ห้ามแก้ของข้างใน object หรือ array

ประโยคสุดท้ายในสรุปคือ กับดักใหญ่ที่สุด ของ JS lesson ถัดไปจะอธิบายว่า ทำไมแก้ array ใน function แล้ว array ของ caller โดนแก้ด้วย เป็นเรื่องของ reference vs value