เริ่มต้นเขียนเว็บ 2018 [03] : ES6&Nodejs

K.
Mattick
Published in
2 min readMar 24, 2018

เราจะมาเรียนกันในฝั่ง Back-end สำหรับภายใน server เรามีให้เลือกใช้หลายภาษาไม่ว่าจะเป็น PHP,Java,Python หรือ Node.js สำหรับบทความนี้ จะยกตัวอย่างเป็น Nodejs ละกันเพราะว่ามันคุ้มสำหรับคนเริ่มเรียน web dev

ใครขี้เกียจอ่านก็ข้ามช่วงแรกไปได้ เกริ่นเฉยๆ

Nodejs เอาไว้รัน javascript(js) ปกติแล้ว js จะไม่สามารถรันโดย standalone ต้องมีตัวช่วยในการรัน js ซึ่งก็คือ Nodejs นั่นเอง ซึ่งก็ต้องโหลดมาติดตั้งเอง ไม่ขออธิบายวิธีการติดตั้งเนื่องจากมีหลายบทความในการสอนการติดตั้งแล้ว

สำหรับใครรัน nodejs ไม่เป็นก็ย้อนไปดูบทความก่อนหน้าได้นะจ้ะ คลิ้กตรงนี้

เริ่มต้น Hello World โดย Nodejs

อธิบายคือสร้างไฟล์มา 1 ไฟล์ชื่อว่า test.js โดยภายใน test.js มีคำสั่งคือ console.log(‘Hello World’)

สำหรับ nodejs เราจะทำการแสดงค่าใดๆ จะใช้คำสั่ง console.log()

ES6 จะมีเรื่องที่งงๆสำหรับคนหัดเขียนอยู่ประมาณ 2 เรื่อง

  1. การเก็บ function ในตัวแปร, arrow function
  2. life cycle, async&await
การโยนฟังก์ชั่นเข้าไปในอีกหนึ่งฟังก์ชั่น
  1. การเก็บ function ในตัวแปร, arrow function

ให้ตัวแปร func เก็บค่า function ที่รับตัวแปร a เข้ามาจากนั้นทำการ log a ออก

ให้ตัวแปร display เก็บค่า function ที่รับตัวแปร callback และ arg ให้ใช้ ฟังก์ชั่น callback ซึ่งรับเข้ามาและส่งค่า arg ผ่านฟังก์ชั่น callback อีกทีหนึ่ง

เรียกฟังก์ชั่น display โดยส่งตัวแปร func และ string ‘Foo Man’

เมื่อทำการรันผลลัพธ์ก็จะออกมาคือ Foo Man

2.Life cycle & API

การใช้ API setTimeout คือให้ทำฟังก์ชั่นภายใน setTimeout หลังจากเวลาผ่านไป n ms ข้างบนเราจึงส่งค่าฟังก์ชั่นเข้าไปใน setTimeout ก็คือ console.log(‘first’)

จากนั้นจึงทำการ console.log(‘second’) และ console.log(‘third’) ตามลำดับ

//แต่ผลลัพธ์ที่แสดงออกมากลับเป็น second third แล้วจึงเป็น first เนื่องจากมีการเรียกใช้ API ของเว็บบราวเซอร์ setTimeout เป็น API ไม่ใช่ฟังก์ชั่นของ js การทำงานจึงเรียงจาก main event เมื่อ main event หมดจึงทำงานในส่วนของ API อีกครั้งหนึ่ง\\

แต่ถ้าหากเราต้องการใช้ API ร่วมกับ main event โดยไม่อยากให้รอให้หมด main event ก่อนละ เราจะทำได้ยังไง

life cycle ใน js จึงเป็นสิ่งสำคัญมากๆ เนื่องจากการทำงานที่ไม่เป็น blocking ทำให้บางครั้งอาจเกิดบัคสำหรับผู้ใช้งานมือใหม่ เนื่องจากการทำงานติดต่อกับ server หรือ Database จำเป็นต้องรอคอยการตอบกลับแล้วจึงนำค่าไปใช้ หลายครั้งจึงได้ค่ากลับมาเป็น undifier เพราะไม่รอค่าจาก server ตอบกลับมาก่อน

วิธีแก้ปัญหามี 2 วิธีคือ 1.Callback 2.Async&Await

  1. Callback คือการแนบฟังก์ชั่นเข้าไปด้วยโดยเมื่อได้ค่าจาก server หรือ database จึงจะเรียกใช้งานฟังก์ชั่นทำให้ฟังก์ชั่นไม่บัค
  2. Async&Await คือการทำให้การเขียนโค้ดกลับไปเป็นแบบ blocking นั่นก็คือรอฟังก์ชั่นนั้นๆตอบกลับค่ามาก่อนแล้วจึงทำฟังก์ชั่นถัดไป
เพิ่มในส่วนของ async และ await
เมื่อทำการลบ await ทิ้ง

ตัวอย่างทั้งสองได้แสดงให้เห็นถึงการทำงานแบบ blocking คือรอฟังก์ชั่นตอบกลับมาก่อนหรือทำงานแบบ Non-blocking คือไม่รอให้ฟังก์ชั่นตอบกลับค่ามาก่อน

จบไปแล้วนะครับสำหรับเรื่องที่ควรรู้ใน ES6 สำหรับคนที่มีข้อสงสัยก็ทิ้งคำถามไว้ด้านล่างได้เลยนะครับ ตอนต่อไปจะเป็นเรื่องของ express หรือการตอบกลับ request และ server แบบจริงๆจังๆ

--

--

K.
Mattick

Founder & Head of research center@ VulturePrime Co., Ltd.