คำสั่งวนซ้ำ while, do while ในภาษา JavaScript

ในบทก่อนหน้า คุณได้เรียนรู้คำสั่งเลือกเงื่อนไข if else และ switch case เพื่อทำให้โปรแกรมสามารถตัดสินใจในการทำงานได้ ในบทนี้ เราจะพูดถึงคำสั่งวนซ้ำ while loop สำหรับควบคุมเพื่อให้โปรแกรมทำงานบางอย่างซ้ำๆ ภายในเงื่อนไขที่กำหนด นี่เป็นเนื้อหาของบทนี้

• คำสั่ง while loop
• คำสั่ง do-while loop

คำสั่ง while loop

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

while (condition) {
    // Statements
}

ในการใช้งานคำสั่ง while loop เราจะต้องกำหนดเงื่อนไข condition โปรแกรมจะทำงานในลูปในขณะที่เงื่อนไขเป็นจริง และจบการทำงานของลูปเมื่อเงื่อนไขเป็นเท็จ ดังนั้นภายในลูปเราจะต้องทำอะไรบางอย่างเพื่อทำให้เงื่อนไขเป็นเท็จเพื่อจบการทำงานของลูป

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

ต่อไปเราจะมาดูวิธีการใช้งานคำสั่ง while loop เพื่อนับและแสดงตัวเลขจาก 1 - 10 ออกทางหน้าจอ นี่เป็นตัวอย่าง

let i = 1;
while (i <= 10) {
    console.log(i);
    i++;
}
console.log("Loop ended");

นี่เป็นตัวอย่างที่ง่ายที่สุดสำหรับการใช้งานลูป เราได้แสดงตัวเลข 1 - 10 ออกทางหน้าจอด้วยคำสั่งวนซ้ำ while loop และนี่เป็นผลลัพธ์การทำงานของโปรแกรม

1
2
3
4
5
6
7
8
9
10
Loop ended

จะเห็นว่าเราไม่จำเป็นต้องเขียนโค้ดการแสดงผลตัวเลขทั้ง 10 บรรทัดเพื่อแสดงตัวเลขออกทางหน้า จอ เราเพียงใช้คำสั่ง while loop และกำหนดเงื่อนไขการทำงานให้กับมัน

let i = 1;

ก่อนอื่นเราประกาศตัวแปร i และกำหนดค่าให้กับตัวแปรเป็น 1 ซึ่งนี่เป็นค่าเริ่มต้นในตอนที่ลูปเริ่มทำงาน เมื่อโปรแกรมพบกับคำสั่ง while จะทำการตรวจสอบเงื่อนไขก่อนที่จะทำงานในลูป

while (i <= 10) {
    console.log(i);
    i++;
}

ในขณะที่เงื่อนไขเป็นจริง นั่นคือค่าของ i น้อยกว่าหรือเท่ากับ 10 โปรแกรมจะทำงานในลูปและแสดงตัวเลขออกมา จากนั้นเพิ่มค่าในตัวแปรขึ้น 1 ดังนั้นในการทำงานแต่ละรอบค่าในตัวแปรจะเพิ่มขึ้นเรื่อยๆ เป็น 2, 3, 4, 5, ... ตามลำดับ จนถึง 11 ซึ่งนั่นจะทำให้เงื่อนไขเป็นเท็จและลูปจบการทำงาน

ต่อไปมาดูตัวอย่างในการใช้งาน while loop เพื่อแสดงชุดลำดับอนุกรมเลขคณิตของ 2n + 1 โดยที่ n มีค่าตั้งแต่ 1 - 10

let n = 1;
console.log("Series for 2n + 1 (1 <= n <= 10)");

while (n <= 10) {
    console.log("2(%d) + 1 = %d", n, 2 * n + 1);
    n++;
}

console.log("Loop ended");

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

