สอนทำเว็บไซต์ด้วย Node.js, Express และ MongoDB ตอนที่ 2 - ทบทวนพื้นฐาน JavaScript

Published on
NodeJS
2020/01/web-development-with-nodejs-mongodb-part2
Discord

มาต่อกันที่ ตอนที่ 2 กันครับ สำหรับตอนนี้จะเป็นพื้นฐาน Node.js ก็เลยขอทบทวนพื้นฐาน JavaScript แบบเร็วๆนิดนึง รวมถึง Modern JavaScript ES6, ES7+ โดยจะไม่ได้อธิบายลงลึกรายละเอียดมากนะครับ เพราะติต่างว่าควรจะพอเขียน JavaScript มาได้บ้าง บทความนี้แค่ทบทวน และก็ตัวอย่าง ของ JS ที่นิยมเขียนในปัจจุบัน จะได้เป็นในแนวทางเดียวกันครับ

ซึ่งจริงๆ ผมเคยเขียนไว้ที่ Medium เมื่อเกือบ 4ปีละ ตอนนั้นเราอาจจะต้องหา Transpile มาช่วย แต่ตอนนี้ Nodejs เวอร์ชั่นใหม่ๆ เรียกได้ว่า เขียนได้หมดแล้ว โดยไม่ต้องติดตั้งอะไรเพิ่ม

เนื้อหาบทเรียน


มาเริ่มทวน JavaScript ฉบับรวดเร็วกันเลยครับ สามารถทำตามบทความได้โดยการเปิด Terminal แล้วพิมพ์

node

แล้ว Enter ได้เลยครับ จะได้หน้าตาแบบนี้ (version แตกต่างกันแล้วแต่เครื่องเรา)

Welcome to Node.js v12.13.1.
Type ".help" for more information.
>

JavaScript บวก ลบ คูณ หาร ได้ปกติเลย

3 + 3

แต่ถ้านี้ละ?

0.1 + 0.2

คอมเม้นโค๊ดของ JavaScript มีสองแบบ

// แบบทีละบรรทัด ใช้ slash สองตัว

/* แบบหลายๆบรรทัด
   จะใช้แบบนี้ อยู่ระหว่าง slash และดอกจันทร์ */

// การประกาศตัวแปร ถ้าไม่ assign ค่าให้ เริ่มต้น ค่าจะเป็น undefined นะ เช่น
var name
console.log(name) // undefined

// semi colon จะใส่หรือไม่ใส่ก็ได้
var name // แบบนี้ก็ได้
var name2 // แบบนี้ก็ได้

// กระใช้ String ได้ทั้ง double quote และ single quote
var name = 'Devahoy'
var name = 'Devahoy' // ได้ทั้งคู่

// JavaScript ไม่ต้องกำหนด data type
var name = 1
name = 3.14
name = 'Devahoy'
name = {}
name = []

// สร้าง Array เปล่าๆ
var myArray = []

// เพิ่มค่าลง array
myArray.push(10)

// ลบค่าล่าสุด
myArray.pop()

// clear ค่า array
myArray.length = 0

// หรือ
myArray = []

// function สร้างได้หลายแบบ
// แบบ function declaration
function ahoy() {
  console.log('Ahoy!')
}

// แบบ function expression
const hello = function () {
  console.log('Hello!')
}

// การ execute function หรือ call function เรียกชื่อ function และใช้ปีกกา เปิด ปิด
ahoy()
hello()

// การลูป array แบบ forEach
let numbers = [1, 2, 3, 4, 5]

numbers.forEach(function (num) {
  console.log(num)
})

// หรือ
const count = function (num) {
  console.log(num)
}
numbers.forEach(count)

// การสร้าง Object
var user = {} // สร้าง object เปล่าๆ

// สร้าง object แบบมีค่า name
var user = {
  name: 'Admin'
}

// แบบ dot notation คือสร้าง object ว่างๆ แล้วค่อยเพิ่ม key value
var user = {}
user.name = 'Admin'

// ใน object เป็น javascript ก็ได้นะ
var user = {
  name: 'Admin',
  hello: function () {
    console.log('Hello')
  }
}

// เรียกใช้ก็แบบนี้
user.hello()

Modern JavaScript แบบเร็วๆ

ต่อมาพวก ES6 กันบ้างครับ สังเกตว่าตัวอย่างด้านบนผมใช้ แต่ var ซึ่งเป็นแบบเก่า แนะนำว่าให้อ่านด้านล่างครับ ใช้แบบ Modern กันดีกว่า และเลือกมาแต่เฉพาะที่ใช้บ่อยๆ ใน Node.js ละกันเนอะ

เริ่มที่ตัวแปร ใช้ const กับ let

