[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-js2go-ep33-trees-and-graphs-in-go-vs-javascript-all--*":3,"academy-blog-translations-nxrcfxb76kjxuhx":79},{"data":4,"page":78,"perPage":78,"totalItems":78,"totalPages":78},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_path":11,"created":12,"created_by":13,"expand":14,"id":72,"keywords":73,"locale":49,"published_at":74,"scheduled_at":13,"school_blog":70,"short_description":75,"slug":76,"status":68,"title":6,"updated":77,"updated_by":13,"views":71},"JS2GO EP.33 การใช้งาน Trees และ Graphs ใน Go และ JavaScript","sclblg987654321","school_blog_translations","\u003Cp>เมื่อระบบของคุณเริ่มมีความซับซ้อนมากขึ้น เช่น\u003C\u002Fp>\u003Cul>\u003Cli>ระบบค้นหา (Search Engine)\u003C\u002Fli>\u003Cli>ระบบแผนที่หรือเส้นทาง (Pathfinding \u002F GPS)\u003C\u002Fli>\u003Cli>การจัดการข้อมูลแบบลำดับชั้น (Hierarchical Data)\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Cp>โครงสร้างข้อมูลอย่าง Tree และ Graph จะเข้ามามีบทบาทสำคัญอย่างมาก เพราะช่วยให้คุณจัดการข้อมูลที่มีความสัมพันธ์เชื่อมโยงกันได้อย่างมีประสิทธิภาพ\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>ในบทความนี้ เราจะเรียนรู้ การใช้งาน Trees และ Graphs ใน JavaScript และ Go พร้อมตัวอย่างโค้ดจริงและแนวทางปฏิบัติที่เหมาะสมสำหรับระบบจริง 🧠\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>1. Tree คืออะไร?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>Tree คือโครงสร้างข้อมูลแบบ hierarchical ที่มี root node เป็นจุดเริ่มต้น และ child nodes ที่แตกแขนงออกไป นิยมใช้ในระบบต่าง ๆ เช่น\u003Cbr>🌲 File System\u003Cbr>🏢 Organization Hierarchy\u003Cbr>🔍 Binary Search Tree (BST)\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>🌿 การสร้าง Tree ใน JavaScript\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">class TreeNode {\n  constructor(value) {\n    this.value = value;\n    this.children = [];\n  }\n\n  addChild(node) {\n    this.children.push(node);\n  }\n}\n\n\u002F\u002F ตัวอย่างการสร้าง Tree\nconst root = new TreeNode('Root');\nconst child1 = new TreeNode('Child 1');\nconst child2 = new TreeNode('Child 2');\nroot.addChild(child1);\nroot.addChild(child2);\nchild1.addChild(new TreeNode('Child 1.1'));\n\nfunction traverse(node) {\n  console.log(node.value);\n  node.children.forEach(traverse);\n}\n\ntraverse(root);\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ผลลัพธ์:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">Root\nChild 1\nChild 1.1\nChild 2\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ข้อดีของ JavaScript:\u003Cbr>✔️ ใช้งานง่าย ยืดหยุ่นสูง\u003Cbr>✔️ เหมาะกับข้อมูลที่ไม่ต้องการ type checking เข้มงวด\u003Cbr>✔️ เหมาะกับงาน frontend เช่น UI tree, DOM structure, JSON hierarchy\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>🌳 การสร้าง Tree ใน Go\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport \"fmt\"\n\ntype Node struct {\n\tValue    string\n\tChildren []*Node\n}\n\nfunc (n *Node) AddChild(child *Node) {\n\tn.Children = append(n.Children, child)\n}\n\nfunc Traverse(n *Node) {\n\tfmt.Println(n.Value)\n\tfor _, child := range n.Children {\n\t\tTraverse(child)\n\t}\n}\n\nfunc main() {\n\troot := &Node{Value: \"Root\"}\n\tchild1 := &Node{Value: \"Child 1\"}\n\tchild2 := &Node{Value: \"Child 2\"}\n\troot.AddChild(child1)\n\troot.AddChild(child2)\n\tchild1.AddChild(&Node{Value: \"Child 1.1\"})\n\n\tTraverse(root)\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ผลลัพธ์:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">Root\nChild 1\nChild 1.1\nChild 2\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ข้อดีของ Go:\u003Cbr>✔️ มี type safety และตรวจสอบข้อผิดพลาดได้ตั้งแต่ compile-time\u003Cbr>✔️ ใช้ pointer ช่วยจัดการหน่วยความจำได้อย่างมีประสิทธิภาพ\u003Cbr>✔️ เหมาะกับระบบขนาดใหญ่ เช่น search engine, API traversal, หรือ data indexing system\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>2. Graph คืออะไร?\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>Graph เป็นโครงสร้างข้อมูลที่เก็บ nodes (vertices) และ connections (edges) ใช้แทนข้อมูลที่มีความสัมพันธ์ซับซ้อน เช่น\u003Cbr>🌐 Social Network\u003Cbr>🗺️ Map \u002F Pathfinding\u003Cbr>🎯 Recommendation System\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>🔗 Graph ใน JavaScript\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-javascript\">class Graph {\n  constructor() {\n    this.adjacencyList = {};\n  }\n\n  addVertex(vertex) {\n    if (!this.adjacencyList[vertex]) {\n      this.adjacencyList[vertex] = [];\n    }\n  }\n\n  addEdge(v1, v2) {\n    this.adjacencyList[v1].push(v2);\n    this.adjacencyList[v2].push(v1);\n  }\n\n  showConnections() {\n    for (const vertex in this.adjacencyList) {\n      console.log(vertex, \"->\", this.adjacencyList[vertex].join(\", \"));\n    }\n  }\n}\n\nconst graph = new Graph();\ngraph.addVertex(\"A\");\ngraph.addVertex(\"B\");\ngraph.addVertex(\"C\");\ngraph.addEdge(\"A\", \"B\");\ngraph.addEdge(\"A\", \"C\");\ngraph.showConnections();\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ผลลัพธ์:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">A -> B, C\nB -> A\nC -> A\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>จุดเด่นของ JavaScript Graph:\u003Cbr>✔️ ใช้ object หรือ Map ได้อย่างยืดหยุ่น\u003Cbr>✔️ เหมาะกับระบบ visualization หรือ graph UI\u003Cbr>✔️ ใช้งานง่าย เหมาะกับระบบจำลองการเชื่อมโยง เช่น social graph หรือ web crawler\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch3>🔗 Graph ใน Go\u003C\u002Fh3>\u003Cpre>\u003Ccode class=\"language-plaintext language-go\">package main\n\nimport \"fmt\"\n\ntype Graph struct {\n\tAdj map[string][]string\n}\n\nfunc NewGraph() *Graph {\n\treturn &Graph{Adj: make(map[string][]string)}\n}\n\nfunc (g *Graph) AddVertex(vertex string) {\n\tif _, exists := g.Adj[vertex]; !exists {\n\t\tg.Adj[vertex] = []string{}\n\t}\n}\n\nfunc (g *Graph) AddEdge(v1, v2 string) {\n\tg.Adj[v1] = append(g.Adj[v1], v2)\n\tg.Adj[v2] = append(g.Adj[v2], v1)\n}\n\nfunc (g *Graph) Print() {\n\tfor v, edges := range g.Adj {\n\t\tfmt.Printf(\"%s -> %v\\n\", v, edges)\n\t}\n}\n\nfunc main() {\n\tg := NewGraph()\n\tg.AddVertex(\"A\")\n\tg.AddVertex(\"B\")\n\tg.AddVertex(\"C\")\n\tg.AddEdge(\"A\", \"B\")\n\tg.AddEdge(\"A\", \"C\")\n\tg.Print()\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ผลลัพธ์:\u003C\u002Fp>\u003Cpre>\u003Ccode class=\"language-plaintext\">A -> [B C]\nB -> [A]\nC -> [A]\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp> \u003C\u002Fp>\u003Cp>ข้อดีของ Go Graph:\u003Cbr>✔️ โครงสร้างข้อมูลแบบ type-safe\u003Cbr>✔️ รองรับการทำงานกับข้อมูลขนาดใหญ่และซับซ้อน\u003Cbr>✔️ เหมาะกับระบบ backend เช่น pathfinding, network analysis, graph database engine\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>3. แนวทางปฏิบัติที่เหมาะสม (Best Practices)\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>การใช้งาน\u003C\u002Fth>\u003Cth>เหมาะกับระบบ\u003C\u002Fth>\u003Cth>ภาษาแนะนำ\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Tree (UI, JSON, File System)\u003C\u002Ftd>\u003Ctd>Frontend\u003C\u002Ftd>\u003Ctd>JavaScript\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Binary Tree, Search Tree\u003C\u002Ftd>\u003Ctd>Backend \u002F Algorithmic tasks\u003C\u002Ftd>\u003Ctd>Go\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Graph (Connections \u002F Pathfinding)\u003C\u002Ftd>\u003Ctd>Network \u002F Social Graph \u002F Map\u003C\u002Ftd>\u003Ctd>JavaScript & Go\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Cp>Best Practices:\u003Cbr>✅ แยกโครงสร้าง node และ edge ให้ชัดเจน\u003Cbr>✅ ใน Go: ใช้ struct + pointer เพื่อเพิ่มประสิทธิภาพหน่วยความจำ\u003Cbr>✅ ใน JS: ใช้ object หรือ Map เพื่อความยืดหยุ่น\u003Cbr>✅ สำหรับข้อมูลจำนวนมาก ใช้อัลกอริทึม traversal เช่น BFS (Breadth-First Search) หรือ DFS (Depth-First Search) อย่างเหมาะสม\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Ch2>4. สรุปเปรียบเทียบ Trees และ Graphs\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cfigure class=\"table\">\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>คุณสมบัติ\u003C\u002Fth>\u003Cth>JavaScript\u003C\u002Fth>\u003Cth>Go\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>Structure\u003C\u002Ftd>\u003Ctd>Class\u002FObject-based\u003C\u002Ftd>\u003Ctd>Struct & Pointer-based\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Performance\u003C\u002Ftd>\u003Ctd>ยืดหยุ่นแต่ช้ากว่า\u003C\u002Ftd>\u003Ctd>เร็วและจัดการหน่วยความจำได้ดี\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Built-in Support\u003C\u002Ftd>\u003Ctd>ไม่มี\u003C\u002Ftd>\u003Ctd>มี package และ struct รองรับ\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>Use Cases\u003C\u002Ftd>\u003Ctd>Frontend visualization \u002F JSON \u002F UI tree\u003C\u002Ftd>\u003Ctd>Backend algorithms, search, pathfinding\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Ffigure>\u003Cp> \u003C\u002Fp>\u003Chr>\u003Cp> \u003C\u002Fp>\u003Ch2>สรุป\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ทั้ง JavaScript และ Go ต่างมีจุดแข็งในการใช้งานโครงสร้างข้อมูลแบบ Tree และ Graph\u003C\u002Fp>\u003Cul>\u003Cli>💡 JavaScript เหมาะกับงานฝั่ง Frontend \u002F Visualization \u002F UI-based Tree\u003C\u002Fli>\u003Cli>⚙️ Go เหมาะกับงานฝั่ง Backend \u002F Search Algorithm \u002F Pathfinding \u002F Network Service\u003C\u002Fli>\u003C\u002Ful>\u003Cp> \u003C\u002Fp>\u003Ch2>ตอนต่อไป\u003C\u002Fh2>\u003Cp> \u003C\u002Fp>\u003Cp>ใน EP.34 ของซีรีส์ JS2GO เราจะพาคุณไปเรียนรู้ การจัดการ Heap และ Priority Queue ใน Go และ JavaScript ซึ่งเป็นหัวใจสำคัญของระบบที่ต้องใช้ Priority Scheduling เช่น Job Queue, Pathfinding, และ Recommendation Engine 🚀\u003C\u002Fp>\u003Cp> \u003C\u002Fp>\u003Cp>\u003Cstrong>อ่านบทความ Series อื่นๆ\u003C\u002Fstrong>\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FGolang\">\u003Cstrong>Golang The Series\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FJS2GO\">\u003Cstrong>JS2GO\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdev.school\u002Fblogs\u002Fcategories\u002FTailwind%20CSS\">\u003Cstrong>10 Ep ที่จะให้คุณเป็นมือโปร Tailwind CSS ในชั่วข้ามคืน\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>\u003Cstrong>🔵 Facebook: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\">\u003Cstrong>https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.academy.th\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🔴 YouTube : \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUC2eI2RxcA2zbTqZyHyWIfRg\">\u003Cstrong>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>📸 Instagram: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">\u003Cstrong>Superdev Academy\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🎬 TikTok: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\">\u003Cstrong>https:\u002F\u002Fwww.tiktok.com\u002F@superdevacademy?lang=th-TH\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>\u003Cp>\u003Cstrong>🌐 Website: \u003C\u002Fstrong>\u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\">\u003Cstrong>https:\u002F\u002Fwww.superdevacademy.com\u002F\u003C\u002Fstrong>\u003C\u002Fa>\u003C\u002Fp>","65_11zon_dug44n630d.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002Fti95qz6iljrhaou\u002F65_11zon_dug44n630d.webp","2026-03-04 08:45:51.610Z","",{"keywords":15,"locale":43,"school_blog":53},[16,23,28,33,38],{"collectionId":17,"collectionName":18,"created":19,"created_by":13,"id":20,"name":21,"updated":22,"updated_by":13},"sclkey987654321","school_keywords","2026-03-04 08:20:42.484Z","vslzz9nvv6n77cx","JavaScript","2026-04-10 16:07:28.339Z",{"collectionId":17,"collectionName":18,"created":24,"created_by":13,"id":25,"name":26,"updated":27,"updated_by":13},"2026-03-04 08:20:11.547Z","ey3puyme01a9bsw","Go","2026-04-10 16:07:25.893Z",{"collectionId":17,"collectionName":18,"created":29,"created_by":13,"id":30,"name":31,"updated":32,"updated_by":13},"2026-03-04 08:45:50.709Z","ydddkw4fzau6tjp","Tree","2026-04-10 16:13:04.861Z",{"collectionId":17,"collectionName":18,"created":34,"created_by":13,"id":35,"name":36,"updated":37,"updated_by":13},"2026-03-04 08:45:51.081Z","r1xmy2rhenjkyl1","Graph","2026-04-10 16:13:04.956Z",{"collectionId":17,"collectionName":18,"created":39,"created_by":13,"id":40,"name":41,"updated":42,"updated_by":13},"2026-03-04 08:45:30.765Z","nayuhpre9emd5xw","JS2GO","2026-04-10 16:12:59.160Z",{"code":44,"collectionId":45,"collectionName":46,"created":47,"flag":48,"id":49,"is_default":50,"label":51,"updated":52},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":54,"collectionId":55,"collectionName":56,"expand":57,"id":70,"views":71},"hsa1afr8fcnd6qb","pbc_2105096300","school_blogs",{"category":58},{"blogIds":59,"collectionId":60,"collectionName":61,"created":62,"created_by":13,"id":54,"image":63,"image_alt":13,"image_path":64,"label":65,"name":41,"priority":66,"publish_at":67,"scheduled_at":13,"status":68,"updated":69,"updated_by":13},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:24:37.986Z","js2_go_2_11zon_y6paxmuz32.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fhsa1afr8fcnd6qb\u002Fjs2_go_2_11zon_y6paxmuz32.webp",{"en":41,"th":41},10,"2025-08-11 03:41:08.820Z","published","2026-04-25 02:32:14.339Z","nxrcfxb76kjxuhx",221,"ti95qz6iljrhaou",[20,25,30,35,40],"2025-10-28 02:32:13.301Z","เรียนรู้โครงสร้างข้อมูล Tree และ Graph ที่ใช้ในระบบจริง เช่น ระบบค้นหา เส้นทาง และโครงสร้างข้อมูลแบบลำดับชั้น พร้อมตัวอย่างโค้ดใน JavaScript และ Go เพื่อเข้าใจการเชื่อมโยงข้อมูลและการ Traversal อย่างมีประสิทธิภาพ","js2go-ep33-trees-and-graphs-in-go-vs-javascript","2026-04-25 02:47:57.295Z",1,{"th":76}]