ฟังก์ชัน ในภาษา TypeScript

ในบทนี้ คุณจะได้เรียนรู้เกี่ยวกับฟังก์ชันในภาษา TypeScript ฟังก์ชันคือการรวบรวมชุดของคำสั่งให้เป็นเข้าด้วยกันเพื่อทำงานบางอย่างและสามารถนำมาใช้ซ้ำในโปรแกรมได้ผ่านการเรียกฟังก์ชัน ซึ่งนี่เป็นแนวคิดของการเขียนโปรแกรมแบบ Functional และนี่เป็นเนื้อหาในบทนี้

• ฟังก์ชันในภาษา TypeScript
• การประกาศฟังก์ชัน
• การส่งค่ากลับของฟังก์ชัน
• ประเภทข้อมูลของฟังก์ชัน
• ฟังก์ชันวาดต้นคริสต์มาส

ฟังก์ชันในภาษา TypeScript

ฟังก์ชัน (Function) คือส่วนของโปรแกรมที่ถูกกำหนดโดยรวมหลายคำสั่งเข้าด้วยกันเพื่อทำงานบางอย่าง ฟังก์ชันสามารถรับค่านำเข้าเพื่อนำมาคำนวณและส่งค่ากลับเมื่อทำงานเสร็จสิ้นได้ การสร้างฟังก์ชันทำให้เราสามารถนำมันกลับมาใช้ซ้ำได้ในโปรแกรมจากการเรียกใช้ฟังก์ชัน และนี่เองเป็นแนวคิดของการเขียนโปรแกรมแบบ Functional

นี่เป็นรูปแบบการประกาศฟังก์ชันในภาษา TypeScript

function fnName(parameters): void {
    // statements
}

ในการประกาศฟังก์ชันจะใช้คำสั่ง function ตามด้วยรายการพารามิเตอร์ของฟังก์ชันภายในวงเล็บ () คั่นแต่ละพารามิเตอร์ด้วยเครื่องหมายคอมมา (,) พารามิเตอร์อาจจะไม่มีก็ได้ ภายในบล็อคของฟังก์ชันประกอบไปด้วยคำสั่งของของโปรแกรมเพื่อทำงาน นอกจากนี้ ฟังก์ชันยังสามารถมีการส่งค่ากลับได้

function fnName(parameters): returnType {
    // statements
    return value;
}

ในกรณีที่ฟังก์ชันมีการส่งค่ากลับ ให้ระบุประเภทข้อมูลที่ต้องการส่งกลับ returnType ถัดจากพารามิเตอร์หลังเครื่องหมายโคลอน (:) และใช้คำสั่ง return สำหรับส่งค่ากลับ โดยคำสั่ง return นั้นเป็นเหมือนคำสั่งที่ใช้เพื่อจบการทำงานของฟังก์ชัน

สำหรับฟังก์ชันที่มีประเภทข้อมูลการส่งค่ากลับที่เป็น void เหมือนกับในรูปแบบแรก หมายความว่าฟังก์ชันดังกล่าวไม่มีการส่งค่ากลับ

การประกาศฟังก์ชัน

หลังจากที่คุณได้เห็นวิธีการประกาศฟังชันในภาษา TypeScript ไปแล้ว ต่อไปเรามาลองสร้างฟังก์ชันแรกเพื่อใช้งานในโปรแกรมกัน นี่เป็นฟังก์ชันสำหรับกล่าวคำทักทายชื่อที่ส่งเข้ามายังฟังก์ชันออกทางหน้าจอ

function greet(name: string): void {
    console.log(`Hi ${name}.`);
}

greet("Matteo");
greet("TypeScript");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Hi Matteo.
Hi TypeScript.

ในตัวอย่างนี้ เราได้ประกาศฟังชันที่มีชื่อว่า greet ฟังก์ชันนี้รับหนึ่งพารามิเตอร์ที่มีประเภทข้อมูลเป็น String ซึ่งเป็นชื่อที่จะถูกส่งเข้ามายังฟังก์ชันสำหรับกล่าวคำทักทายออกทางหน้าจอ จากนั้นเราได้เรียกใช้งานฟังก์ชันสองครั้งด้วยชื่อของฟังก์ชัน

greet("Matteo");
greet("TypeScript");

