How to Design Program: Ep. 14

A’phirat Nimanussonkul
4 min readJun 13, 2020

การออกแบบโปรแกรมที่นักพัฒนาควรรู้ Ep.14 : Reference

คำเตือน: บทความนี้ไม่ได้สอนหรือมาอธิบายหลักการอะไรครับ เป็นบทความที่มาจากความคิดเห็นของผม มาจากสิ่งที่ผมสรุปจากการเรียนคอร์ส “How to Code: Simple Data” จาก edX ซึ่งได้เรียนพร้อมๆกับเพื่อนในทีม ในบริษัท
บทความต่อไปนี้ใน Series “How to Design Program” เป็นการจดสรุปของตัวผมเองครับ เพื่อบันทึกความเข้าใจของตัวเองในการเรียนคอร์สนี้เท่านั้นครับผม

จากบทความที่แล้วเราได้รู้จักคำว่า Self-Reference ซึ่งเป็นการอ้างอิงตัวเองอีกครั้งหนึ่งจากตัวแปรประเภท List

ตัวอย่างการประกาศตัวแปร List

การประกาศ ex1 นั้นเป็นตัวแปรแบบ List ที่ค่าด้านในเป็น Number ซึ่งเป็นตัวแปรประเภท Primitive Data (String, Boolean, Integer …) จะเห็นได้ว่าเป็นค่าที่ไม่มีการอ้างอิงอะไรกับใครเลย เป็นตัวแปรแบบพื้นฐาน

แต่ถ้าหากเราเปลี่ยนจากค่า Number ไปเป็นตัวแปรแบบ Non-Primitive Data ขึ้นมาละ เช่นตัวแปรประเภท Compound Data

ตัวอย่างการประกาศตัวแปร List ที่ด้านในเป็น Compound Data

หรือเรียกได้ว่า List of Compound คือ list ของข้อมูลที่เป็น Compound Data ผลที่ตามมาก็คือในขั้นตอน HtDD & HtDW จะแตกต่างออกไป เนื่องจาก (make-student “Aphirat” “A”)) นั้นก็มีการ Reference ไปยังอีก Data Definitions อื่น

เรามาดูกันว่าการทำ Data Definitions & Function Definitions จะต้องเพิ่มเติมตรงไหนบ้าง จากโจทย์นี้เลยครับ

Tuition graph

download here

ภาพโจทย์ tuition-graph จาก edX

Eva ต้องการที่จะเข้าศึกษาที่มหาลัย แต่เขาต้องเลือกมหาลัยที่จะเข้าศึกษา โดยพิจารณาจากค่าเทอมที่ต้องจ่าย และเขาต้องการสร้าง bar chart ดังภาพ เพื่อแสดงข้อมูลของชื่อมหาลัยและค่าเทอม เพื่อง่ายต่อการเปรียบเทียบ

(A) ให้ออกแบบข้อมูลที่ represent ข้อมูลที่ Eva มี ประกอบไปด้วย School เป็นตัวแปรประเภท Compound Data เก็บชื่อมหาลัยและค่าเทอม และ ListOfSchool เป็นตัวแปรประเภท List ที่มีข้อมูลด้านในเป็น School

(B) ให้ออกแบบฟังก์ชั่นที่รับข้อมูล ListOfSchool เข้ามาและสร้าง bar chart

(C) ให้ออกแบบฟังก์ชั่นที่รับข้อมูล ListOfSchool เข้ามาและ return School ที่มีค่าเทอมน้อยที่สุดออกไป

Constant

เนื่องจาก bar chart มีสิ่งที่สามารถและควรจะประกาศเป็นค่าคงที่ไว้ จึงขออนุญาตประกาศก่อน นั่นคือ

ภาพการประกาศค่าคงที่เพื่อใช้ในการวาด bar chart

Y-SCALE คืออัตราส่วนความสูง เพื่อใช้คำนวณความสูง bar chart จากค่าเทอม

(A) Data Definitions

School

ภาพการทำ Data Definitions ตัวแปร School

ListOfSchool

ในการประกาศ Data Definitions ของ ListOfSchool ก็เหมือนะจะไม่มีอะไรเปลี่ยนจากเดิม แต่ในขั้นตอนย่อยขั้นตอนที่ 1 ที่ต้องอธิบาย self-reference ในส่วนนี้มีการอ้างอิงไปยัง School ตรงนี้คือส่วนที่ 1 ที่มีการอ้างอิง (Reference) เพราะ School ไม่ใช่ Primitive Data

ในการประกาศ Template ก็ประกาศเหมือนที่ทำกับ Primitive Data ทั่วๆไป

ภาพการประกาศ Template ตัวแปร ListOfSchool (ยังไม่สมบูรณ์)

เนื่องจาก (first los) จะได้ค่าที่อยู่ใน List ชั้นแรกสุด นั่นก็คือ School ซึ่งเป็น compound data และตัว compound data เองก็มี Template ในการเข้าถึงตัวแปรของตัวเองอยู่แล้ว นั่นคือ fn-fot-school จากการประกาศ School ด้านบน ดังนั้นเราจึงต้องเพิ่มการเข้าถึงตัวแปรใน School โดยการเรียกฟังก์ชั่น fn-for-school พร้อมกับเพิ่มคำอธิบายที่กรอบสีแดงด้านล่าง

ภาพการประกาศ Template ตัวแปร ListOfSchool

