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

บทความนี้คือ Eloquent JavaScript ภาษาไทย — คำแปลและเรียบเรียงแบบเปิด ตอน 00: บทนำ ซึ่งเป็นตอนที่ 00 จาก 22 ตอน เนื้อหาเป็นคำแปลและเรียบเรียงภาษาไทยที่มีการปรับเปลี่ยนจาก Introduction ต้นฉบับ ใน Eloquent JavaScript, 4th edition (2024) ของ Marijn Haverbeke ภายใต้ CC BY-NC 3.0 โครงการนี้เผยแพร่ฟรีและไม่เชิงพาณิชย์ และไม่ได้รับการรับรอง สนับสนุน หรือจัดทำโดยผู้เขียนหรือผู้จัดพิมพ์ต้นฉบับ

เมื่อไม่มีปุ่มสำหรับงานที่เราอยากทำ

หนังสือเล่มนี้ว่าด้วยการสั่งให้คอมพิวเตอร์ทำงาน ทุกวันนี้คอมพิวเตอร์พบได้ทั่วไปพอ ๆ กับไขควง แต่ข้างในซับซ้อนกว่ามาก และการทำให้มันทำตามที่เราต้องการก็ไม่ง่ายเสมอไป

Marijn Haverbeke ชวนให้มองว่าคอมพิวเตอร์ไม่ได้คิดและเข้าใจสิ่งต่าง ๆ อย่างมนุษย์ มันเป็นเครื่องมือที่ทำงานตามคำสั่งอันแม่นยำ และสะท้อนความสามารถเพียงด้านแคบ ๆ ของเรา คือด้านที่ยึดตรรกะ ระเบียบ กฎ และความชัดเจน เมื่อเราจะใช้เครื่องมือนี้กับโจทย์ใหม่ เราจึงต้องแปลงความตั้งใจที่คลุมเครือให้เป็นขั้นตอนซึ่งแม่นยำพอที่เครื่องจะทำตามได้

การเขียนโปรแกรมคือการสร้างชุดคำสั่งที่บอกคอมพิวเตอร์อย่างแม่นยำว่าต้องทำอะไร และเป็นวิธีหนึ่งในการแปลงความตั้งใจนั้น โปรแกรมคือชุดคำสั่งที่เราเขียนขึ้นเพื่อกำกับการทำงานของคอมพิวเตอร์ ส่วนภาษาโปรแกรมคือภาษาที่มนุษย์สร้างขึ้นเพื่อประกอบคำและโครงสร้างเป็นคำสั่งใหม่ได้ เราจึงไม่ได้มีเพียงรายการคำสั่งตายตัว แต่ยังนำชิ้นส่วนของภาษามารวมกันเพื่อแสดงแนวคิดที่ไม่เคยเขียนมาก่อนได้ด้วย

ครั้งหนึ่งหน้าจอรับคำสั่งแบบ BASIC และ DOS เป็นทางหลักที่ผู้คนใช้คอมพิวเตอร์ ต่อมาซอฟต์แวร์สำหรับงานประจำวันส่วนใหญ่หันมาใช้หน้าจอแบบกราฟิก ซึ่งเรียนรู้ง่ายกว่าแต่ให้อิสระน้อยกว่า ภาษาโปรแกรมไม่ได้หายไป เพียงซ่อนอยู่ข้างหลังหน้าจอเหล่านั้น หนึ่งในภาษาที่อยู่ใกล้ตัวที่สุดคือ JavaScript ภาษาโปรแกรมที่มีอยู่ในเว็บเบราว์เซอร์สมัยใหม่ทุกตัว จึงเข้าถึงได้จากอุปกรณ์แทบทุกประเภท

เป้าหมายของหนังสือคือพาเราไปรู้จัก JavaScript มากพอที่จะสร้างสิ่งที่ทั้งมีประโยชน์และชวนสนุก แต่ก่อนถึงคำสั่งแรก เราควรเข้าใจธรรมชาติของงานนี้เสียก่อน

พลังที่ต้องแลกกับความเคร่งครัด

