JavaScript : ไม่ควรใช้ For Loop ใน Arrays

by
Post Views: 1,014

เชื่อว่า Programmer/Developer JavaScript ล้วนเคยผ่านการใช้งาน For Loops ในการ Coding กันมาแล้ว จำเป็นที่คุณต้องเลือกใช้มันให้เหมาะกับแต่ละสถานการณ์ แนะนำว่า ไม่ควรใช้ For Loop ใน Arrays แต่ขอแนะนำให้ใช้ .forEach() Method แทน

.forEach() Method คืออะไร

.forEach()  เป็น Built-in Method ใน Array Class ซึ่งได้รับการเปิดตัวใน ECMAScript 2015 (หรือที่เรียกกันว่า ES6) โดย Method จะทำการ Callback เป็น Arguments และเพื่อไม่ให้เกิดปัญหาขึ้น Callback จะเป็น Function ที่ถูก Execute สำหรับทุก item ใน Array

ตัวอย่าง เพื่อแสดงถึงการใช้งานพื้นฐานของ .forEach() Method เรามาเริ่มด้วยการ Define Array ของ Integer แล้ว Print ค่าที่เป็น ยกกำลัง2 ของพวกมันลงใน Console

let nums = [1,2,3,4,5];

nums.forEach(function(n) {
   console.log(n * 2); 
});

// 2, 4, ุ6, 8, 10

การเพิ่ม Index เข้าไป

เราได้ทำการเพิ่ม Optional Parameter ตัวที่ 2 เข้าไปใน Function Definition ของเรา

let nums = [1,2,3,4,5];

nums.forEach(function(n,i) {
   console.log("i: " + n * 2);
});
/*
  0: 2
  1: 4
  2: 6
  3: 8
  4: 10
*/

การจัดเก็บค่าด้วย .forEach()

แล้วถ้าเราไม่ต้องการที่จะ Print ทุกอย่าง แต่อยากเก็บ Result ไว้ในตัวแปรใหม่ล่ะ? จะเห็นว่า .forEach() Method ไม่มีการ Return ใด ๆ กลับมาให้ ซึ่งการใช้ .map() Method ดูจะเป็นคำตอบที่ดีที่สุดในสถานการณ์นี้ แต่อย่างไรก็ตาม หากต้องการใช้ .forEach() เราสามารถเขียน Code ใหม่ได้ดังนี้

let nums = [1,2,3,4,5];
let result = [];
nums.forEach(function(n) {
   result.push(n*2);
});
console.log(result); 

// [2,4,6,8,10];

การเขียน Callback Function สั้นกระชับขึ้น

หากต้องการทำให้ Code สั้นกระชับมากขึ้น สามารถเขียนได้ดังนี้

let nums = [1,2,3,4,5];

nums.forEach((n) => {
   console.log(n *2);
});

หรือแบบนี้ก็ได้เช่นเดียวกัน

let nums = [1,2,3,4,5];

nums.forEach(n => console.log(n *2));

อ้างอิง : https://medium.com/better-programming/stop-using-for-loops-to-iterate-over-arrays-5c46940e79d1