Arrays

`join()` คืออะไร — รวม elements เป็น string โดยไม่เปลี่ยนต้นฉบับ

join() เป็น method ใน array ใช้รวม (join) ทุก element ใน array เข้าด้วยกันเป็น string เส้นเดียว — คั่นด้วย separator ที่เรากำหนด และคืนค่า (return) เป็น string โดยไม่เปลี่ยน array ต้นฉบับ สิ่งที่ต้องรู้: • คืนค่า (return) เป็น string — ไม่ใช่ array • ไม่เปลี่ยน array ต้นฉบับ — array เดิมยังคงเหมือนเดิม • ถ้าไม่ระบุ separator — default คือ comma (",") • separator จะวางระหว่าง elements เท่านั้น — ไม่มี separator หน้า element แรกและหลัง element สุดท้าย • join() แตกต่างจาก concat() ตรงที่ concat() return array — join() return string

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

// join() โดยไม่ระบุ separator → comma
const result = fruits.join();

console.log(result);  // "แอปเปิ้ล,กล้วย,ส้ม" ← string
console.log(fruits);  // ["แอปเปิ้ล", "กล้วย", "ส้ม"] ← ต้นฉบับไม่เปลี่ยน ✓

// เช็ก type — join() return string ไม่ใช่ array
console.log(typeof result);     // "string"
console.log(Array.isArray(result)); // false

จุดสำคัญจากตัวอย่าง: fruits ยังคงเหมือนเดิม — join() ไม่ mutate array ต้นฉบับเลย เช่นเดียวกับ concat() แต่ผลลัพธ์เป็น string ไม่ใช่ array ความแตกต่างตรงนี้สำคัญมาก: concat() ใช้รวม array → ได้ array ใหม่ / join() ใช้รวม elements → ได้ string

join() เปลี่ยน array (object) → string — separator วางระหว่าง elements เท่านั้น ไม่มีหัวหรือท้าย

กฎการเลือกใช้: • ต้องการรวมหลาย array และได้ผลลัพธ์เป็น array → concat() • ต้องการรวม elements ใน array 1 ตัวให้เป็น string → join() • join() ใช้ประโยชน์มากเวลาต้องการแสดงผล array เป็นข้อความที่อ่านง่าย เช่น แสดงรายการสินค้า แสดง tags หรือสร้าง CSV

กำหนด separator เอง — ใช้ separator แบบไหนก็ได้

join() รับ argument ได้ 1 ตัว คือ separator — เป็น string อะไรก็ได้ (รวมถึง string ว่าง "") กฎของ separator: • separator ที่เราส่งเข้าไปจะถูกแทรกระหว่าง elements แต่ละคู่ — ไม่มีหน้าแรกและหลังสุดท้าย • ถ้าไม่ส่งอะไรเลย — default เป็น "," • separator ยาวหรือสั้นแค่ไหนก็ได้ — " | ", " -> ", "\n" ใช้ได้หมด

const items = ["ปากกา", "สมุด", "ยางลบ"];

// === separator: ขีดกลาง
console.log(items.join(" - "));
// "ปากกา - สมุด - ยางลบ"

// === separator: เว้นวรรค
console.log(items.join(" "));
// "ปากกา สมุด ยางลบ"

// === separator: slash (ใช้สร้าง path)
console.log(items.join("/"));
// "ปากกา/สมุด/ยางลบ"

// === separator: string ว่าง — elements ต่อกันโดยไม่มีอะไรคั่น
console.log(items.join(""));
// "ปากกาสมุดยางลบ"

// === separator: หลายตัวอักษร
console.log(items.join(" -> "));
// "ปากกา -> สมุด -> ยางลบ"

เลือก separator ให้เหมาะกับงาน: • "\n" — แสดง element ทีละบรรทัด • ", " — comma+space อ่านง่ายกว่า comma เฉย ๆ • "" — ต่อ element โดยไม่มีช่องว่าง (เช่นสร้าง username จากชื่อ-นามสกุล) • " | " — คั่นด้วย pipe อ่านง่าย มักใช้ใน UI

// === สร้าง path จากส่วนประกอบ
const segments = ["home", "user", "documents"];
const path = segments.join("/");
console.log(path); // "home/user/documents"

// === สร้าง tag list ที่อ่านง่าย
const tags = ["javascript", "array", "method"];
const display = tags.join(", ");
console.log(display); // "javascript, array, method"

// === สร้างบรรทัดข้อความ (ใช้ \n)
const lines = ["บรรทัดที่ 1", "บรรทัดที่ 2", "บรรทัดที่ 3"];
console.log(lines.join("\n"));
// บรรทัดที่ 1
// บรรทัดที่ 2
// บรรทัดที่ 3

`join()` กับ array พิเศษ — empty array, single element, null/undefined

join() มีพฤติกรรมกับ array ในกรณีพิเศษที่ควรรู้ไว้ เพราะถ้าไม่รู้ล่วงหน้าอาจทำให้ผลลัพธ์ไม่ตรงกับที่คิด กรณีที่ควรรู้: • Empty array `[]` — ได้ string ว่าง "" เสมอ (ไม่มี separator เพราะไม่มี element ให้คั่น) • Single element `["hello"]` — ได้ element นั้นเป็น string เลย โดยไม่มี separator (ไม่มี element อีกตัวให้คั่น) • null / undefined — ถูกแปลงเป็น string ว่าง "" เมื่อ join (ไม่ขึ้นเป็นคำว่า "null" หรือ "undefined")

