Destructuring Assignment

Destructuring Assignment ใน JavaScript: แยกค่าได้อย่างง่ายดาย

หลังจากที่เราได้เรียนรู้เรื่อง Spread Operator ในบทที่แล้ว ซึ่งช่วยให้เราขยาย array และ object ได้อย่างง่ายดาย ในบทนี้เราจะมาเรียนรู้เกี่ยวกับ Destructuring Assignment ซึ่งเป็นอีกหนึ่งคุณสมบัติที่มีประโยชน์อย่างมากในการดึงค่าจาก array หรือ object แล้วนำไปใส่ในตัวแปรได้อย่างรวดเร็วและสะดวกสบาย

Destructuring คืออะไร?

Destructuring Assignment คือ syntax ที่ช่วยให้คุณสามารถแยกค่าออกจาก array หรือ object แล้วกำหนดให้กับตัวแปรได้ในขั้นตอนเดียว โดยไม่ต้องเขียนโค้ดที่ซับซ้อนเพื่อเข้าถึงค่าแต่ละค่าด้วย index หรือ key

Destructuring Array

การ Destructuring array ทำได้โดยใช้เครื่องหมาย square brackets ([]) ทางด้านซ้ายของเครื่องหมาย equal (=) เพื่อระบุตัวแปรที่จะรับค่าจาก array ทางด้านขวา

const colors = ['red', 'green', 'blue'];

const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // Output: red
console.log(secondColor); // Output: green
console.log(thirdColor);  // Output: blue

ในตัวอย่างนี้ เราได้สร้าง array ชื่อ colors ที่มีสมาชิก 3 ตัว จากนั้นเราใช้ Destructuring Assignment เพื่อดึงค่าแต่ละค่าใน array ไปใส่ในตัวแปร firstColor, secondColor, และ thirdColor ตามลำดับ

การข้ามค่าบางค่า

หากคุณไม่ต้องการดึงค่าบางค่าใน array คุณสามารถเว้นช่องว่างไว้ใน square brackets ได้

const numbers = [1, 2, 3, 4, 5];

const [firstNumber, , thirdNumber, , fifthNumber] = numbers;

console.log(firstNumber); // Output: 1
console.log(thirdNumber); // Output: 3
console.log(fifthNumber); // Output: 5

ในตัวอย่างนี้ เราข้ามค่าที่ index 1 และ 3 ของ array numbers ทำให้ตัวแปร secondNumber และ fourthNumber ไม่ได้รับค่าใดๆ

Default Values

คุณสามารถกำหนด default value ให้กับตัวแปรที่จะรับค่าจาก array ได้ หากค่าที่ index นั้นๆ ไม่มีอยู่ใน array

const fruits = ['apple', 'banana'];

const [firstFruit, secondFruit, thirdFruit = 'orange'] = fruits;

console.log(firstFruit);  // Output: apple
console.log(secondFruit); // Output: banana
console.log(thirdFruit);  // Output: orange

ในตัวอย่างนี้ array fruits มีสมาชิกเพียง 2 ตัว แต่เรากำหนดตัวแปร thirdFruit ให้มี default value เป็น 'orange' ดังนั้นเมื่อไม่มีค่าที่ index 2 ใน array fruits ตัวแปร thirdFruit จึงได้รับค่าเป็น 'orange'

Rest Parameter กับ Array Destructuring

เราสามารถใช้ Rest Parameter (...) ร่วมกับ Array Destructuring เพื่อดึงค่าที่เหลือใน array ไปใส่ใน array ใหม่ได้

const animals = ['dog', 'cat', 'bird', 'fish', 'hamster'];

const [firstAnimal, secondAnimal, ...restOfAnimals] = animals;

console.log(firstAnimal);       // Output: dog
console.log(secondAnimal);      // Output: cat
console.log(restOfAnimals);    // Output: ['bird', 'fish', 'hamster']

ในตัวอย่างนี้ ตัวแปร restOfAnimals จะเป็น array ที่เก็บค่าที่เหลือทั้งหมดใน array animals หลังจากที่เราได้ดึงค่าของ firstAnimal และ secondAnimal ไปแล้ว

Destructuring Object

การ Destructuring object ทำได้โดยใช้เครื่องหมาย curly braces ({}) ทางด้านซ้ายของเครื่องหมาย equal (=) เพื่อระบุชื่อ properties ที่ต้องการดึงค่าจาก object ทางด้านขวา

const person = {
  name: 'John Doe',
  age: 30,
  city: 'New York'
};

const { name, age, city } = person;

console.log(name); // Output: John Doe
console.log(age);  // Output: 30
console.log(city); // Output: New York

ในตัวอย่างนี้ เราได้สร้าง object ชื่อ person ที่มี properties name, age, และ city จากนั้นเราใช้ Destructuring Assignment เพื่อดึงค่าของแต่ละ property ไปใส่ในตัวแปรที่มีชื่อเดียวกัน

การตั้งชื่อใหม่ให้กับตัวแปร

หากคุณต้องการตั้งชื่อใหม่ให้กับตัวแปรที่จะรับค่าจาก object คุณสามารถใช้ syntax propertyName: newVariableName ได้

const product = {
  productName: 'Laptop',
  price: 1200,
  brand: 'Dell'
};

const { productName: name, price: cost, brand } = product;

console.log(name);  // Output: Laptop
console.log(cost);  // Output: 1200
console.log(brand); // Output: Dell

ในตัวอย่างนี้ เราได้ตั้งชื่อใหม่ให้กับตัวแปรที่จะรับค่าจาก property productName เป็น name และตัวแปรที่จะรับค่าจาก property price เป็น cost

Default Values

เช่นเดียวกับการ Destructuring array คุณสามารถกำหนด default value ให้กับตัวแปรที่จะรับค่าจาก object ได้ หาก property นั้นๆ ไม่มีอยู่ใน object

const settings = {
  theme: 'dark'
};

const { theme, fontSize = 16 } = settings;

console.log(theme);      // Output: dark
console.log(fontSize);   // Output: 16

ในตัวอย่างนี้ object settings ไม่มี property fontSize แต่เราได้กำหนด default value เป็น 16 ดังนั้นตัวแปร fontSize จึงได้รับค่าเป็น 16

Nested Object Destructuring

คุณสามารถ Destructure object ที่ซ้อนกันอยู่ภายใน object อื่นได้

const user = {
  id: 1,
  email: 'john.doe@example.com',
  profile: {
    firstName: 'John',
    lastName: 'Doe'
  }
};

const { id, email, profile: { firstName, lastName } } = user;

console.log(id);        // Output: 1
console.log(email);     // Output: john.doe@example.com
console.log(firstName); // Output: John
console.log(lastName);  // Output: Doe

ในตัวอย่างนี้ เราได้ Destructure object profile ที่อยู่ภายใน object user เพื่อดึงค่า firstName และ lastName

สรุป

Destructuring Assignment เป็นเครื่องมือที่มีประโยชน์อย่างมากในการเขียน JavaScript ช่วยให้คุณสามารถดึงค่าจาก array และ object ได้อย่างรวดเร็วและสะดวกสบาย ทำให้โค้ดของคุณอ่านง่ายและกระชับยิ่งขึ้น

ในบทถัดไป เราจะมาเรียนรู้เกี่ยวกับ Object Literals Enhancement ซึ่งเป็นอีกหนึ่งคุณสมบัติที่ช่วยให้การสร้าง object ใน JavaScript ง่ายยิ่งขึ้น