ตัวแปรใน JavaScript เมื่อก่อนมีแค่ var ตอนนี้ เราควรใช้ const กับ let แทนนะครับ เพราะว่ามันสามารถหลีกเลี่ยงปัญหาพวก scope ได้ครับ และใช้ const สำหรับตัวแปรที่ไม่สามารถเปลี่ยนค่าได้ และ let กับตัวแปรที่เราเปลี่ยนค่ามันได้

  • let สามารถสรา้งตัวแปรโดยไม่กำหนดค่าได้
  • const ต้อง assign ค่าให้มันในขณะที่สร้างตัวแปร
  • ทั้ง let และ const ไม่สามารถ new ตัวแปร ชื่อเดิมได้
  • const แบบ object มันคือการ reference ฉะนั้น key value ใน object ก็สามารถเปลี่ยนค่าได้ (ดูเรื่อง const ของ ตัวแปร และ object เพิ่มเติม)

Arrow function

เป็น short-hand สำหรับการประกาศฟังค์ชั่นครับ เขียนได้แบบนี้

// จากเดิม
const hello = function () {
  console.log('hello')
}

// เป็นแบบนี้
const hello = () => {
  console.log('hello')
}

// ถ้าบรรทัดเดียว แบบนี้ได้เลย มันจะ return ค่ากลับ
const hello = () => 'Hello'
const sum = (a, b) => a + b

// กรณี Arrow function ต้องการ return object จากปกติ
const getData = function () {
  return {
    id: 1,
    name: 'Test'
  }
}

// ใช้แบบนี้ได้ ใช้ปีกกา หุ้ม object
const getData = () => ({ id: 1, name: 'Test' })

// มีค่าเท่ากับ
const getData = () => {
  return {
    id: 1,
    name: 'Test'
  }
}

String

เราสามารถต่อ String ง่ายๆ ด้วย `` ร่วมกับ ${VAR} เช่น

// ปกติ เรา Hello World แบบนี้
const ahoy = name => {
  console.log('Ahoy' + ', ' + name)
}

// ใช้ความสามารถของมันซิ
const ahoy = name => {
  console.log(`Ahoy ${name}`)
}

Destructuring

อันนี้ผมถือว่าค่อนข้างให้ความสำคัญและมีประโยชน์ค่อนข้างมากครับ

// แบบปกติ
const player = {
  name: 'Lionel Messi',
  club: 'Barcelona'
}

// เราต้องกำหนดตัวแปรใหม่ และใช้ dot notation
const name = player.name
const club = player.club

// แต่ destructuring เราทำแบบนีได้เลย
const { name, club } = player

// ถ้าชื่อไม่ตรง ก็กำหนดใหม่ได้ เช่น
const { name: myCustomName, club } = player

Object Property

กรณีที่ต้องการ สร้าง object ใหม่ โดยมีข้อมูลแบบนี้

const user = {
  id: 1,
  name: 'ahoy',
  email: 'my@email.com'
}

ปกติ เรา จะกำหนด object ใหม่ โดยใช้ key จาก user แบบนี้

const newObject = {
  id: user.id,
  name: user.name,
  email: user.email
}

// หรือ
const name = 'ahoy'
const id = 1
const newObject = {
  id: id,
  name: name
}

ในเมื่อ key เราเหมือนกัน เรายุบมันได้เลย เป็นแบบนี้ซะ

const awesome = {
  id,
  name,
  email
}

Map, Filter แบบเร็วๆ

จริงๆแล้ว Topic เรื่องนี้ยอดฮิตมากๆ Map, Reduce, Filter อะครับ และผมว่าเดี๋ยวผมจะพยายามเขียนละเอียด หรือลง detail พร้อม example อีกทีครับ แต่สำหรับบทความนี้ขอคร่าวๆละกันเนอะ

// map เป็นการ loop array เช่น
const items = [
  {
    id: 1,
    name: 'Name 1'
  },
  {
    id: 2,
    name: 'Name 2'
  }
]

// ค่าที่ map จะ return กลับมาเป็น array ก้อนใหม่
// ตัวอย่าง return โดยเอา id มารวมกับ name เป็น string ใหม่
const result = items.map(function (data) {
  return `${data.id} ${data.name}`
})

console.log(result) // ['1 Name 1', '2 Name 2']

// ส่วน filter ก็จะคล้ายๆ map แต่ว่าจะ loop เฉพาะเข้าเงื่อนไข
// โดยเราต้อง return true หรือ false ถ้า true ค่า ณ loop นั้นจะ return
const result = items.filter(function (data) {
  return data.id === 1
})
console.log(result) // [{ id: 1, name: 'Name 1'}]

// ข้อสังเกต filter จะ return ค่า array เก่า โดนใช้ condition true/ false
// ส่วน map จะสามารถแก้ไข ค่าใน array ได้ และ return ค่าใหม่ได้

// แถมอีกนิด กรณีต้องการลบพวกค่า undefined, null ใน array ทำได้แบบนี้
const myArray = [1, 2, 3, null, undefined, false, 4]
// filter return เมื่อมีค่า (เป็น true)
const newValue = myArray.filter(v => v)

console.log(newValue) // [1, 2, 3, 4]

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

อ่านต่อ ตอนที่ 3 - ว่าด้วยพื้นฐาน Node.js / Callback / Sync และ Async ได้เลยครับ

สุดท้ายใครมีปัญหา ติดปัญหาตรงไหน สามารถสอบถามเพิ่มเติมได้ตลอดครับ

❤️ Happy Coding

Buy Me A Coffee
Authors
Discord