Reference & Natural Helper

เมื่อเรามีการอ้างอิงไปยังข้อมูลที่เป็น Non-Primitive Data แล้ว และตัวแปร Non-Primitive Data เองก็ต้องเรียกฟังก์ชั่นตัวเองเพื่อเข้าถึงข้อมูล เราเรียกว่า Natural helper

ภาพอธิบายความสัมพันธ์ Natural helper จาก edX

(B) Function Definitions Chart

ก่อนอื่นเราต้องมาหาวิธีที่วาด bar chart ก่อน เมื่อพิจารณาแล้วก็มีสามส่วนที่ต้องวาดคือ พื้นที่ bar chart สีฟ้า, ชื่อมหาลัยที่ตั้งฉาก และ กรอบสีดำที่คลุม bar chart

ขั้นตอนต่อก็คือ นำสามส่วนนี้มารวมกัน

เริ่มจากขั้นตอนที่ 1–3 กันดีกว่าครับ ส่วนที่ยากและเยอะอยู่ที่การวาด bar chart ที่แหล่ะครับ

จากบรรทัดที่ 62 ได้วาด bar chart ขึ้นมาหนึ่ง bar เพราะข้อมูล LOS2 มีข้อมูลมหาลัยอยู่ 1 จึงไม่มีปัญหาอะไร

แต่ในบรรทัดที่ 67 มี bar chart อยู่ 3 bar ดังนั้นจึงต้องเพิ่ม (beside ) เข้ามาเพื่อให้วางเรียงต่อๆกัน แต่นั้นทำให้ทั้งสาม bar chart ไม่ได้อยู่ชิดด้านล่าง ทำให้ต้องใส่ (deside/align “botttom”) เข้ามาช่วย

เมื่อกรณีทดสอบในบรรทัดที่ 67 มี (beside/align “bottom”) ทำให้กรณีทดสอบบรรทัดที่ 62 ต้องมีด้วย เพื่อให้ได้ผลลัพธ์ที่เหมือนกัน (ถึงแม้กรณีแท่งเดียวจะไม่มีปัญหาอะไร)

แต่เมื่อเราใส่ (beside/align “bottom” …) ไปแล้ว เมื่อรันก็จะจบกับ error เนื่องจาก beside/align ต้องการ 3 argument แต่เราใส่ไปแค่สอง นั่นคือ “bottom” และ bar chart แล้วจะไปหา argument ที่สามอย่างไร

คำตอบก็คือรูปว่างๆสักรูป ขอให้เป็น type image ก็พอ จึงวาด (square 0 “solid” “white”) เข้าไป

แต่เมื่อเราเพิ่มที่กรณีทดสอบบรรทัดที่ 62 ทำให้กรณีทดสอบบรรทัดที่ 68 (จากเดิม 67) ต้องเพิ่มเข้าไปด้วย ก็จะได้หน้าตากรณีทดสอบดังนี้

กรณีทดสอบฟังก์ชั่น chart

ในขั้นตอนที่ 5 (HtDF) นั้นมีส่วนที่ยากคือ เราต้องวาด bar chart ตามที่ข้อมูลมี เมื่อพิจารณาจากกรณีทดสอบด้านบนแล้วจะพบว่า (beside/align “bottom” …) นั้นจะต้องถูกเรียกครั้งเดียว อีกทั้งคลุม bar chart และรูปภาพว่างๆด้วย

อีกทั้งเราต้องสร้างฟังก์ชั่นหนึ่งขึ้นมาจาก Natural helper นั่นเอง ชื่อว่า (maker-bar s) โดยจะรับตัวแปร School เข้ามาและสร้าง bar chart 1 แท่ง

ภาพฟังก์ชั่น make-bar

ดังนั้นทำให้ที่ฟังก์ชั่น chart ให้เรียกฟังก์ชั่น make-bar โดยส่ง (first los) เข้าไป

ภาพ HtDF ขั้นตอนที่ 4,5 ของฟังก์ชั่น chart

(C) Function Definitions Lowest tuition

ฟังก์ชั่นนี้รับตัวแปร ListOfSchool เข้ามาและ return school ที่ค่าเทอมน้อยที่สุด

สิ่งที่ต่างออกไปคือ ในกรณีที่ empty นั้นต้อง return ตัวแปรประเภท School ออกไป และเป็นการตรวจสอบหาค่าที่น้อยที่สุด ดังนั้นจึงต้องสร้าง School ที่ค่าเทอมมากๆออกไป เพื่อให้โปรแกรมตรวจสอบข้อมูลที่มีค่าจริงๆ

Summary

การอ้างอิง (Reference) จะเกิดขึ้นก็ต่อเมื่อ ค่าที่นำมาสร้าง List เป็นตัวแปรประเภท Non-Primitive Data เช่น Compound Data จะเกิดการอ้างอิงไปยังตัวแปรนั้นๆอีกครั้งหนึ่ง

เมื่อมีการอ้างอิงตอนประกาศ Comment (HtDD) แล้วตอนประกาศ template ก็จะเกิด Natural helper ขึ้น ซึ่งเป็นการอ้างอิงฟังก์ชั่นที่ทำงานกับตัวแปร Non-Primitive Data นั้นๆ

Next Episode

How to Design Program Ep. 15: Natural (coming soon)

Last Episode

How to Design Program Ep. 13: Self-Reference

--

--