Explore the JavaScript Universe | https://unsplash.com/photos/Oze6U2m1oYU

สรุป justjavascript: mental models

สรุปเนื้อหาที่ได้เรียนรู้จากคอร์ส justjavascript ของทั่นศาสดา Dan Abramov

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

What is Mental Models?

เราลองมาเริ่มอ่านโค้ดข้างล่างนี้ดู

let a = 10;
let b = a;
a = 0;

เปิดเนื้อหามาให้ลองอ่านโค้ดชุดนึงเลย แล้วถามกับเราว่าสิ่งที่อยู่ในหัวจากที่เราอ่านโค้ดนี้มันทำงานยังไง ลองไล่มาเป็นสเต็ปกัน เนื้อหาตรงนี้เหมือนเรียกน้ำย่อยเพื่อให้ลองอธิบายสิ่งที่คิดอยู่ในหัวออกมา → นี่คือสิ่งที่เรียกว่า “mental models” ของบทเรียนนี้

ลองตั้งใจว่าเกิดอะไรขึ้นในหัว step-by-step เราอาจสังเกตว่าเรามีการไล่สิ่งที่เกิดขึ้นกับโค้ดชุดนั้น

• let a = 10
  - ประกาศตัวแปรชื่อ a และเซ็ตให้ค่าเป็น 10
• let b = a
  - ประกาศตัวแปรชื่อ b และเซ็ตให้ค่าเป็น a
  - เดี๋ยวก่อน แล้ว a เป็นอะไร? มันเป็น 10 ดังนั้น b ก็เลยเป็น 10
• a = 0
  - เซ็ตค่าตัวแปร a ให้เป็น 0
• ดังนั้นสุดท้าย a เป็น 0 และ b เป็น 10

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

Coding, Fast and Slow

บทเรียนอ้างอิงหนังสือ “Thinking, Fast and Slow” ว่าระบบการคิดของมนุษย์มี 2 แบบ บอกตรง ๆ อ่านมาถึงส่วนนี้แล้วผมว้าวมาก

อันแรกก็คือการคิดแบบ “fast” ที่เป็นการทำบางสิ่งโดยความรู้สึกหรือเชื่ออย่างแรงกล้าโดยไม่ต้องหยุดคิดถึงมันเลย (gut reactions) ซึ่งสัตว์ส่วนใหญ่ (ไม่เว้นแม้แต่มนุษย์) ใช้ระบบการคิดนี้เพราะมีความสำคัญในการเอาชีวิตรอด ทำให้เราสามารถเดินได้โดยไม่ล้ม ทำให้เข้าใจภาษา หรือการกระทำที่ตอบสนองไปโดยอัตโนมัติจากการทำบางอย่างซ้ำ ๆ แต่ไม่ดีสำหรับการวางแผน

อีกอย่างเมื่อพูดถึงอีกระบบ “slow” ระบบการคิดนี้มีหน้าที่รับผิดชอบกับเรื่องการให้เหตุผลกับเรื่องซับซ้อนที่เป็นขั้นเป็นตอน เพื่อให้เราวางแผนในอนาคต การอ้างเหตุผล หรือตามกระบวนการพิสูจน์ทางคณิตศาสตร์

กระบวนคิดส่วนใหญ่เราจึงอาจใช้ “fast” ไปโดยไม่รู้ตัว แม้กระทั่งกับการ Coding

ลองจินตนาการกันดูว่า เรากำลังมาถึงครึ่งทางของงานที่กองอยู่มาก และเราต้องการอยากรู้เร็ว ๆ ว่าฟังก์ชันนี้ 👇 ทำอะไร?

เราอาจจะมองว่า

• ฟังก์ชันทำการ duplicate spreadsheet
• มีการ throws error ถ้า original spreadsheet ยังไม่ได้บันทึก
• มีการสร้างตัวแปร copy
• มีการเติมคำว่า “Copy of” ที่ title ของ new spreadsheet
• return ตัวแปร copy ออกไป

มีอะไรที่ตกหล่นไปหรือเปล่านะ? (บางคนก็อาจสังเกตเห็น) ว่าฟังก์ชันดันไปแก้ title ของ origin spreadsheet เกิดเป็นบั๊กเหมือนกับที่เกิดกับตอนเราเขียนโปรแกรมกัน

ตอนนี้เรารู้แล้วว่าโปรแกรมมีบั๊ก การอ่านโค้ดของเราเปลี่ยนไปหรือเปล่า? ถ้าเราใช้กระบวนการคิด “fast” ในตอนแรก เราอาจจะเปลี่ยนมาพยายามไล่หามากขึ้นโดยการใช้กระบวนการคิด “slow” ในตอนที่เรารู้ว่าโปรแกรมมีบั๊ก

function เผลอไปเปลี่ยน title ของ original spreadsheet

บ่อยครั้งที่เราใช้กระบวนการคิดแบบ “fast” เรามักจะมองไปถึงภาพรวมของโค้ด การตั้งชื่อ และ comment code แต่เมื่อไรก็ตามที่มีบั๊กสมองเราจะเปลี่ยนไปใช้ “slow” ในการไล่หาข้อผิดพลาดเป็น step-by-step

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