คอมพิวเตอร์ทำได้เพียงงานตรงไปตรงมาตามคำสั่ง มันไม่ได้เติมเจตนาที่เราลืมบอก แต่ข้อจำกัดนี้มาคู่กับความเร็วมหาศาล โปรแกรมจึงนำงานง่าย ๆ จำนวนมากมาประกอบกันจนทำงานซับซ้อนได้ งานที่ทำด้วยมืออาจใช้เวลานานมาก แต่โปรแกรมทำเสร็จได้ในไม่กี่วินาที และเครื่องมือเดิมก็ทำสิ่งที่มันไม่เคยทำได้มาก่อน

ในมุมของ Haverbeke ความทื่อและความเคร่งครัดของเครื่องทำให้การเขียนโปรแกรมพื้นฐานทั้งน่าเบื่อและน่าหงุดหงิด ทว่าเมื่อเรายอมเรียบเรียงความคิดให้เป็นคำสั่งแบบที่เครื่องทำตามได้ ความเคร่งครัดเดียวกันก็ให้รางวัล การเขียนโปรแกรมกลายเป็นทั้งเครื่องมือทำงาน เกมแก้ปริศนา และพื้นที่ฝึกคิดเชิงนามธรรม

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

ปัญหาคือเมื่อโปรแกรมโต รายละเอียดและความสัมพันธ์ที่ต้องตามก็เพิ่มขึ้นจนกลายเป็นความซับซ้อนที่เราต้องจัดระเบียบ เราอาจเริ่มจากกฎพื้นฐานที่เรียบง่าย แต่เมื่อประกอบกฎเหล่านั้นเข้าด้วยกัน โปรแกรมจะสร้างกฎและความซับซ้อนของมันเอง ราวกับเรากำลังก่อเขาวงกตที่ตัวเราเองก็หลงได้

ทักษะสำคัญจึงไม่ใช่แค่ทำให้โปรแกรมทำงาน แต่คือสร้างโปรแกรมที่ทำสิ่งน่าสนใจโดยที่คนเขียนยังเข้าใจมัน Haverbeke ไม่เชื่อว่าเราจะรับมือเรื่องนี้ได้ด้วยกฎตายตัวหรือรายการ “แนวปฏิบัติที่ดีที่สุด” ชุดเล็ก ๆ เท่านั้น ปัญหาใหม่อาจต้องใช้วิธีใหม่ และความรู้สึกว่าโปรแกรมที่ดีหน้าตาอย่างไรเกิดจากการฝึก รวมถึงการทำผิดพลาดด้านการออกแบบแล้วเรียนรู้จากมัน

ทำไมระดับของภาษาจึงเปลี่ยนวิธีคิด

ย้อนกลับไปช่วงแรกของคอมพิวเตอร์ ตอนที่ยังไม่มีภาษาโปรแกรม โปรแกรมสำหรับบวกเลข 1 ถึง 10 แล้วแสดงผล 55 อาจหน้าตาเช่นนี้บนเครื่องสมมติ:

00110001 00000000 00000000
00110001 00000001 00000001
00110011 00000001 00000010
01010001 00001011 00000010
00100010 00000010 00001000
01000011 00000001 00000000
01000001 00000001 00000001
00010000 00000010 00000000
01100010 00000000 00000000

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

ถ้าแปลงบิตเหล่านั้นเป็นคำสั่งและตั้งชื่อพื้นที่ในหน่วยความจำ ภาพเริ่มชัดขึ้น:

กำหนด total เป็น 0
กำหนด count เป็น 1
[loop]
กำหนด compare เป็น count
ลบ compare ด้วย 11
ถ้า compare เป็น 0 ให้ไปที่ [end]
บวก count เข้า total
เพิ่ม count ขึ้น 1
กลับไปที่ [loop]
[end]
แสดง total

total เก็บผลรวมที่เพิ่มขึ้นเรื่อย ๆ ส่วน count เก็บเลขที่กำลังพิจารณา ช่วงที่ใช้ compare ซับซ้อนเพราะเครื่องสมมตินี้ตรวจได้เพียงว่าค่าหนึ่งเป็นศูนย์หรือไม่ โปรแกรมจึงคำนวณ count - 11 แล้วหยุดเมื่อผลเป็นศูนย์ ก่อนถึงจุดนั้น มันบวก count เข้า total และเพิ่ม count ทีละ 1

เมื่อเขียนงานเดียวกันด้วย JavaScript รายละเอียดเรื่องตำแหน่งหน่วยความจำและการกระโดดไปมาหายไป:

