12/04/2026 18:16น.

JS2GO EP.33 การใช้งาน Trees และ Graphs ใน Go และ JavaScript
#JavaScript
#Go
#Tree
#Graph
#JS2GO
เมื่อระบบของคุณเริ่มมีความซับซ้อนมากขึ้น เช่น
- ระบบค้นหา (Search Engine)
- ระบบแผนที่หรือเส้นทาง (Pathfinding / GPS)
- การจัดการข้อมูลแบบลำดับชั้น (Hierarchical Data)
โครงสร้างข้อมูลอย่าง Tree และ Graph จะเข้ามามีบทบาทสำคัญอย่างมาก เพราะช่วยให้คุณจัดการข้อมูลที่มีความสัมพันธ์เชื่อมโยงกันได้อย่างมีประสิทธิภาพ
ในบทความนี้ เราจะเรียนรู้ การใช้งาน Trees และ Graphs ใน JavaScript และ Go พร้อมตัวอย่างโค้ดจริงและแนวทางปฏิบัติที่เหมาะสมสำหรับระบบจริง 🧠
1. Tree คืออะไร?
Tree คือโครงสร้างข้อมูลแบบ hierarchical ที่มี root node เป็นจุดเริ่มต้น และ child nodes ที่แตกแขนงออกไป นิยมใช้ในระบบต่าง ๆ เช่น
🌲 File System
🏢 Organization Hierarchy
🔍 Binary Search Tree (BST)
🌿 การสร้าง Tree ใน JavaScript
class TreeNode {
constructor(value) {
this.value = value;
this.children = [];
}
addChild(node) {
this.children.push(node);
}
}
// ตัวอย่างการสร้าง Tree
const root = new TreeNode('Root');
const child1 = new TreeNode('Child 1');
const child2 = new TreeNode('Child 2');
root.addChild(child1);
root.addChild(child2);
child1.addChild(new TreeNode('Child 1.1'));
function traverse(node) {
console.log(node.value);
node.children.forEach(traverse);
}
traverse(root);
ผลลัพธ์:
Root
Child 1
Child 1.1
Child 2
ข้อดีของ JavaScript:
✔️ ใช้งานง่าย ยืดหยุ่นสูง
✔️ เหมาะกับข้อมูลที่ไม่ต้องการ type checking เข้มงวด
✔️ เหมาะกับงาน frontend เช่น UI tree, DOM structure, JSON hierarchy
🌳 การสร้าง Tree ใน Go
package main
import "fmt"
type Node struct {
Value string
Children []*Node
}
func (n *Node) AddChild(child *Node) {
n.Children = append(n.Children, child)
}
func Traverse(n *Node) {
fmt.Println(n.Value)
for _, child := range n.Children {
Traverse(child)
}
}
func main() {
root := &Node{Value: "Root"}
child1 := &Node{Value: "Child 1"}
child2 := &Node{Value: "Child 2"}
root.AddChild(child1)
root.AddChild(child2)
child1.AddChild(&Node{Value: "Child 1.1"})
Traverse(root)
}
ผลลัพธ์:
Root
Child 1
Child 1.1
Child 2
ข้อดีของ Go:
✔️ มี type safety และตรวจสอบข้อผิดพลาดได้ตั้งแต่ compile-time
✔️ ใช้ pointer ช่วยจัดการหน่วยความจำได้อย่างมีประสิทธิภาพ
✔️ เหมาะกับระบบขนาดใหญ่ เช่น search engine, API traversal, หรือ data indexing system
2. Graph คืออะไร?
Graph เป็นโครงสร้างข้อมูลที่เก็บ nodes (vertices) และ connections (edges) ใช้แทนข้อมูลที่มีความสัมพันธ์ซับซ้อน เช่น
🌐 Social Network
🗺️ Map / Pathfinding
🎯 Recommendation System
🔗 Graph ใน JavaScript
class Graph {
constructor() {
this.adjacencyList = {};
}
addVertex(vertex) {
if (!this.adjacencyList[vertex]) {
this.adjacencyList[vertex] = [];
}
}
addEdge(v1, v2) {
this.adjacencyList[v1].push(v2);
this.adjacencyList[v2].push(v1);
}
showConnections() {
for (const vertex in this.adjacencyList) {
console.log(vertex, "->", this.adjacencyList[vertex].join(", "));
}
}
}
const graph = new Graph();
graph.addVertex("A");
graph.addVertex("B");
graph.addVertex("C");
graph.addEdge("A", "B");
graph.addEdge("A", "C");
graph.showConnections();
ผลลัพธ์:
A -> B, C
B -> A
C -> A
จุดเด่นของ JavaScript Graph:
✔️ ใช้ object หรือ Map ได้อย่างยืดหยุ่น
✔️ เหมาะกับระบบ visualization หรือ graph UI
✔️ ใช้งานง่าย เหมาะกับระบบจำลองการเชื่อมโยง เช่น social graph หรือ web crawler
🔗 Graph ใน Go
package main
import "fmt"
type Graph struct {
Adj map[string][]string
}
func NewGraph() *Graph {
return &Graph{Adj: make(map[string][]string)}
}
func (g *Graph) AddVertex(vertex string) {
if _, exists := g.Adj[vertex]; !exists {
g.Adj[vertex] = []string{}
}
}
func (g *Graph) AddEdge(v1, v2 string) {
g.Adj[v1] = append(g.Adj[v1], v2)
g.Adj[v2] = append(g.Adj[v2], v1)
}
func (g *Graph) Print() {
for v, edges := range g.Adj {
fmt.Printf("%s -> %v\n", v, edges)
}
}
func main() {
g := NewGraph()
g.AddVertex("A")
g.AddVertex("B")
g.AddVertex("C")
g.AddEdge("A", "B")
g.AddEdge("A", "C")
g.Print()
}
ผลลัพธ์:
A -> [B C]
B -> [A]
C -> [A]
ข้อดีของ Go Graph:
✔️ โครงสร้างข้อมูลแบบ type-safe
✔️ รองรับการทำงานกับข้อมูลขนาดใหญ่และซับซ้อน
✔️ เหมาะกับระบบ backend เช่น pathfinding, network analysis, graph database engine
3. แนวทางปฏิบัติที่เหมาะสม (Best Practices)
| การใช้งาน | เหมาะกับระบบ | ภาษาแนะนำ |
|---|---|---|
| Tree (UI, JSON, File System) | Frontend | JavaScript |
| Binary Tree, Search Tree | Backend / Algorithmic tasks | Go |
| Graph (Connections / Pathfinding) | Network / Social Graph / Map | JavaScript & Go |
Best Practices:
✅ แยกโครงสร้าง node และ edge ให้ชัดเจน
✅ ใน Go: ใช้ struct + pointer เพื่อเพิ่มประสิทธิภาพหน่วยความจำ
✅ ใน JS: ใช้ object หรือ Map เพื่อความยืดหยุ่น
✅ สำหรับข้อมูลจำนวนมาก ใช้อัลกอริทึม traversal เช่น BFS (Breadth-First Search) หรือ DFS (Depth-First Search) อย่างเหมาะสม
4. สรุปเปรียบเทียบ Trees และ Graphs
| คุณสมบัติ | JavaScript | Go |
|---|---|---|
| Structure | Class/Object-based | Struct & Pointer-based |
| Performance | ยืดหยุ่นแต่ช้ากว่า | เร็วและจัดการหน่วยความจำได้ดี |
| Built-in Support | ไม่มี | มี package และ struct รองรับ |
| Use Cases | Frontend visualization / JSON / UI tree | Backend algorithms, search, pathfinding |
สรุป
ทั้ง JavaScript และ Go ต่างมีจุดแข็งในการใช้งานโครงสร้างข้อมูลแบบ Tree และ Graph
- 💡 JavaScript เหมาะกับงานฝั่ง Frontend / Visualization / UI-based Tree
- ⚙️ Go เหมาะกับงานฝั่ง Backend / Search Algorithm / Pathfinding / Network Service
ตอนต่อไป
ใน EP.34 ของซีรีส์ JS2GO เราจะพาคุณไปเรียนรู้ การจัดการ Heap และ Priority Queue ใน Go และ JavaScript ซึ่งเป็นหัวใจสำคัญของระบบที่ต้องใช้ Priority Scheduling เช่น Job Queue, Pathfinding, และ Recommendation Engine 🚀
อ่านบทความ Series อื่นๆ
🔵 Facebook: https://www.facebook.com/superdev.academy.th
🔴 YouTube : Superdev Academy
📸 Instagram: Superdev Academy
🎬 TikTok: https://www.tiktok.com/@superdevacademy?lang=th-TH
🌐 Website: https://www.superdevacademy.com/