// === empty array → ""
console.log([].join());        // "" — ไม่มี element
console.log([].join(" - "));   // "" — separator ก็ไม่โผล่

// === single element → element นั้นโดยไม่มี separator
console.log(["hello"].join());     // "hello"
console.log(["hello"].join(" - ")); // "hello" — ไม่มี separator เพราะมี element เดียว

// === null / undefined → string ว่าง
console.log([null, undefined].join());
// "," — null กับ undefined กลายเป็น "" เหลือแต่ comma

console.log([null, "ok", undefined].join(" - "));
// " - ok - " — null กับ undefined กลายเป็นช่องว่าง

สรุปกฎ edge cases: • Empty array → "" เสมอ ไม่ว่า separator จะเป็นอะไร • Single element → element นั้นเป็น string โดยไม่มี separator • null → "" (string ว่าง) • undefined → "" (string ว่าง) จำง่าย ๆ: join() จะใส่ separator "ระหว่าง" elements เท่านั้น — ถ้าไม่มี element ให้คั่น (0 หรือ 1 ตัว) separator ก็จะไม่ปรากฏ

ใช้ `join()` ในสถานการณ์จริง

join() เป็นหนึ่งใน method ที่ใช้บ่อยมากในงานจริง เพราะการแสดงข้อมูลเป็นข้อความเป็นสิ่งที่ต้องทำตลอดเวลา ไม่ว่าจะเป็น UI, log, API หรือ format ข้อมูล ตัวอย่างสถานการณ์ที่ใช้ join(): • สร้างข้อความแสดงรายการสินค้าในตะกร้า (cart) • ต่อ path จากส่วนประกอบของ URL หรือ file system • เปลี่ยน array ของ tags/categories เป็น string เพื่อแสดงผล • สร้าง CSV (comma-separated values) จากข้อมูล • ต่อคำหรือสร้างประโยคจาก array ของคำ

// === แสดงราคาสินค้าพร้อมสกุลเงิน
const prices = [99, 199, 299];
const display = prices.join(" บาท, ") + " บาท";
console.log(display);
// "99 บาท, 199 บาท, 299 บาท"

// === สร้าง breadcrumb
const crumbs = ["Home", "Products", "Laptops"];
const breadcrumb = crumbs.join(" > ");
console.log(breadcrumb);
// "Home > Products > Laptops"

// === สร้าง CSV จากข้อมูล
const fields = ["Name", "Age", "City"];
const csv = fields.join(",");
console.log(csv);
// "Name,Age,City"

// === รวม tags จากหลายที่แล้วแสดงผล
const userTags = ["javascript", "react"];
const postTags = ["array", "method"];

// ใช้ concat รวม tags → แล้ว join แสดงผล
const allTags = userTags.concat(postTags);
const tagDisplay = allTags.join(", ");
console.log(tagDisplay);
// "javascript, react, array, method"

// === สร้าง URL query string
const params = ["page=1", "sort=name", "order=asc"];
const queryString = "?" + params.join("&");
console.log(queryString);
// "?page=1&sort=name&order=asc"

// === ใช้ join() กับ array เปล่า → ได้ "" (ปลอดภัย ไม่ error)
const empty = [];
const result = empty.join(" - ");
console.log(result); // ""

join() ทำงานได้ดีร่วมกับ method อื่น ๆ ที่เราเรียนไปแล้ว: • concat() รวม array ก่อน → join() แสดงผลเป็น string • push() เพิ่ม element → join() เปลี่ยนเป็นข้อความ • includes() เช็กว่ามีค่าบางอย่างก่อน → join() สร้างข้อความ วิธีคิด: array method ทำงานกับข้อมูลใน array → join() เป็นตัวจบที่เปลี่ยน array ให้เป็น string พร้อมแสดงผล

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

• join() return string — ไม่ใช่ array — มือใหม่ที่คุ้นกับ concat() มักลืมและพยายามใช้ array method ต่อท้าย join() เช่น `arr.join().push(...)` → error เพราะผลลัพธ์เป็น string ไม่ใช่ array
• separator อยู่ระหว่าง elements เท่านั้น — ไม่มี separator หน้า element แรกหรือหลัง element สุดท้าย — ถ้าต้องการ separator หน้าแรกต้องเติมเอง `"#" + tags.join(" #")`
• join() ไม่ mutate ต้นฉบับ — `arr.join()` ต้อง capture return `const result = arr.join()` — มือใหม่มักเขียน `arr.join()` แล้วคิดว่า arr เปลี่ยนเป็น string ไปแล้ว
• join() กับ empty array → ได้ "" เสมอ ไม่ใช่ separator — `[].join("-")` → "" ไม่ใช่ "-"
• null / undefined กลายเป็น string ว่าง — `[null, undefined].join(" - ")` → " - " — มือใหม่มักคาดหวังเห็นคำว่า null หรือ undefined ในผลลัพธ์
• join() กับ single element → ไม่มี separator — `["hello"].join(" - ")` → "hello" ไม่ใช่ "hello - " — เพราะไม่มี element ที่สองให้คั่น

Lab 1: ใช้ `join()` — default separator และตรวจสอบ type

Lab 2: ใช้ `join()` — เปลี่ยน separator แบบต่าง ๆ

Lab 3: ใช้ `join()` ในสถานการณ์จริง — สร้าง breadcrumb และ path

Lab 4: Edge cases — empty array, element เดียว, null/undefined

Lab 5: สร้างข้อมูล CSV ด้วย `join()`

Lab 6: สร้าง URL path ด้วย `join('/')`