Arrays

Array คือกล่องเดียวที่เก็บข้อมูลเป็นรายการ

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

const fruit1 = "apple";
const fruit2 = "banana";
const fruit3 = "orange";

const fruits = ["apple", "banana", "orange"];

console.log(fruits);

ในบทนี้เราจะโฟกัสแค่การสร้าง array ให้คล่องก่อน ส่วนการหยิบค่าหรือเปลี่ยนค่าข้างใน จะไปเรียนในบทถัดไป

สร้าง Array ด้วย `[]` และคั่นค่าด้วย comma

รูปแบบพื้นฐานของ array คือเอาค่าหลายตัวมาใส่ใน square brackets `[]` แล้วคั่นแต่ละค่าด้วย comma ค่าที่อยู่ข้างในเรียงต่อกันเป็นรายการเดียวกัน ทำให้เราอ่านข้อมูลเป็นชุดได้ง่ายขึ้น

const colors = ["red", "green", "blue"];
const scores = [10, 20, 30];
const answers = [true, false, true];

console.log(colors);
console.log(scores);
console.log(answers);

ถ้าค่าที่เก็บเป็นข้อความให้ใส่ quote ให้ครบ แต่ถ้าเป็นตัวเลขหรือ boolean ก็เขียนเป็นค่าตรง ๆ ได้เลย

Array ว่างก็สร้างได้

บางครั้งเรายังไม่มีข้อมูลในตอนเริ่มต้น แต่รู้ว่าจะต้องเก็บข้อมูลเป็นรายการในภายหลัง กรณีนี้เราสร้าง array ว่างไว้ก่อนได้ด้วย `[]`

const emptyList = [];
const drinks = ["water", "tea", "coffee"];

console.log(emptyList);
console.log(drinks);

แนวคิดสำคัญคือ `[]` ยังถือว่าเป็น array เหมือนกัน เพียงแค่ตอนนี้ยังไม่มีข้อมูลอยู่ข้างใน

เริ่มต้นด้วย Array ที่เก็บข้อมูลชนิดเดียวกันจะอ่านง่ายกว่า

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

วิธีคิดง่าย ๆ คือหนึ่ง array ควรตอบคำถามเดียวกัน เช่น เป็นรายชื่อทั้งหมด เป็นคะแนนทั้งหมด หรือเป็นสถานะทั้งหมด

จุดที่มือใหม่มักพลาดตอนสร้าง Array

• ลืมครอบด้วย `[]` ทำให้ค่าหลายตัวไม่กลายเป็น array
• ลืมคั่นค่าด้วย comma เช่น `['red' 'green']` จะเขียนไม่ได้
• ใส่ quote ผิดชนิด เช่น อยากเก็บ number แต่เขียนเป็น `['10', '20']`
• พิมพ์ boolean เป็น `'true'` หรือ `'false'` ทั้งที่ถ้าจะเก็บ boolean จริงต้องเขียน `true` และ `false`
• เอาข้อมูลหลายแบบปนกันเร็วเกินไป จนอ่านยากโดยไม่จำเป็น

ถ้าจำหลักพื้นฐาน 3 อย่างนี้ได้คือ `[]`, comma, และเลือกชนิดข้อมูลให้ชัด เราจะสร้าง array พื้นฐานได้สบายมาก

Lab 1: สร้าง Array ว่างและรายชื่อแบบง่าย

Lab 2: สร้าง Array ของตัวเลข

Lab 3: สร้าง Array ของ boolean

Lab 4: สร้างรายการสิ่งที่ต้องทำ

Lab 5: แยกข้อมูลคนละชนิดเป็นคนละ Array

Lab 6: รวมการสร้าง Array แบบพื้นฐาน