ในตัวอย่าง JavaScript ต่อจากนี้ หนังสือใช้ // → นำหน้าผลลัพธ์ที่คาดว่าจะได้ บรรทัดที่ขึ้นต้นด้วยเครื่องหมายนี้จึงเป็นคำอธิบายผล ไม่ใช่คำสั่งที่ต้องพิมพ์ให้โปรแกรมทำงาน

let total = 0, count = 1;
while (count <= 10) {
  total += count;
  count += 1;
}
console.log(total);
// → 55

while ทำบล็อกคำสั่งซ้ำตราบใดที่เงื่อนไขยังเป็นจริง ในที่นี้เงื่อนไขคือ count <= 10 เราจึงไม่ต้องสร้างค่าชั่วคราวเพื่อตรวจศูนย์ และไม่ต้องบอกเครื่องเองว่าจะกระโดดกลับไปตรงไหน เมื่อการวนซ้ำจบ console.log จะแสดงผลรวมออกมา

ส่วนข้อความแบบตัวอักษรความกว้างคงที่ เช่น while หรือ total ใช้แทนองค์ประกอบของโปรแกรม

ตัวอย่างเช่น หนังสือจะแสดงคำสั่งและผลที่คาดหมายไว้ด้วยกันแบบนี้:

console.log(factorial(8));
// → 40320

หากเรามีการดำเนินการ range สำหรับสร้างชุดตัวเลขในช่วง และ sum สำหรับหาผลรวม โปรแกรมเดียวกันอาจเหลือเพียงบรรทัดนี้:

console.log(sum(range(1, 10)));
// → 55

ในบทนำ range และ sum ยังเป็นการดำเนินการสมมติ หนังสือจะพาไปดูวิธีสร้างชิ้นส่วนเช่นนี้ภายหลัง สิ่งสำคัญตอนนี้คือสังเกตว่าบรรทัดสุดท้ายอ่านใกล้เคียงกับความตั้งใจของเรา: แสดงผลรวมของตัวเลขตั้งแต่ 1 ถึง 10

ภาษาที่ดีช่วยให้เราพูดถึงงานในระดับที่มีความหมายกว่าเดิม มันซ่อนรายละเอียดซึ่งไม่เกี่ยวกับปัญหาหลัก ให้ชิ้นส่วนสำเร็จรูปอย่าง while และ console.log และเปิดให้เราสร้างชิ้นส่วนใหม่อย่าง sum กับ range แล้วนำมาประกอบกันได้ เรารวมรายละเอียดหลายขั้นเป็นชิ้นส่วนที่เรียกใช้ได้ แนวคิดนี้เรียกว่า abstraction หรือการสร้างนามธรรม

นามธรรมไม่ได้ทำให้ความซับซ้อนสูญหาย แต่มันช่วยจัดกลุ่มรายละเอียดและตั้งชื่อให้เราใช้ความคิดในระดับที่ตรงกับโจทย์มากขึ้น นี่คือเหตุผลที่การเรียนภาษาโปรแกรมไม่ใช่การจำคำสั่งให้ครบ หากเราสร้างและเลือกชิ้นส่วนที่เหมาะสม เราจะยังตามเหตุผลของโปรแกรมได้แม้มันขยายใหญ่ขึ้น

JavaScript คืออะไร และไม่ใช่อะไร

JavaScript เปิดตัวในปี 1995 เพื่อเพิ่มโปรแกรมลงในเว็บเพจของเบราว์เซอร์ Netscape Navigator แล้วเบราว์เซอร์กราฟิกหลักอื่น ๆ ก็นำภาษาไปใช้ต่อมา ภาษานี้ทำให้เว็บแอปตอบสนองต่อผู้ใช้ได้โดยไม่ต้องโหลดหน้าใหม่ทุกครั้ง และช่วยเพิ่มการโต้ตอบให้เว็บไซต์ทั่วไป

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