ในการเรียกใช้งานฟังก์ชัน เราระบุอาร์กิวเมนต์ที่สอดคล้องกับพารามิเตอร์ของฟังก์ชัน เนื่องจากฟังก์ชันนี้กำหนดหนึ่งพารามิเตอร์ที่เป็น String ดังนั้นเราจะส่งอาร์กิวเมนต์ที่เป็น String เช่นเดียวกันสำหรับฟังก์ชันเพื่อทำงาน

เมื่อมีการเรียกใช้งานฟังก์ชัน การทำงานในส่วนของโปรแกรมหลักจะย้ายไปทำงานในฟังก์ชัน จนกว่าฟังก์ชันจะทำงานเสร็จ โค้ดในส่วนของโปรแกรมหลักจึงจะทำงานคำสั่งถัดไปได้

ฟังก์ชันอาจจะมีพารามิเตอร์หรือไม่ก็ได้ ถ้าหากฟังก์ชันไม่มีพารามิเตอร์ เราแค่ปล่อยให้วงเล็บว่างเปล่าทั้งในตอนที่ประกาศและตอนเรียกใช้งานฟังก์ชัน นี่เป็นฟังก์ชันสำหรับแสดงเวลาปัจจุบันบนคอมพิวเตอร์ของคุณที่ปราศจากพารามิเตอร์

function currentTime(): void {
    let date = new Date();
    console.log(date.toUTCString());
}

currentTime();

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Fri, 17 Dec 2021 21:14:43 GMT

ในตัวอย่างนี้ เราได้ประกาศฟังก์ชัน currentTime ซึ่งเป็นฟังก์ชันที่ไม่มีพารามิเตอร์ ฟังก์ชันนี้ใช้สำหรับแสดงเวลาปัจจุบันออกทางหน้าจอ หรือกล่าวอีกนัยหนึ่ง มันเป็นนาฬิกาบอกเวลาของเรานั่นเอง เราสร้างออบเจ็คของวันที่จากคลาส Date เพื่อรับเอาเวลาปัจจุบันบนคอมพิวเตอร์ และเรียกใช้เมธอด toUTCString บนออบเจ็คสำหรับแสดงวันที่ในรูปแบบ UTC

การส่งค่ากลับของฟังก์ชัน

ฟังก์ชันที่ไม่มีการส่งค่ากลับมักจะจบการทำงานในตัวมันเอง ในทางตรงกันข้าม เราสามารถส่งค่ากลับจากฟังก์ชันไปยังจุดที่เรียกใช้งานได้ ต่อไปมาสร้างฟังก์ชันสำหรับบวกสองตัวเลขเข้าด้วยกันและส่งค่ากลับเป็นผลลัพธ์ของการบวก นี่เป็นตัวอย่าง

function add(a: number, b: number): number {
    return a + b;
}

