ฟังก์ชัน, กระบวนการ และการทำงานของ JavaScript

JavaScript Functions, Processes, and Execution

การเชี่ยวชาญ JavaScript จำเป็นต้องเข้าใจว่าโค้ดทำงานอย่างไร

นี่คือแนวคิดหลักที่คุณจำเป็นต้องรู้

1. ประเภทของฟังก์ชัน JavaScript 5 แบบ

• Named Function: ใช้ชื่อเฉพาะ ช่วยให้คุณดีบั๊ก (debug) ข้อผิดพลาดได้อย่างรวดเร็ว
• Anonymous Function: ไม่มีชื่อ มักใช้สำหรับ callback หรือการกำหนดค่าให้ตัวแปร
• Function Expression: การกำหนดฟังก์ชันให้กับตัวแปร
• Arrow Function: ไวยากรณ์แบบย่อที่ใช้สัญลักษณ์ => ซึ่งมีการจัดการคีย์เวิร์ด this ที่แตกต่างออกไป
• IIFE: ทำงานทันทีที่คุณกำหนดค่า ช่วยให้โค้ดของคุณถูกแยกส่วน (isolated) ออกจากส่วนอื่น

2. Process vs. Thread

Process คือโปรแกรมที่กำลังทำงานอยู่ แต่ละ process จะมีหน่วยความจำ (memory) เป็นของตัวเอง หาก Chrome ค้างหรือปิดตัวลง Spotify ก็ยังคงทำงานต่อไปได้เพราะทั้งคู่เป็นคนละ process กัน

Thread คือหน่วยย่อยที่อยู่ภายใน process โดย thread ต่างๆ จะใช้หน่วยความจำร่วมกัน ทำให้ทำงานได้รวดเร็วและใช้ทรัพยากรน้อยกว่า process

3. Synchronous vs. Asynchronous

JavaScript เป็นแบบ single-threaded ซึ่งโดยปกติจะทำงานทีละหนึ่งงานเท่านั้น

Synchronous Execution: งานจะทำงานตามลำดับที่เคร่งครัด บรรทัดถัดไปจะต้องรอให้บรรทัดปัจจุบันทำงานเสร็จสิ้นก่อน ซึ่งอาจทำให้แอปของคุณช้าลงหากมีงานใดงานหนึ่งใช้เวลานานเกินไป

Asynchronous Execution: งานสามารถเริ่มทำงานตอนนี้และไปเสร็จสิ้นในภายหลังได้ วิธีนี้ช่วยป้องกันไม่ให้โค้ดของคุณเกิดการหยุดชะงัก (blocking)

หลักการทำงาน:

• Call Stack จัดการงานปัจจุบันของคุณ
• Web APIs จัดการงานที่ใช้เวลานาน เช่น timer หรือการร้องขอข้อมูล (data requests) ในเบื้องหลัง
• Callback Queue เก็บงานที่ทำงานเสร็จสิ้นแล้ว
• Event Loop จะย้ายงานจาก queue กลับไปยัง stack เมื่อ stack ว่างลง

ตัวอย่างลำดับการทำงานแบบ Asynchronous:

1. แสดงผล "Hi"
2. เริ่มตัวจับเวลา 2 วินาที
3. แสดงผล "End"
4. (ผ่านไป 2 วินาที) แสดงผล "Vicky"

โค้ดจะไม่รอตัวจับเวลา แต่จะข้ามไปทำงานที่ "End" ทันที

Source: https://dev.to/kamalesh_ar_6252544786997/types-of-function-and-threads-process-and-synchronous-vs-asynchronous-in-javascript-1hhd

Optional learning community: https://t.me/GyaanSetuAi