เมื่อ JavaScript เริ่มถูกนำไปใช้นอก Netscape จึงต้องมีเอกสารมาตรฐานเพื่อให้ซอฟต์แวร์หลายตัวรองรับภาษาเดียวกันได้ มาตรฐานของภาษานี้ชื่อ ECMAScript ตามชื่อ Ecma International ซึ่งทำหน้าที่กำหนดมาตรฐาน ในการใช้งานทั่วไป JavaScript กับ ECMAScript กล่าวถึงภาษาเดียวกัน แต่เมื่อพูดถึงรุ่นของข้อกำหนด เรามักใช้ชื่อ ECMAScript

เส้นทางของมาตรฐานไม่ได้เดินเป็นเส้นตรง ECMAScript 3 เป็นรุ่นที่รองรับอย่างกว้างขวางในช่วงประมาณปี 2000 ถึง 2010 โครงการรุ่น 4 ซึ่งตั้งใจเปลี่ยนภาษาครั้งใหญ่ถูกยกเลิกในปี 2008 รุ่น 5 ออกในปี 2009 และรุ่น 6 ซึ่งเป็นการอัปเดตใหญ่ตามมาในปี 2015 หลังจากนั้นภาษารับการอัปเดตขนาดเล็กทุกปี

JavaScript ยืดหยุ่นมากจนบางครั้งรับโค้ดที่มีปัญหาไว้แล้วตีความต่างจากเจตนาของคนเขียน ทำให้หาสาเหตุของข้อผิดพลาดยากขึ้น Haverbeke เล่าว่าครั้งแรกที่ต้องใช้ภาษา เขาเคยเกลียดมันด้วยเหตุผลนี้ ก่อนจะกลับมาชอบหลังเรียนรู้ภาษาและใช้งานมาระยะหนึ่ง ความยืดหยุ่นซึ่งสร้างปัญหาก็เปิดทางให้เทคนิคที่ภาษาซึ่งเข้มงวดกว่าทำไม่ได้ และเอื้อให้เขียนโค้ดด้วยสไตล์ที่ไม่เป็นพิธีการ

หนังสือฉบับนี้ใช้ JavaScript รุ่นปี 2024 เบราว์เซอร์เก่าอาจไม่รองรับทุกฟีเจอร์ เพราะเบราว์เซอร์ต้องตามการเปลี่ยนแปลงของภาษาให้ทัน ขณะเดียวกัน ผู้ออกแบบภาษาก็ระวังไม่เปลี่ยนสิ่งที่ทำให้โปรแกรมเดิมพัง เบราว์เซอร์ใหม่จึงยังรันโปรแกรมเก่าได้

JavaScript ไม่ได้อยู่แค่ในเว็บเบราว์เซอร์ (browser) ฐานข้อมูลอย่าง MongoDB และ CouchDB ใช้ JavaScript เป็นภาษาสคริปต์หรือภาษาคิวรี ส่วนแพลตฟอร์มอย่าง Node.js เปิดให้เราเขียนโปรแกรมเดสก์ท็อปและเซิร์ฟเวอร์นอกเบราว์เซอร์ได้

อ่านโค้ด รันจริง และรับมือเมื่อหลงทาง

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

เมื่ออ่านหนังสือบนเว็บไซต์ ตัวอย่างและแบบฝึกหัดแก้ไขแล้วรันได้ด้วยการคลิก การลองคำตอบในตัวแปลภาษา JavaScript จริงให้ผลย้อนกลับทันทีว่าแนวคิดของเราทำงานหรือไม่ และมักชวนให้ปรับโค้ดต่อเพื่อดูว่าจะเกิดอะไรขึ้น

อย่างไรก็ตาม โค้ดไม่ได้รันเหมือนกันทุกที่ ตัวอย่างจำนวนมากทำงานได้ด้วยตัวเองในสภาพแวดล้อม JavaScript ทั่วไป แต่โค้ดในบทหลังอาจสร้างมาสำหรับเบราว์เซอร์หรือ Node.js โดยเฉพาะ โปรแกรมที่ใหญ่ขึ้นอาจพึ่งพาโค้ดชิ้นอื่น สคริปต์ หรือไฟล์ข้อมูล หากจะรันนอกเว็บไซต์ ให้ตรวจว่าสภาพแวดล้อมตรงกับบท และดาวน์โหลด ZIP จากพื้นที่ทดลองโค้ด (sandbox) บนเว็บไซต์หนังสือเมื่อจำเป็น ไฟล์นั้นรวมสคริปต์และข้อมูลสำหรับโค้ดของแต่ละบทไว้

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

