Arrays

`push()` คืออะไร — เพิ่ม element ต่อท้าย Array

push() เป็น method ใน array ใช้เพิ่ม element ต่อท้ายสุดของ array หนึ่ง element ขึ้นไป — มันเปลี่ยน (mutate) array ต้นฉบับโดยตรง ไม่ได้สร้าง array ใหม่ สิ่งสำคัญที่ต้องจำ: push() คืนค่า (return) เป็น length ใหม่ของ array — ไม่ใช่ตัว array เอง

const fruits = ["แอปเปิ้ล", "กล้วย"];

// push("ส้ม") → เพิ่ม "ส้ม" ต่อท้าย fruits
const newLength = fruits.push("ส้ม");

console.log(newLength);  // 3 ← return คือ length ใหม่ ไม่ใช่ array!
console.log(fruits);     // ["แอปเปิ้ล", "กล้วย", "ส้ม"]

จากตัวอย่าง: push("ส้ม") เพิ่ม "ส้ม" ที่ index 2 (ตำแหน่งท้ายสุด) แล้วคืนค่า 3 (length ใหม่) จุดสำคัญ: fruits เปลี่ยนไปแล้ว — push() mutate array ต้นฉบับ ไม่ได้สร้าง array ใหม่

const nums = [1, 2];

// push หลาย element ในครั้งเดียว
const len = nums.push(3, 4, 5, 6);

console.log(len);   // 6 ← length ใหม่ หลังเพิ่ม 4 ตัว
console.log(nums);  // [1, 2, 3, 4, 5, 6]

push() รับกี่ argument ก็ได้ — เราใส่ 3, 4, 5, 6 ได้พร้อมกัน ไม่ต้องเรียก push() ซ้ำ ๆ ทีละตัว ทุก element จะถูกเพิ่มต่อท้ายตามลำดับที่เราใส่ argument

push() เพิ่ม element ต่อท้ายสุดเสมอ — ดูด้านซ้ายของภาพ pop() ดึงตัวท้ายสุดออก — ดูด้านขวาของภาพ

`pop()` คืออะไร — ดึง element ท้ายสุดออก

pop() เป็น method ใน array ใช้ดึง element สุดท้ายออกจาก array — มันเปลี่ยน (mutate) array ต้นฉบับโดยตรง และคืนค่า (return) เป็น element ที่ถูกดึงออก แตกต่างจาก push() ตรงที่ pop() ไม่รับ argument และ return เป็น element ไม่ใช่ length

const stack = [10, 20, 30];

const removed = stack.pop();

console.log(removed);  // 30 ← return คือ element ที่ถูกดึงออก
console.log(stack);    // [10, 20] ← 30 หายไปแล้ว
console.log(stack.length); // 2

pop() ทำงานทีละ 1 element เสมอ — เรียกครั้งเดียวก็ดึงตัวท้ายสุดออก 1 ตัว ถ้าอยากดึงหลายตัวต้องเรียก pop() ซ้ำ ลองดูว่าเกิดอะไรขึ้นเมื่อเรา pop() จน array เปล่า

const items = ["A"];

const first = items.pop();
console.log(first);   // "A"
console.log(items);   // [] — array เปล่า
console.log(items.length); // 0

// pop() บน array เปล่า → ได้ undefined
const nothing = items.pop();
console.log(nothing);  // undefined ← ไม่ error แต่ได้ undefined
console.log(items);    // [] — ยังเป็น array เปล่าเหมือนเดิม

ข้อควรรู้: pop() บน array เปล่าได้ undefined — ไม่ throw error เพราะ JavaScript ออกแบบให้รองรับกรณีนี้ แต่ถ้าโค้ดของเราอาศัยว่า pop() ต้องคืนค่าจริงเสมอ อาจเกิด bug ได้

ใช้ `push()` และ `pop()` ร่วมกัน — Stack แบบ LIFO

push() กับ pop() มักใช้ด้วยกันเพื่อสร้าง stack — โครงสร้างข้อมูลที่เข้าก่อนออกทีหลัง (LIFO: Last In, First Out) คิดภาพเหมือนจานที่วางซ้อนกัน: • push = วางจานใบบนสุด • pop = หยิบจานใบบนสุดออก • จานที่วางทีหลังจะถูกหยิบก่อนเสมอ

const history = [];

history.push("เปิดโปรเจกต์");
history.push("แก้ไขโค้ด");
history.push("เซฟไฟล์");
// history = ["เปิดโปรเจกต์", "แก้ไขโค้ด", "เซฟไฟล์"]

// pop() 3 ครั้ง — จะได้ค่าเรียงกลับด้าน
const action3 = history.pop(); // "เซฟไฟล์" (push ทีหลังสุด → pop ก่อน)
const action2 = history.pop(); // "แก้ไขโค้ด"
const action1 = history.pop(); // "เปิดโปรเจกต์" (push ก่อนสุด → pop หลังสุด)

console.log(action3, action2, action1);
// "เซฟไฟล์", "แก้ไขโค้ด", "เปิดโปรเจกต์"
console.log(history); // [] — หมดแล้ว

stack ถูกใช้ในหลายสถานการณ์จริง เช่น: • Undo/Redo — เก็บประวัติการกระทำแล้ว pop() ย้อนกลับ • ตรวจสอบความถูกต้องของวงเล็บ — push วงเล็บเปิด pop วงเล็บปิด • Browser back/forward — เก็บประวัติหน้าเว็บเป็น stack วิธีคิดง่าย ๆ: ถ้าอยาก "เก็บบางอย่างไว้ แล้วเอาออกทีหลังแบบกลับลำดับ" → push + pop คือคำตอบ

จุดที่มือใหม่มักพลาด

push() และ pop() เป็น method ที่ใช้บ่อย แต่ก็มีจุดที่พลาดง่าย — ดูตารางเทียบ push vs pop ก่อน แล้วดูกับดักสำคัญ

• push() return length ไม่ใช่ array — มือใหม่มักเขียน arr.push(4).push(5) โดยคิดว่าจะ chain ได้ แต่ push(4) return เลข length ไม่ใช่ array ทำให้ .push(5) error
• pop() ไม่รับ argument — arr.pop(2) จะไม่ pop 2 ตัว (pop ดึงทีละ 1 ตัวเสมอ) argument ที่ใส่ไปจะถูกละทิ้ง
• ทั้ง push() และ pop() mutate array ต้นฉบับ — ถ้าต้องการเก็บค่าเดิมไว้ต้อง copy ก่อน เช่น const copy = arr.concat()

Lab 1: ใช้ `push()` เพิ่ม element ต่อท้าย

Lab 2: ใช้ `pop()` ดึง element ท้ายสุดออก

Lab 3: ใช้ `push()` + `pop()` สร้าง Stack

Lab 4: ค่า return ต่างกัน — `push()` ได้ length, `pop()` ได้ element

Lab 5: `pop()` array ว่าง — ผลลัพธ์คือ `undefined`

Lab 6: Stack — จำลองระบบประวัติ (undo)