Series for 2n + 1 (1 <= n <= 10)
2(1) + 1 = 3
2(2) + 1 = 5
2(3) + 1 = 7
2(4) + 1 = 9
2(5) + 1 = 11
2(6) + 1 = 13
2(7) + 1 = 15
2(8) + 1 = 17
2(9) + 1 = 19
2(10) + 1 = 21
Loop ended

การทำงานนั้นคล้ายกับตัวอย่างก่อนหน้า เราได้สร้างเงื่อนไข n <=10 เพื่อให้โปรแกรมวนทำงานในลูป 10 รอบ แต่ในตัวอย่างนี้เป็นการแสดงลำดับของอนุกรมเลขคณิตจากสูตร 2n + 1 แทน

ต่อมาจะเป็นตัวอย่างการแสดงตัวเลขแบบลดลงกันบ้าง เราจะเขียนโปรแกรมสำหรับนับถอยหลังโดยที่เราสามารถกำหนดค่าเริ่มต้น และความเร็วในการนับลงได้ นี่เป็นตัวอย่าง

let i = 50;
let speed = 5;

while (i >= 0) {
    console.log("Count down: %d", i);
    i -= speed;
}

console.log("Fire!");

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

Count down: 50
Count down: 45
Count down: 40
Count down: 35
Count down: 30
Count down: 25
Count down: 20
Count down: 15
Count down: 10
Count down: 5
Count down: 0
Fire!

ในตัวอย่าง เป็นโปรแกรมแสดงตัวเลขนับถอยหลังจาก 50 ลดลงมาจนถึง 0 โดยลดค่าลงทีละ 5 จะเห็นว่าตอนนี้เงื่อนไขของเราเป็น i >= 0 ซึ่งหมายความว่าลูปจะทำงานในขณะค่าในตัวเลขมากกว่าหรือเท่ากับ 0 นั่นเอง ในตอนนี้คุณคงจะเห็นแล้วว่าเราสามารถใช้ลูปเพื่อทำสิ่งต่างๆ ได้มากมาย

ตัวอย่างต่อมา เป็นโปรแกรมสำหรับคำนวณหาค่าตัวหารร่วมมาก (ห.ร.ม) ของตัวเลขจำนวนเต็มสองตัวโดยใช้คำสั่ง while loop นี่เป็นโค้ดของโปรแกรม

let a = 12;
let b = 16;

console.log("Finding GCD of %d and %d", a, b);
while (a != b) {
    console.log("a = %d, b = %d", a, b);
    if (a > b) {
        a -= b;
    } else {
        b -= a;
    }
}

console.log("a = %d, b = %d", a, b);
console.log("GCD = %d", a);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม สำหรับการคำนวณหาค่า ห.ร.ม ของ 12 และ 18

GCD = 6

ในตัวอย่างเป็นโปรแกรมคำนวณหาค่า ห.ร.ม โดยการใช้วิธีลดตัวเลขทั้งสองลงมาเรื่อยๆ จนกว่าจะมีค่าเท่ากัน เมื่อตัวเลขมีค่าเท่ากันแล้วค่านั้นจะเป็น ห.ร.ม หรือคำตอบของเรา

while (a != b) {
    if (a > b) {
        a -= b;
    } else {
        b -= a;
    }
}

ในเงื่อนไขของคำสั่ง while a != b ในขณะที่ a ไม่เท่ากับ b เราจะทำการลดค่าในตัวแปรทั้งสองลงมา โดยเงื่อนไขในการลดค่านั้นมีอยู่ว่า ถ้า a มากกว่า b ลดค่าในตัวแปร a ลง b ไม่เช่นนั้นทำกับตัวแปร b เช่นเดียวกัน

console.log("a = %d, b = %d", a, b);

นอกจากนี้ เราได้แสดงขั้นตอนการทำงานของลูปโดยการแสดงค่าที่ลดลงในแต่ละรอบเพื่อให้คุณเข้าใจการทำงานได้ง่ายขึ้น

คำสั่ง do-while loop