let x: number = add(1, 2);
let y: number = add(5, 4);
console.log(`1 + 2 = ${x}`);
console.log(`5 + 4 = ${y}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

1 + 2 = 3
5 + 4 = 9

ในตัวอย่างนี้ เป็นโปรแกรมบวกเลขอย่างง่าย เราได้ประกาศฟังก์ชัน add ซึ่งรับสองพารามิเตอร์ที่เป็นตัวเลขเพื่อนำมาหาผลรวม จากนั้นเราใช้คำสั่ง return เพื่อส่งค่าผลรวมของตัวเลขทั้งสองเป็นค่าส่งกลับของฟังก์ชัน

let x: number = add(1, 2);
let y: number = add(5, 4);

จากนั้นเรียกใช้งานฟังก์ชันและเก็บผลลัพธ์ไว้ในตัวแปร x และ y เพื่อนำมาแสดงผลออกทางหน้าจอ จะเห็นว่าเราสามารถเรียกใช้ฟังก์ชันได้หลายครั้งจากการประกาศเพียงครั้งเดียว หากปราศจากฟังก์ชัน เราจะต้องเขียนคำสั่งสำหรับบวกในแต่ละตัวแปรทุกครั้ง ยกตัวอย่างเช่น

let x: number = 1 + 2;
let y: number = 5 + 4;

นี่คงจะเป็นเรื่องที่ไม่สะดวกมากนักถ้าหากเราต้องการทำอะไรที่มากกว่าการบวก สำหรับงานบางอย่างที่มีคำสั่งการทำงานเป็นจำนวนมาก การกำหนดมันไว้ในฟังก์ชันจะทำให้โค้ดถูกแบ่งออกเป็นส่วนๆ และสามารถนำมาใช้ซ้ำในโปรแกรมได้ง่าย

ต่อไปมาดูตัวอย่างเพิ่มเติมสำหรับการคำนวณทางคณิตศาสตร์ มาเขียนฟังก์ชันสำหรับหาค่า ห.ร.ม ของสองตัวเลข โดยนิยามของ ห.ร.ม คือตัวเลขที่มากที่สุดที่สามารถหารตัวเลขทั้งสองได้ลงตัว นี่เป็นตัวอย่างของโปรแกรม

function gcd(a: number, b: number): number {
    let gcd: number;
    let min: number;
    if (a < b) {
        min = a;
    } else {
        min = b;
    }

    for (let i = 1; i <= min; i++) {
        if (a % i == 0 && b % i == 0) {
            gcd = i;
        }
    }
    return gcd;
}

console.log(`GCD of 8 and 12 is ${gcd(8, 12)}`);
console.log(`GCD of 34 and 51 is ${gcd(34, 51)}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

GCD of 8 and 12 is 4
GCD of 34 and 51 is 17

ในตัวอย่างนี้ เราได้ประกาศฟังก์ชัน gcd สำหรับหาค่า ห.ร.ม ของสองตัวเลขที่ส่งเป็นพารามิเตอร์ของฟังก์ชัน โดยฟังก์ชันส่งค่ากลับเป็น ห.ร.ม ของตัวเลขที่หาได้ เนื่องจากการคำสั่งสำหรับการหา ห.ร.ม นั้นมีเป็นจำนวนมาก มันจึงเหมาะสมเป็นอย่างยิ่งในการประกาศเป็นฟังก์ชันเพื่อเรียกใช้งาน ต่อไปมาดูว่าโค้ดในฟังก์ชันทำงานอย่างไร

let min: number;
if (a < b) {
    min = a;
} else {
    min = b;
}

เนื่องจาก ห.ร.ม ของสองตัวเลขเป็นตัวเลขที่ใหญ่ที่สุดที่หารตัวเลขทั้งสองลงตัว แต่จะไม่เกินค่าที่น้อยกว่า ดังนั้นเราค้นหาตัวเลขที่น้อยกว่าจากสองพารามิเตอร์เก็บไว้ในตัวแปร min นั่นหมายความว่างานของเราคือหาตัวเลขที่มากที่สุดระหว่าง 1 ถึง min ที่หารทั้ง a และ b ลงตัว

for (let i = 1; i <= min; i++) {
    if (a % i == 0 && b % i == 0) {
        gcd = i;
    }
}

จากนั้นเราใช้คำสั่ง for loop ในการค้นหาตัวเลขจาก 1 ถึง min หากพบว่าตัวเลขทั้งสองสามารถหารด้วย i ลงตัว จะถือว่านี่เป็น ห.ร.ม ของตัวเลข และเมื่อจบการทำงานของลูปเราจะได้รับค่า ห.ร.ม เก็บไว้ในตัวแปร gcd และส่งเป็นค่ากลับของฟังก์ชัน

จะเห็นว่าในการใช้งานฟังก์ชัน เราสามารถรวบรวมชุดคำสังเพื่อแก้ปัญหาบางอย่างเข้าด้วยกัน และนำฟังก์ชันมาเรียกใช้งานได้ไม่จำกัด นี่เป็นแนวคิดที่สำหรับที่สุดในการเขียนโปรแกรมแบบ Functional

ในการใช้งานคำสั่ง return นั้นไม่จำเป็นต้องทำในตอนท้ายของฟังก์ชันเสมอไป คุณสามารถส่งค่ากลับที่ไหนก็ได้ในฟังก์ชันและในหนึ่งฟังก์ชันอาจมีการส่งกลับได้มากกว่าหนึ่งที่ นี่เป็นตัวอย่างของโปรแกรมคำนวณหาค่าแฟกทอเรียลของตัวเลขจำนวนเต็ม n ซึ่งแฟกทอเรียลคือผลคูณกันตั้งแต่ 1 ถึง n และเราจะนำมันมาเขียนเป็นฟังก์ชัน

function fac(n: number): number {
    if (n == 0) {
        return 1;
    }
    let sum: number = 1;
    for (let i = 1; i <= n; i++) {
        sum = sum * i;
    }
    return sum;
}

console.log(`0! = ${fac(0)}`);
console.log(`5! = ${fac(5)}`);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

0! = 1
5! = 120

จากตัวอย่างเป็นการประกาศฟังก์ชัน fac สำหรับหาค่าแฟกทอเรียลของพารามิเตอร์ที่ส่งเข้ามายังฟังก์ชัน เนื่องจากเราทราบว่าค่าของ 0! นั้นเท่ากับหนึ่งโดยนิยาม ดังนั้นเราสามารถใช้คำสั่ง return เพื่อส่งค่ากลับได้ทันที นี่จะทำให้ฟังก์ชันจบการทำงานโดยที่ไม่ต้องทำส่วนอื่นต่อ

ในกรณีที่ค่าของตัวเลขไม่เท่ากับ 0 โปรแกรมจะทำการคำนวณหาค่าแฟกทอเรียลจากคำสั่ง for loop ด้านล่าง เพื่อนำตัวเลขจาก 1 ถึง n มาคูณกัน และส่งค่ากลับเมื่อการทำงานเสร็จสิ้น จะเห็นว่าเราสามารถใช้คำสั่ง return เพื่อส่งค่ากลับจากส่วนไหนก็ได้เมื่อต้องการ

นั่นหมายความว่าเมื่อคำสั่ง return ในฟังก์ชัน เป็นการสั่งให้ฟังก์ชันส่งค่ากลับและจบการทำงาน และโปรแกรมจะย้อนกลับไปทำงานยังส่วนที่เรียกใช้ฟังก์ชันต่อไป

ประเภทข้อมูลของฟังก์ชัน

ในภาษา TypeScript นั้นฟังก์ชันมีประเภทข้อมูลเป็น Function ซึ่งนี่สามารถนำไปใช้ได้กับฟังก์ชันทุกรูปแบบในภาษา TypeScript กล่าวคือฟังก์ชันที่มีพารามิเตอร์และการส่งค่ากลับ (พร้อมทั้งประเภทข้อมูล) เป็นแบบไหนก็ได้ นี่เป็นตัวอย่างการประกาศตัวแปรสำหรับเก็บฟังก์ชัน

function sayHi(name: string): void {
    console.log(`Hi ${name}.`);
}

let myFunction: Function = sayHi;
myFunction("David");

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Hi David.

ในตัวอย่างนี้ เราได้ประกาศตัวแปร myFunction สำหรับเก็บค่าของฟังก์ชัน sayHi ที่ถูกประกาศไปก่อนหน้า เนื่องจากตัวแปรนี้เก็บค่าของฟังก์ชัน ดังนั้นเราสามารถใช้มันเหมือนกับฟังก์ชันได้ทุกประการ เช่น การนำมาเรียกใช้งาน เป็นต้น

นอกจากนี้ ค่าของฟังก์ชันสามารถเป็นฟังก์ชัน Expression หรือ Arrow function ได้ ซึ่งนี่ก็เป็นอีกรูปแบบของการประกาศฟังก์ชันในภาษา TypeScript ยกตัวอย่างเช่น

let fn1: Function = function (name: string): void {
    console.log(`Hi ${name}.`);
};

let fn2: Function = (name: string): void => {
    console.log(`Hello ${name}.`);
};

ในตัวอย่าง ทั้งฟังก์ชัน Expression และ Arrow function เป็นฟังก์ชันที่ถูกสร้างในขณะที่โปรแกรมทำงาน และจะต้องสร้างก่อนการนำไปใช้งาน และมันเป็นฟังก์ชันที่สามารถใช้กับประเภทข้อมูล Function ได้

ต่อไปนี้เป็นฟังก์ชันที่มีพารามิเตอร์และประเภทข้อมูลในรูปแบบต่างๆ ที่ถูกประกาศในรูปแบบของฟังก์ชัน Expression

let add: Function = function (a: number, b: number): number {
    return a + b;
};

let lengthOfString: Function = function (str: string): number {
    return str.length;
};

ในตัวอย่างนี้ ทั้งตัวแปร add และ lengthOfString ถูกประกาศให้มีประเภทข้อมูลเป็น Function ซึ่งมีการเก็บฟังก์ชันที่มีจำนวนพารามิเตอร์ ประเภทข้อมูลของพารามิเตอร์ และการส่งค่ากลับที่แตกต่างกัน ดังนั้นจะสามารถกล่าวได้ว่ามันเป็นประเภทข้อมูลทั่วไปของทุกฟังก์ชันในภาษา TypeScript

เนื่องจากภาษา TypeScript ถูกออกแบบมาให้เข้มงวดในเรื่องประเภทข้อมูล ดังนั้นเราสามารถใช้คำสั่ง type ในการกำหนดประเภทข้อมูลให้กับฟังก์ชันเพื่อให้มีรูปแบบของพารามิเตอร์และการส่งค่ากลับในแบบที่ต้องการได้

ในตัวอย่างต่อไป มาสร้างประเภทข้อมูลของฟังชันที่รับพารามิเตอร์เป็นสองตัวเลข และส่งค่ากลับเป็นตัวเลขด้วยคำสั่ง type ในภาษา TypeScript กัน นี่เป็นตัวอย่าง

type mathFn = (a: number, b: number) => number;

const add: mathFn = function (a: number, b: number): number {
    return a + b;
}

const subtract: mathFn = function (a: number, b: number): number {
    return a - b;
}

ในตัวอย่างนี้ เราได้สร้างประเภทข้อมูลสำหรับฟังก์ชันที่มีชื่อว่า mathFn โดยมันมีสองพารามิเตอร์ที่เป็นตัวเลขและส่งค่ากลับเป็นตัวเลข จากนั้นนำมันไปใช้เป็นประเภทข้อมูลสำหรับสองฟังก์ชัน add และ subtract นั่นหมายความว่าฟังก์ชันเหล่านี้จะต้องมีสองพารามิเตอร์ที่เป็นตัวเลขและส่งค่ากลับเป็นตัวเลขเช่นเดียวกันกับประเภทข้อมูลของมัน

จะเห็นว่าการประกาศประเภทข้อมูลด้วยคำสั่ง type ทำให้เราสามารถควบคุมโครงสร้างของฟังก์ชัน และนำประเภทข้อมูลนั้นกลับมาใช้ใหม่ได้ ซึ่งนี่เป็นสิ่งที่ดีเมื่อหลายฟังก์ชันต้องการแบ่งปันโครงสร้างที่เหมือนกัน เช่น มันอาจนำไปใช้กับฟังก์ชันสำหรับการคูณและการหารได้อีก เป็นต้น

ฟังก์ชันวาดต้นคริสต์มาส

สำหรับตัวอย่างสุดท้ายในการใช้งานฟังก์ชัน เนื่องจากตอนนี้ใกล้จะถึงเทศกาลคริสต์มาสแล้ว เรามาเขียนโปรแกรมสำหรับวาดรูปต้นคริสต์มาสกัน นี่เป็นตัวอย่างของโปรแกรมที่ทุกคนสามารถสร้างต้นคริสมาสต์ของพวกเขาได้

function drawTrunk(treeHeight: number): void {
    let treeWidth: number = treeHeight * 2;
    let halfCol = Math.floor(treeWidth / 2);

    // trunk's height by 30 percent of the tree
    let trunkHeight: number = Math.floor(treeHeight * 0.3);
    // trunk's width by 8 percent of the tree
    let trunkWidth: number = Math.floor(treeWidth * 0.08);

    for (let i = 0; i < trunkHeight; i++) {
        let row: string = "";
        for (let j = 0; j < treeWidth; j++) {
            if (j >= halfCol - trunkWidth && j <= halfCol + trunkWidth) {
                row += "T";
            } else {
                row += " ";
            }
        }
        console.log(row);
    }
}

function drawTree(height: number): void {
    let width: number = height * 2;
    let halfCol = Math.floor(width / 2);

    for (let i = 0; i < height; i++) {
        let row: string = "";
        for (let j = 0; j < width; j++) {
            if (j >= halfCol - i - 1 && j <= halfCol + i) {
                let r = Math.random();
                // draw decoration stuff by 30 percent
                if (r <= 0.1) {
                    row += "*";
                } else if (r <= 0.2) {
                    row += "x";
                } else if (r <= 0.3) {
                    row += "+";
                } else {
                    // draw the leave
                    row += "C";
                }
            } else {
                row += " ";
            }
        }
        console.log(row);
    }
    drawTrunk(height);
}

console.log("Christopher's Christmas Tree");
drawTree(10);

console.log("\nEmily's Christmas Tree");
drawTree(8);

console.log("\nRebecca's Christmas Tree");
drawTree(6);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Christopher's Christmas Tree
         +C
        CCxC
       CC+**C
      CCC*xCCC
     CC+CC*CCCC
    C*xCCC+CCCC*
   +CC*CCC+++CC*+
  C+CxCCCCCCxCC++*
 *CCC*CCC+CCCCCC+C*
CCxCCC+CCCCCCxCCCCCC
         TTT
         TTT
         TTT

Emily's Christmas Tree
       ++
      +CxC
     CCC+CC
    **+*CC++
   *CC**Cx+*C
  xCCCCCCCCCCC
 *CC*+CC*C+CCCC
CCCx+C*Cx+CCC*CC
       TTT
       TTT

Rebecca's Christmas Tree
     CC
    CC+x
   CCxCx+
  CCx+*CCC
 CCCCCCCCCC
CCxCCCCCCCC+
      T

ในตัวอย่างนี้ เป็นโปรแกรมสำหรับวาดรูปต้นคริสมาสต์ลงบนหน้าจอ (Terminal) เราได้ประกาศฟังก์ชัน drawTree ซึ่งเป็นฟังก์ชันสำหรับการทำงานทั้งหมด โดยมันรับพารามิเตอร์เป็นความสูงของต้นคริมมาสต์ที่ต้องการวาด และไม่มีการส่งค่ากลับเนื่องจากการทำงานทั้งหมดเสร็จสิ้นภายในฟังก์ชัน ต่อไปเป็นการอธิบายการทำงานของโปรแกรมในแต่ละขั้นตอน

let width: number = height * 2;
let halfCol = Math.floor(width / 2);

ในตอนแรกที่ฟังก์ชันเริ่มทำงาน เราคำนวณหาความกว้างของต้นคริสมาสต์โดยใช้มันเป็นสองเท่าของความสูงและเก็บไว้ในตัวแปร width และหาจุดกึ่งกลางของลำต้นโดยนำความกว้างไปหารด้วย 2 เก็บไว้ในตัวแปร halfCol

for (let i = 0; i < height; i++) {
    ...
    for (let j = 0; j < width; j++) {
        ...
    }
}

จากนั้นเราใช้คำสั่ง for loop แบบซ้อนกันในการวาดส่วนใบของต้นคริสมาสต์ โดยลูปด้านนอกจะควบคุมความสูงของต้นไม้ และลูปด้านในควบคุมความกว้าง คุณสามารถจินตนาการได้ว่านี่คือการสร้างตารางขนาด height * width ที่เราจะวาดตัวอักษรลงไป

if (j >= halfCol - i - 1 && j <= halfCol + i) {
    let r = Math.random();
    // draw decoration stuff by 30 percent
    if (r <= 0.1) {
        row += "*";
    } else if (r <= 0.2) {
        row += "x";
    } else if (r <= 0.3) {
        row += "+";
    } else {
        // draw the leave
        row += "C";
    }
} else {
    row += " ";
}

นี่เป็นการกำหนดเงื่อนไขในการวาดส่วนใบของต้นคริสมาสต์ เพื่อค้นหาพื้นที่ของใบที่สามารถวาดได้ เราใช้เงื่อนไข j >= halfCol - i - 1 && j <= halfCol + i ซึ่งหมายความว่าใบจะถูกเริ่มวาดจากกึ่งกลางของลำต้น halfCol และขยับไปทางซ้าย (- i - 1) และทางด้านขวา (+ i) ตามจำนวนแถวที่เพิ่มขึ้นโดยตัวแปร i

นอกจากนี้ เราได้สุ่มเครื่องประดับสำหรับตกแต่งใบเป็นจำนวน 30 เปอร์เซ็นของพื้นที่สำหรับวาดใบทั้งหมด โดยการใช้เมธอด Math.random() สำหรับสุ่มตัวเลขที่จะให้ค่าระหว่าง 0 ถึง1 (แบบไม่รวม) และนี่ถือว่าเป็นการเสร็จสิ้นการวาดใบของต้นไม้

drawTrunk(height);

เมื่อวาดใบเสร็จแล้วเรายังขาดอีกสิ่งหนึ่งที่จะต้องวาดนั่นคือลำต้น แทนที่จะวาดลำต้นในฟังก์ชันเดียวกัน เราสร้างฟังก์ชัน drawTrunk สำหรับวาดลำต้นโดยเฉพาะ ดังนั้นเมื่อวาดใบเสร็จแล้วเราเรียกฟังก์ชันนี้ต่อสำหรับวาดลำต้น

Note: ในส่วนนี้คุณจะเห็นว่าฟังก์ชันสามารถเรียกใช้ฟังก์ชันอื่นได้ นี่เป็นรูปแบบการทำงานพื้นฐานของฟังก์ชัน การทำงานทำงานของฟังก์ชันจะเป็นแบบ Stack ฟังก์ชันที่ถูกเรียกใช้ภายในฟังก์ชันอื่นจะทำงานให้เสร็จก่อน ก่อนที่ฟังก์ชันหลักจะทำงานได้ต่อ

// trunk's height by 30 percent of the tree
let trunkHeight: number = Math.floor(treeHeight * 0.3);
// trunk's width by 8 percent of the tree
let trunkWidth: number = Math.floor(treeWidth * 0.08);

ฟังก์ชัน drawTrunk รับพารามิเตอร์เป็นความสูงต้นคริสมาสต์จากฟังก์ชันก่อนหน้า จากนั้นเรากำหนดค่าความสูงของต้นเป็น 30 เปอร์เซนต์ของความสูงของใบ และความกว้างของลำต้นเป็น 8 เปอร์เซนต์ของความสูงของใบ นั่นหมายความว่าขนาดของลำต้นจะปรับขนาดตามความสูงของต้นไม้อัตโนมัติ

for (let i = 0; i < trunkHeight; i++) {
    let row: string = "";
    for (let j = 0; j < treeWidth; j++) {
        if (j >= halfCol - trunkWidth && j <= halfCol + trunkWidth) {
            row += "T";
        } else {
            row += " ";
        }
    }
    console.log(row);
}

และสุดท้ายเราใช้คำสั่ง for loop เพื่อวาดลำต้นอีกครั้งโดยสร้างตารางที่มีขนาด trunkHeight * treeWidth โดยเงื่อนไขในการวาดลำต้นจะเริ่มจากตรงกลาง halfCol และขยายพื้นที่ไปทางซ้ายและทางขวา 8 เปอร์เซนต์ของความสูงของใบไม้ที่ได้กำหนดในตัวแปร trunkWidth

console.log("Christopher's Christmas Tree");
drawTree(10);

console.log("\nEmily's Christmas Tree");
drawTree(8);

console.log("\nRebecca's Christmas Tree");
drawTree(6);

ในที่สุดการวาดต้นคริสมาสต์ก็สำเร็จ และเรานำฟังก์ชันนี้ไปวาดต้นคริสมาสต์ให้กับเพื่อนๆ โดยพวกเขาสามารถเลือกความสูงของต้นคริสมาสต์ที่ต้องการได้ ในตัวอย่าง ต้นคริสมาสต์ของคริสโตเฟอร์มีความสูงเป็น 10 ของเอมิลี่มีความสูงเป็น 8 และของเบคก้ามีความสูงเป็น 6 และตอนนี้คุณสามารถลองวาดต้นคริสมาสต์ของคุณเองได้

จะเห็นว่าฟังก์ชันช่วยให้โปรแกรมทำงานเป็นระบบมากขึ้น เนื่องจากโค้ดถูกนำไปสร้างเป็นฟังก์ชันตามหน้าที่การทำงานของมัน นี่มีประโยชน์มากในการนำกลับมาใช้ใหม่และดูแลรักษา เช่น หากมีข้อผิดพลาดบางอย่างในฟังก์ชัน เราสามารถแก้ไขในที่เดียวและส่วนที่เรียกใช้ฟังก์ชันทั้งหมดจะได้รับการแก้ไขตามไปด้วย เป็นต้น

ในบทนี้ คุณได้เรียนรู้เกี่ยวกับฟังก์ชันในภาษา TypeScript เราได้พูดถึงการประกาศและใช้งานฟังก์ชัน การสร้างประเภทข้อมูลสำหรับฟังก์ชันด้วยคำสั่ง type ที่ใช้สำหรับกำหนดโครงสร้างให้กับฟังก์ชัน และสุดท้ายเป็นการวาดต้นคริสมาสต์เพื่อต้อนรับเทศกาลคริสมาสต์ที่กำลังจะมาถึง