5 วิธีสำหรับจัดการ Object ใน Javascript

สวัสดีชาว programmer ทุกคน หลังจากที่เราได้เขียนบทความเรื่อง Array Method ไปในบทความก่อนหน้านี้ วันนี้เราจะพูดถึง Methods สำหรับ Object ใน Javascript กันบ้าง ซึ่งทุก ๆ คนคงคุ้นเคยกับตัวแปรชนิด object กันดีอยู่แล้ว ดังนั้น เราจะมาพูดถึง 5 วิธีเด็ด ๆ ที่ใช้สำหรับการจัดการ object ใน Javascript กัน

วิธีจัดการ Object ใน Javascript

1. Method freezes

const obj = {  lion:  🦁 };
Object.freeze(obj);
obj.lion =🐯 ;
console.log(obj.lion);//ผลลัพธ์ที่ได้ 🦁 

สำหรับ method freezes นั้น เป็น method ที่ทำให้ Object ที่เราประกาศไว้ไม่สามารถแก้ไขหรือเปลี่ยนแปลงข้อมูลได้ แต่ทุกคน ๆ สงสัยว่าทำไมต้องใช้มันทั้ง ๆ ที่ ถ้าหากเราประกาศ const มันก็จะได้เหมือนกันนะ

แต่การประกาศ const ใน JavaScript นั่นไม่ได้หมายความว่าตัวแปรนั้นจะไม่สามารถแก้ได้เลย (กรณี ตัวแปรชนิด Array เราสามารถใช้ method push เพื่อเปลี่ยนค่าภายในของ Array ได้) ดังนั้น method freezes จึงจะมาทำให้เราใช้ชีวิตง่ายขึ้น เพราะไม่ว่าจะเปลี่ยนแปลงค่ายังไง ข้อมูลไม่ถูกเปลี่ยนแน่นอน 

2. Method assign

const animal1 = { lion: 🦁  , tiger: 🐯  };
const animal2 = { tiger:🐱 ,  pig: 🐷  };
const result= Object.assign(animal1, animal2);
console.log(animal1);// ผลลัพธ์ที่ได้ Object { lion: 🦁  , tiger: 🐱 ,  pig:🐷   }
console.log(Result);// ผลลัพธ์ที่ได้  Object { lion: 🦁  , tiger: 🐱 ,  pig:🐷   }

สำหรับ method Assign จะทำหน้าที่เพิ่มข้อมูลลงใน Object ซึ่งจากโค้ดด้านบนจะเห็นได้ว่า เราได้ประกาศ animal1 และได้ทำการ assign animal2 เข้าไปใน animal1 ดังนั้น ผลลัพธ์ก็คือ จะทำให้เราได้ { lion: 🦁  , tiger: 🐱 ,  pig:🐷   } นั่นเอง

3. Method keys

const animal = {   lion: 🦁  ,   tiger: 🐱 ,    pig:🐷   } ;
console.log(Object.keys(animal));// ผลลัพธ์ที่ได้ Array ["lion", "tiger", "pig"]

Method key ใช้สำหรับดึง key ของ Object ออกมาเป็น Array สามารถดูได้ตัวอย่างได้จากโค้ดด้านบน เราได้ประกาศตัวแปร animal ซึ่งประกอบไปด้วย {  lion: 🦁  ,  tiger: 🐱 ,   pig:🐷   }  เมื่อเราใช้ method key ในการดึงเอาข้อมูล key ของ animal ก็จะได้ผลลัพธ์ตามตัวอย่างโค้ดด้านบนเลย

4. Method values

const animal = {  fish: 🐟 ,  crab: 🦀 ,  squid: 🐙};
console.log(Object.values(animal));// ผลลัพธ์ที่ได้ Array [ 🐟 , 🦀 ,  🐙 ]

หลังจากที่เราได้ ใช้ method key ในการถึง key ออกมาแล้ว ทีนี้ถ้าหากเราอยากได้ values ของ Object บ้างล่ะ ? คำตอบก็คือเราสามารถใช้ Method Values เพื่อดึงค่าของ valuse ออกมาในรูปแบบ array ได้เช่นกัน

5. Method entries

const birds = {    owl: '🦉',    eagle: '🦅',    duck: '🦆'};
const entries = Object.entries(birds);
console.log(entries);// ผลลัพธ์ที่ได้ [['owl', '🦉'], ['eagle', '🦅'], ['duck', '🦆']]

สำหรับ method ตัวสุดท้าย เราจะใช้ในกรณีที่เราต้องการดึง key และ values ของ Object ซึ่งจากตัวอย่างโค้ดด้านบน เราต้องการดึง key และ value ด้วยการใช้  Object.entries(birds) ทำให้ผลลพธ์ที่ได้เป็น Array ของ key กับ value นั่นเอง

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