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

node

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

3 + 3

0.1 + 0.2

// แบบทีละบรรทัด ใช้ 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()

// จากเดิม
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'
  }
}

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

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

// แบบปกติ
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

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

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

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

const awesome = {
  id,
  name,
  email
}

// 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]