การดู : 0

12/04/2026 18:16น.

JS2GO EP.33 การใช้งาน Trees และ Graphs ใน Go และ JavaScript

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)FrontendJavaScript
Binary Tree, Search TreeBackend / Algorithmic tasksGo
Graph (Connections / Pathfinding)Network / Social Graph / MapJavaScript & Go

 

Best Practices:
✅ แยกโครงสร้าง node และ edge ให้ชัดเจน
✅ ใน Go: ใช้ struct + pointer เพื่อเพิ่มประสิทธิภาพหน่วยความจำ
✅ ใน JS: ใช้ object หรือ Map เพื่อความยืดหยุ่น
✅ สำหรับข้อมูลจำนวนมาก ใช้อัลกอริทึม traversal เช่น BFS (Breadth-First Search) หรือ DFS (Depth-First Search) อย่างเหมาะสม

 

4. สรุปเปรียบเทียบ Trees และ Graphs

 

คุณสมบัติJavaScriptGo
StructureClass/Object-basedStruct & Pointer-based
Performanceยืดหยุ่นแต่ช้ากว่าเร็วและจัดการหน่วยความจำได้ดี
Built-in Supportไม่มีมี package และ struct รองรับ
Use CasesFrontend visualization / JSON / UI treeBackend 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/