คำสั่ง do-while ใช้สำหรับกำหนดให้โปรแกรมทำงานซ้ำเหมือนกับคำสั่ง while loop แต่สิ่งที่แตกต่างกันคือเงื่อนไขจะถูกตรวจสอบในตอนท้ายของลูป นั่นหมายความว่าในการใช้งานคำสั่ง do-while loop โปรแกรมจะทำงานในลูปอย่างน้อยหนึ่งรอบเสมอ นี่เป็นรูปแบบการใช้งาน

do {
    // Statements
} while (condition);

เมื่อโปรแกรมพบกับคำสั่ง do-while มันทำงานภายในลูปก่อนหนึ่งรอบทันที จากนั้นค่อยตรวจสอบเงื่อนไข หากเป็นจริงโปรแกรมทำงานลูปในรอบถัด หรือจบการทำงานของลูปหากเงื่อนไขเป็นเท็จ

นี่เป็นตัวอย่างการใช้งานคำสั่ง do-while loop สำหรับนับเลขจาก 1 - 10 เช่นเดิม

let i = 1;

do {
    console.log(i);
    i++;
} while (i <= 10);

console.log("Loop ended");

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

1
2
3
4
5
6
7
8
9
10
Loop ended

ผลลัพธ์การทำงานเป็นเหมือนกับที่คิดเอาไว้ โปรแกรมทำงานในลูปและแสดงตัวเลขจาก 1 - 10 ออกทางหน้าจอ แต่คุณอาจสงสัยว่าเราเมื่อไหร่ที่เราต้องใช้คำสั่ง do-while loop แทนคำสั่ง while loop

เพื่อให้เห็นความแตกต่าง ต่อไปมาดูตัวอย่างการสุ่มค่าตัวเลขระหว่าง 1 - 6 และแสดงผลตัวเลขดังกล่าวออกทางหน้าจอ และสิ้นสุดการสุ่มเมื่อตัวเลขที่สุ่มได้มีค่าเป็น 5 นี่เป็นโค้ดของโปรแกรม

let rand;
let count = 0;

do {
    rand = Math.floor(Math.random() * 6) + 1;
    console.log("Random number: %d", rand);
    count++;
} while (rand != 5);

console.log("It takes %d random to get 5", count);

นี่เป็นผลลัพธ์การทำงานของโปรแกรม โปรแกรมได้สุ่มเป็นจำนวน 7 ครั้งเพื่อที่จะได้ค่าของเลขที่สุ่มเป็น 5

Random number: 2
Random number: 3
Random number: 1
Random number: 4
Random number: 1
Random number: 3
Random number: 5
It takes 7 random to get 5

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

...
} while (rand != 5);

ดังนั้นในตอนที่โปรแกรมสุ่มตัวเลขได้ 5 มันถูกแสดงผลออกทางหน้าจอก่อนที่จะถูกนำไปตรวจสอบเงื่อนไข และนั่นทำให้เงื่อนไขเป็นเท็จและลูปจบการทำงาน นอกจากนี้เรามีตัวแปร count สำหรับนับด้วยว่าโปรแกรมได้ทำการสุ่มไปกี่ครั้งจนกว่าจะได้ตัวเลขที่ต้องการ

ในบทนี้ คุณได้เรียนรู้การใช้งานคำสั่ง while และ do-while เพื่อควบคุมให้โปรแกรมทำงานซ้ำๆ ภายใต้เงื่อนไขที่กำหนด โดยทั่วไปแล้วการใช้คำสั่ง while นั้นเพียงพอสำหรับการเขียนโปรแกรมทั่วไป แต่ในกรณีที่คุณต้องการทำบางอย่างก่อนตรวจสอบเงื่อนไข การใช้คำสั่ง do-while อาจสะดวกกว่า

คำสั่ง while loop นั้นเป็นคำสั่งควบคุมพื้นฐานที่เรียบง่าย อย่างไรก็ตาม ในภาษา JavaScript ยังมีคำสั่งควบคุมประเภทอื่นอีก นั่นคือคำสั่ง for loop ซึ่งคุณจะได้เรียนรู้ในบทถัดไป