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

1
3 + 3

1
0.1 + 0.2

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

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

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

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

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

18
// JavaScript ไม่ต้องกำหนด data type
19
var name = 1
20
name = 3.14
21
name = 'Devahoy'
22
name = {}
23
name = []
24

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

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

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

34
// clear ค่า array
35
myArray.length = 0
36

37
// หรือ
38
myArray = []
39

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

46
// แบบ function expression
47
const hello = function () {
48
  console.log('Hello!')
49
}
50

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

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

58
numbers.forEach(function (num) {
59
  console.log(num)
60
})
61

62
// หรือ
63
const count = function (num) {
64
  console.log(num)
65
}
66
numbers.forEach(count)
67

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

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

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

80
// ใน object เป็น javascript ก็ได้นะ
81
var user = {
82
  name: 'Admin',
83
  hello: function () {
84
    console.log('Hello')
85
  }
86
}
87

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

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

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

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

15
// กรณี Arrow function ต้องการ return object จากปกติ
16
const getData = function () {
17
  return {
18
    id: 1,
19
    name: 'Test'
20
  }
21
}
22

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

26
// มีค่าเท่ากับ
27
const getData = () => {
28
  return {
29
    id: 1,
30
    name: 'Test'
31
  }
32
}

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

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

1
// แบบปกติ
2
const player = {
3
  name: 'Lionel Messi',
4
  club: 'Barcelona'
5
}
6

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

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

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

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

1
const newObject = {
2
  id: user.id,
3
  name: user.name,
4
  email: user.email
5
}
6

7
// หรือ
8
const name = 'ahoy'
9
const id = 1
10
const newObject = {
11
  id: id,
12
  name: name
13
}

1
const awesome = {
2
  id,
3
  name,
4
  email
5
}

1
// map เป็นการ loop array เช่น
2
const items = [
3
  {
4
    id: 1,
5
    name: 'Name 1'
6
  },
7
  {
8
    id: 2,
9
    name: 'Name 2'
10
  }
11
]
12

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

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

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

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

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

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