สวัสดีครับ ช่วงนี้อากาศในชิก่ะเริ่มร้อนขึ้นแล้วเข้าเดือน 4 คนญี่ปุ่นก็แห่กันไปดูซากุระกันตามเคย

แต่ปีนี้โชคไม่ค่อยดีนิดหน่อยตรงที่ช่วงซากุระเริ่มบานปุ้บ ฝนก็ตกยาวทั้งอาทิตย์เลย ผมแว๊บไปดู

ที่เกียวโตมานิดหน่อยวันนึง สวยดีครับ

เข้าเรื่องดีกว่า วันนี้จะมาอธิบายเรื่อง Object Array ของ JS ครับ



ผมเขียน Node.js มาได้เกือบๆสองปี ช่วงแรกๆที่เขียนปัญหาที่มึนที่สุดคือ การจัดการกับ Object ใน
Array ครับ

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

แถม JS เป็นภาษาที่มีจุดเด่นตรงที่เราใส่ callback function ไปใน parameter ได้ด้วยเพราะงั้นใช้กันเยอะเป็นเรื่องธรรมดา

ทีนี้ผมที่งูปลาๆ เวลาใช้ package npm ที่ต่อกับ IO เวลามัน return มาชอบเป็น Object array ครับแล้วหลายครั้งผมต้องการเอาเฉพาะแค่ object ชุดเดียวก็จะ งงๆ ว่าทำไงดีหลักจะเขียนประมาณนี้ครับ

แค่แยก object ตัวนึงออกมา  loop กำหนดขนาด ต้องมี counter แถมยังต้องสร้าง counter สำหรับตัวเก็บ object ใหม่อีก มันน่ารำคราญมากครับ ทีนี้ลองเปลี่ยนวิธีเขียนใหม่โดยใช้ forEach และทำให้ดูดีใช้ต่อได้


function splitKeyObjectArray(object_array, key){

      object_array.forEach(function(element, index){
        result_array.push(object_array[index][key]);
      });

      return result_array;
}

let test_array = [
      {"point1":"[1,1]", "point2":"[1,2]"},
      {"point1":"[2,1]", "point2":"[2,2]"},
      {"point1":"[3,1]", "point2":"[3,2]"}
],
result_array = [];

console.log(splitKeyObjectArray(test_array, "point2"));



ถามว่าเขียนสั้นลงไหม คือไม่ครับยาวกว่าเดิมนิดหน่อยด้วย แต่เชื่อว่าสะอาดตาและคนอื่นใช้ต่อได้ครับ

ช้อดีของการใช้ forEach อย่างเห็นได้ชัดเลยคือตัว  index ทำหน้าที่แทน  counter ไปไปแล้วทำให้เขียนง่ายขึ้นมาก เราไม่ต้องทำอะไรแทนเลย และ array ตัวใหม่เราไม่ต้องทำ counter เองเราแค่ push เข้าไป แค่นั้นพอส่วนตัวคิดว่าเป็นการเติม array ที่ดีที่สุดครับ ดีกว่าเติมแบบกำหนด index เอง 



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



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



สำหรับคนที่สงสัยว่า let คืออะไร นี่เป็นการประกาศตัวแปะที่มาใน ES6 คือมันจะบล็อคอยู่ในสโคป {} ครับ ถ้ามีโอกาสจะมาอธิบายอย่างละเอียดนะครับ สวัสดีครับ