1. พัก เมื่อพยายามต่อแล้วไม่เห็นทาง
2. กลับไปอ่านช่วงที่ติด แล้วระบุให้ได้ว่าค่า ขั้นตอน หรือเหตุผลตรงไหนยังต่อกันไม่ได้
3. ตามโปรแกรมตัวอย่างอย่างตั้งใจ ดูค่าที่เปลี่ยนและเหตุผลของแต่ละบรรทัด
4. ลงมือทำแบบฝึกหัดและรันคำตอบ ใช้ผลจากตัวแปลภาษาตรวจสมมติฐาน แล้วทดลองต่อ

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

แผนที่ของหนังสือและเส้นทาง 22 ตอน

Eloquent JavaScript ฉบับที่ 4 แบ่งเนื้อหาหลักคร่าว ๆ เป็นสามส่วน และแทรกบทโครงงานขนาดใหญ่ 5 บทเพื่อให้เห็นงานเขียนโปรแกรมจริง:

1. 12 บทแรก: ภาษา JavaScript: เริ่มจากโครงสร้างควบคุม ฟังก์ชัน และโครงสร้างข้อมูล จากนั้นใช้ฟังก์ชันกับอ็อบเจกต์เพื่อเขียนโค้ดเชิงนามธรรมและควบคุมความซับซ้อน แล้วเดินต่อไปยังการจัดการข้อผิดพลาด นิพจน์ทั่วไป โมดูล และการเขียนโปรแกรมแบบอะซิงโครนัส
2. 7 บทถัดไป: JavaScript ในเบราว์เซอร์: เรียนรู้เครื่องมือที่ภาษาเข้าถึงได้ ตั้งแต่การแสดงผล การรับอินพุต ไปจนถึงการสื่อสารผ่านเครือข่าย รวมถึง DOM และ Canvas
3. 2 บทสุดท้าย: Node.js: บทที่ 20 อธิบายสภาพแวดล้อม Node.js และบทที่ 21 ใช้มันสร้างเว็บไซต์ขนาดเล็ก

บทโครงงานทั้ง 5 บทจะพาไปสร้างหุ่นยนต์ส่งของ ภาษาโปรแกรม เกมแพลตฟอร์ม โปรแกรมวาดพิกเซล และเว็บไซต์แบ่งปันทักษะ โครงงานเหล่านี้ไม่ได้เป็นเพียงตัวอย่างประกอบสั้น ๆ แต่เปิดพื้นที่ให้เห็นว่าความคิดจากหลายบททำงานร่วมกันอย่างไร

ซีรีส์ Eloquent JavaScript ภาษาไทย — คำแปลและเรียบเรียงแบบเปิด จะเดินตามหนังสือเป็น 22 ตอน โดยตอนนี้คือบทเปิดก่อนบทที่ 1 แผนที่ข้างต้นยังไม่ใช่บทเรียนย่อของเนื้อหาทั้งหมด แต่บอกล่วงหน้าว่าเรากำลังสร้างทักษะอะไรและเหตุใดแต่ละช่วงจึงต่อกัน

ก่อนก้าวเข้าสู่บทที่ 1

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

เส้นทางนี้ย่อมมีช่วงที่อ่านไม่รู้เรื่องหรือเขียนแล้วไม่ทำงาน นั่นไม่ใช่คำตัดสินว่าเราเหมาะกับการเขียนโปรแกรมหรือไม่ ให้พัก อ่านซ้ำ ตามตัวอย่าง และรันสิ่งที่เขียนจริง เมื่อพักแล้วกลับมาอ่านและทดลองอีกครั้ง เราอาจเห็นความสัมพันธ์ที่ก่อนหน้านี้ยังมองไม่ออก แล้วจึงพร้อมเริ่มบทที่ 1 ด้วยความคาดหวังที่ตรงจริง: ไม่ใช่เก่ง JavaScript ในทันที แต่ค่อย ๆ ฝึกสั่งเครื่องและจัดการความซับซ้อนด้วยภาษาที่เราเข้าใจมากขึ้น

ที่มา: Introduction :: Eloquent JavaScript โดย Marijn Haverbeke; Eloquent JavaScript, 4th edition (2024); และ แนวทาง Translating ในคลังต้นฉบับ