บทความนี้จะสอนการวนลูป Loop ใน javascript เป็นการทำงานซ้ำๆ มีการใช้ function loop กี่แบบ อย่างไรบ้างครับ
Loop คืออะไร
หลังจากเราสร้าง function เป็นแล้วต่อไปอยากจะสอนเรื่องการทำซ้ำหรือการวนลูปนั่นเอง โดยลูปคือการที่เราให้ โปรแกรมของเราทำอะไรซักอย่างซ้ำๆ เช่น การสร้าง ตารางที่ละแถวๆ หลายแถวๆนั่นก็คือการทำซ้ำ หรือ การให้โปรแกรมนับเลขอย่างนี้ก็เป็นการใช้งาน ให้โปรแกรมวนนับเลขไปเรื่อยๆ ทำนองนี้ครับ
หลังจากอธิบายไปแล้วมาดูตัวอย่างกันดีกว่าครับ สมมติว่าเราอยากให้ js ทำการนับเลข 1 – 10 โดยการ console.log ออกมา ถ้าใช้ความรู้ก่อนเราจะมาเรียนรู้เรื่อง loop เราจะทำยังไง ? ก็คงทำแบบนี้ถูกต้องไหมครับ
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
console.log(7)
console.log(8)
console.log(9)
console.log(10)
สมมติว่าถ้าโจทย์เปลี่ยนเป็นให้ console.log 1 – 100 เราคงไม่ทำแบบนี้ร้อยครั้งถูกไหมครับ เนี้ยแหละครับคือข้อดีของการวนลูปเรามีดูกันว่าจากตัวอย่างให้ console.log 1 – 10 แบบวนลูปเราจะทำอย่างไร
for (const i = 1; i <= 10; i++) {
console.log(i)
}แค่นี้เลย เขียน 3 บรรทัดต่อให้เราจะนับ 1 -100 เราก็ยังเขียนแค่ 3 บรรทัดเหมือนเดิมสะดวกไหมครับ ? เอาล่ะมาอธิบาย code กันหน่อยครับ ลูปที่เราใช้งานในตัวอย่างด้านบนเราเรียกว่า ลูปแบบ for ซึ่งลูปเนี้ยก็มีหลายแบบมาก ทั้ง for, map, do … while, while … do แต่เราค่อยไปเรียนรู้กันทีหลัง
for loop มันเขียนอะไรบ้าง อย่างแรกก็ให้เริ่มที่คำว่า for แล้วตามด้วย เงื่อนไขในวงเล็บ ซึ่งเราจะกำหนดค่า i จริงๆมันคือตัวแปรจะเปลี่ยนชื่อเป็นอะไรก็ได้ครับ โดยเรากำหนดค่าเริ่มต้นให้มันคือ 1 แล้วถัดมาหลัง semi colon (;) เราบอกว่า ถ้าเงื่อนไขตัวแปร i นั้น น้อยกว่าหรือเท่ากับ 10 จะยังคงวนอยู่ในลูป แล้วสุดท้ายคือ ทุกครั้งที่จบการทำงานในลูป 1 รอบจะให้ตัวแปร i เพิ่มขึ้นหรือลดลง การใส่ว่า i++ แปลว่าจะเพิ่มขึ้นทีละ 1 นั่นเอง
มันเอาไปใช้อะไรได้บ้าง ?
หลังจากเรียนรู้มาแล้วอาจจะงงว่า เราจะเอาการวนลูปไปทำอะไรได้บ้าง บอกตรงๆว่า เกือบทุกโปรแกรมมันคือการทำอะไรซ้ำๆ สิ่งนี้เรียกว่าหัวใจหลักของโปรแกรมเลยครับ เพราะคุณอย่าลืมว่าการที่เราเขียนโปรแกรมขึ้นมาเพื่อให้มันจัดการงาน ซ้ำๆ โปรเซสหรือขั้นตอนการทำงานเดิมๆ คล้ายกับการทำโรงงานแหละครับ โรงงานเขาก็ผลิตอะไรซักอย่างในขั้นตอนการต่างๆก็ต้องถูกออกมาให้ทำซ้ำๆเพื่อความเร็วและลดแรงงานของมนุษย์ถูกต้องไหมครับ
ปกติเราใช้การวนลูปกับอะไร ?
จากที่สอนไปเราจะเข้าใจเรื่องวนลูปแต่เรายังไม่รู้เลยว่ามันจะวนกับอะไรยังไง เดี๋ยวเราไปลองเล่นกับการวนลูปที่เราใช้กันบ่อยๆใน js กันดีกว่าครับ โดยเราได้เรียนรู้ไปใน javascript ตอนที่ 1 ว่ามีตัวแปรแบบเก็บหลายๆค่าได้นั่นคือ array โดยปกติเวลาเราเขียน js ส่วนใหญ่ตัวแปรที่เราจะยุ่งเกี่ยวนั้นจะเป็น array ซะส่วนใหญ่ครับ เพราะมันสะดวกในการใช้งาน สามารถจัดเก็บทั้ง string , number, object อยู่ในตัวเองได้ และมี function หลายๆอย่างที่ทาง javascript ช่วยเหลือในการตัด ต่อ เติม ค่าเข้าออกครับ
พูดมายาวเราไปลองเล่นกับมันเลยดีกว่าครับ สมมติว่าเราจะทำการสร้าง List เพื่อแสดงผลโดยข้อมูลเราจะได้รับมาเป็น array object โดย 1 element ( เราเรียกแต่ละค่าใน array ว่า element นะครับ ) จะมีค่า 3 ค่าคือ first_name, last_name, age เอาล่ะไปดูกันครับ
const data = [
{
"first_name": "John",
"last_name": "Snow",
"age": 35
},
{
"first_name": "Daenerys",
"last_name": "Targaryen",
"age": 24
},
{
"first_name": "Arya",
"last_name": "Stark",
"age": 17
}
]เราจะทำการสร้าง list จากที่เราเรียนรู้ไปเกี่ยวกับ html แล้วและเอาการวนลูปมาผสมกันครับหน้าตาตอนสุดท้ายจะออกมาประมาณนี้
โอเคเราไปดูส่วน code กันครับ
const people = [
{
"first_name": "John",
"last_name": "Snow",
"age": 35
},
{
"first_name": "Daenerys",
"last_name": "Targaryen",
"age": 24
},
{
"first_name": "Arya",
"last_name": "Stark",
"age": 17
}
]
document.write('<ul>')
people.map((person) => {
document.write(`<li>first name: ${person.first_name} last name: ${person.last_name} age: ${person.age}</li>`)
})
document.write('</ul>')จาก code ด้านบนตรง document แล้วเราทำการใช้จุดแล้วตามด้วยคำว่า write นั้นเป็นการเรียกใช้ function จาก document นั่นเองอย่างที่เคยอธิบายไปในตอนที่ 2 ว่าตัว javascript นั้นมี document ก่อนที่ถูกเรียกอย่างที่สองแล้วใน document ก็มี function มากมายให้เราเรียกใช้ครับ โดย write เป็นหนึ่งใน function ครับโดยมันจะเอาค่าที่ส่งเข้าไปใน function ไปแสดงผลทางหน้าจอ
ตรงจะคล้ายๆกับเราอ่านว่าเราจะ เขียน ( write ) เข้าไปใน เอกสาร ( document ) ครับแล้วเราก็ทำการ write tag ul ตอนแรก เสร็จแล้วบรรทัดต่อมาก็คือการ วนลูปด้วย function map นั่นเองครับ โดย map จะทำการวนทีละ element จะสังเกตุว่าใน loop ผมจะทำการเขียน li ทีละบรรทัดครับ
document.write(`<li>first name: ${person.first_name} last name: ${person.last_name} age: ${person.age}</li>`)โดย map เราจะใช้ในการวนลูปตัวแปร array นั่นเองครับคุณน่าจะเริ่มเห็นแล้วว่าเราจะใช้ประโยชน์การวนลูปอย่างไร
ในความเป็นจริงนั้นเราจะไม่ได้วนลูปแบบเอาค่ามาวนๆแบบนี้นะครับแต่ในตัวอย่างโค้ดบทความนี้แสดงให้คุณเห็นถึงว่าการเขียนวนลูปทำอย่างไร อะไรคือการลูปนะครับ เกือบทุกภาษาของการเขียนโปรแกรมก็มีพวกนี้แหละครับ function , loop , systax
For … loop
ต่อมาเรามารู้กับ loop พื้นฐานที่หลายๆภาษามีเป็นการวนโดยการกำหนดเลขเริ่มต้นและสร้างเงื่อนไขออกจากลูป เสร็จแล้วจะทำการเพิ่มค่าของตัวแปรในเงื่อนไข อ่านแล้วคง งงไปดู code กันดีกว่าครับ
// วิธีใช้
for (statement 1; statement 2; statement 3) {
// code block to be executed
}
// การเรียกใช้
for (let i = 0; i <= 10; i++) {
console.log(i)
}สังเกตุว่าการใช้ for … loop นั้นจะต้องมี 3 statement ( statement คือคำสั่งที่เราเขียนแล้วลงท้ายด้วยการขั้น semi colon “;” ) โดยแบ่งตามนี้ครับ
statement 1 จะเป็นการกำหนดค่าเริ่มต้นของตัวแปรไว้ปรียบเทียบในเงื่อนไขจะทำงานครั้งเดียวครับ ในตัวอย่างคือเรากำหนดค่าตัวแปรที่ชื่อว่า i เป็น let ซึ่งจะเปลี่ยนแปลงค่าได้ และมีค่าเป็น 0
statement 2 จะเป็นการนำเอาตัวแปรที่อยู่ใน statement 1 มาทำการหาเงื่อนไขในการหลุดออกจากลูปโดยจะทำงานเรื่อยๆถ้าเงื่อนไขตรงนี้เป็นจริงจากตัวอย่างเรากำหนดเงื่อนไขเปรียบเทียบค่า i ต้องน้อยกว่าหรือเท่ากับ 10 ถ้ายังตรงกับเงื่อนไขนี้ code block จะทำงานเรื่อยๆ หมายถึง code ส่วนการ console.log
statement 3 จะเป็นการคำสั่งหลังจากที่ทำการรันคำสั่ง code block เสร็จจะทำการรันคำสั่ง statement นี้ครับโดยเรากำหนดให้เพิ่มค่าตัวแปร i ไปอีก 1 เพราะฉะนั้นลำดับจะเป็นแบบนี้ครับ
- กำหนดค่า i เป็น 0
- เอาค่า i เปรียบว่าน้อยกว่าหรือเท่ากับ 10 ไหม ? ( 0 <= 10 ) เป็นจริง
- ถ้าเป็นจริงจะทำการรันคำสั่งใน code block จากตัวอย่างคือ console.log(i)
- หลังจากนั้นจะทำการเพิ่มค่าตัวแปร i ไปอีก 1 ตอนนี้ i จะเป็น 1 แหละครับ
- นำค่าตัวแปร i มาเปรียบเทียบว่าน้อยกว่าหรือเท่ากับ 10 ไหม -> เป็นจริง เพราะ (1<= 10)
- ถ้าเป็นจริงจะทำการรันคำสั่งใน code block จากตัวอย่างคือ console.log(i)
- หลังจากนั้นจะทำการเพิ่มค่าตัวแปร i ไปอีก 1 ตอนนี้ i จะเป็น 1 แหละครับ
- จะทำอย่างนี้ไปจนกระทั่งค่า i เป็น 11 และนำมาเทียบ ( 11 <= 10 ) ได้ค่าเป็น false จะหลุดจาก ลูปนั้นครับ
ถ้าเราเปิด inspect element ที่สอนไปจะปรากฎการ log ออกมาดังภาพข้างล่างครับ
While Loop
ต่อมาเรามารู้จัก while loop เป็นการวนถ้าเช็คว่าเงื่อนไขยังเป็นจริงมันจะวนไปเรื่อยๆไม่สิ้นสุดคราวนี้สมมติว่าเราอยากได้เหมือนตัวอย่างข้างบนให้ console.log เรามาดูกันว่าเขียนอย่างไร
let i = 0;
while (i < 10) {
console.log(i);
i++;
}จะได้ผลลัพธ์เหมือนกับ for loop คราวนี้คำถามคือ เราจะมีคำสั่งเกี่ยวกับวนลูปทำไมเยอะเยะอันนี้คือแค่สองอันนะยังไม่ได้บอกที่เหลือ คือผมจะบอกว่า แต่ละอันสามารถทำการวนได้เหมือนๆกันแต่ละแตกต่างกันในบางกรณีครับ อย่างตัว while loop เราใช้สำหรับการเปรียบเทียบค่า ไม่ต้องกำหนดตัวเลข แต่ถามว่าเรากำหนดได้ไหมก็ทำได้แต่อย่างที่บอกใช้เครื่องมือให้ถูกกับสถานการณ์พอครับ อย่าฝืนถ้ามันไม่ใช่
do … while
ต่อมาเรามารู้จักอีกการวนลูปคือ do … white loop โดยทุกครั้งมันจะทำการรันคำสั่งก่อนอย่างน้อยที่สุดคือ 1 รอบ ถึงแม้ว่ามันจะหลุดจากเงื่อนไข loop ตั้งแต่แรกก็ตามมันจะรันคำสั่งแน่ๆ 1 ครั้งครับไปดูหน้าตากันว่ามันทำงานอย่างไร
let i = 0;
do {
console.log(i);
i++;
}
while (i < 10); มาจะทำการ console.log(i) อย่างน้อย 1 ครั้งครับโดยการวนลูปแบบนี้มันจะรันก่อนแล้วค่อยทำการเช็คเงื่อนไขทีหลังครับ
Array Loop
นอกจากการวนลูปแบบทั่วๆไปที่เราได้เรียนรู้กันไปแล้วคราวนี้เราจะสอนเกี่ยวกับการวนลูปของ array กันบ้าง เพราะปัจจุบันการใช้ตัวแปรแบบ array ใน JS มันสามารถประยุกต์ได้หลายแบบมาก จากที่เราเรียนรู้มาในบทก่อนๆ
const a = ['1', '2', '3']
const b = [{ a: 1}, { a: 2}, { a: 3}]เราเรียกตัวแปร a ว่าเป็นแบบ array ทั่วไป ส่วนตัวแปร b เราจะเรียกว่า array object ซึ่งส่วนใหญ่จะใช้แบบ b เยอะแต่ทั้งคู่สามารถใช้ function การวน loop ของ array ได้ทั้งคู่ครับ
ปกติการวน loop array นั้นเราจะทำเพราะต้องการเปลี่ยนแปลงค่าใน array เช่น ตอนแรกอาจจะมีหลายๆค่าแต่เราต้องการเพียงค่ายกตัวอย่างเช่น สมมติว่าเรามีตัวแปรแบบนี้
const users = [
{
first_name: 'John',
last_name: 'snow',
age: 21
},
{
first_name: 'Harry',
last_name: 'potter',
age: 21
},
{
first_name: 'Nick',
last_name: 'fury',
age: 21
}
]เราอาจจะต้องการ array ชุดใหม่ที่เก็บชื่อแบบ full name โดยการเอาชื่อ first_name กับ last_name โดยผลลัพธ์จะเป็นแบบนี้
['John snow', 'Harry potter', 'Nick fury']
เรามาลองดูกันว่าทำอย่างไร
map
function ที่จะสอนอันแรกของการวน loop array คือ function map ครับการใช้งานก็คือมันจะทำการวนไปที่ตัว เราเรียกว่า element แต่ละ element ก็คือค่าแต่อันใน array นั้นเอง
const a = ['1', '2', '3']
const b = a.map(function(element, index) {
// console.log(element) วนเป็น 1 รอบที่สองจะเป็น 2 ไปเรื่อยๆ จนหมด array
return element
});
// b จะเป็นเหมือน a คราวนี้เรามาลองวนเพื่อจะทำเหมือนโจทย์ ตอนแรกที่เราต้องการเป็นชื่อเต็มกันดูครับ ว่าทำอย่างไร
const users = [
{
first_name: 'John',
last_name: 'snow',
age: 21
},
{
first_name: 'Harry',
last_name: 'potter',
age: 21
},
{
first_name: 'Nick',
last_name: 'fury',
age: 21
}
]
const fullnames = users.map(function(element) {
return `${element.first_name} ${element.last_name}`
})
console.log(fullnames) // [ 'John snow', 'Harry potter', 'Nick fury' ]สามารถใช้ keyword สำหรับค้นใน google ต่อด้วยคำว่า array javascript loop ครับจะมีการวนอีกหลายรูปแบบเลย สามารถดูที่นี่ก็ได้ครับ
https://www.w3schools.com/jsref/jsref_map.asp
สรุป
สำหรับเรื่องของ javascript แบบพื้นฐานผมอาจจะต้องหยุดตรงนี้ไว้ก่อนนะครับ ถ้าหากท่านผู้อ่านยังสนใจหรืออยากให้สอนต่อสามารถ comment ไว้ต่อได้เลย โดยผมจะเพิ่มเติมเป็น workshop ง่ายๆต่อว่าเราเขียนอะไรกับมันได้อีกบ้าง แต่หลักๆ ทั้งเรื่องการประกาศค่า การใช้ function และเรื่องการ loop ถ้าเราเข้าใจเราจะเริ่มเขียนอะไรได้มากขึ้นแล้วครับ ถ้าหากสนใจอยากลองวิชาเพิ่มเติมสามารถลองทำตาม การบ้านได้เลยครับ
Homework
- ให้วนลูป console.log เริ่มที่ 1 – 500
- ให้วนลูป array โดยกำหนดให้ตัวแปร users เป็นแบบนี้
const users = [
{
first_name: 'John',
last_name: 'snow',
age: 21
},
{
first_name: 'Harry',
last_name: 'potter',
age: 21
},
{
first_name: 'Nick',
last_name: 'fury',
age: 21
}
]ให้สุดท้ายผลลัพธ์ออกมาเป็นแบบนี้
const users = [
{
first_name: 'John',
last_name: 'snow',
age: 19,
is_student: true
},
{
first_name: 'Harry',
last_name: 'potter',
age: 25,
is_student: false
},
{
first_name: 'Nick',
last_name: 'fury',
age: 30,
is_student: false
}
]โดยเงื่อนไขให้ถ้าอายุของคน คนนั้นเกินกว่า 23 ปีให้เพิ่มค่า is_student เป็น true ถ้าไม่ใช่ให้เป็น false นะครับ
กลับไปหน้าสารบัญ
https://oxygenyoyo.com/2021/01/18/index-getting-started-code-website/
