[JS 101] - Destructuring คืออะไร?

บทความพื้นฐาน JavaScript (JS 101) วันนี้ขอนำเสนอเรื่อง Destructuring นะครับ

Destructuring เป็น feature ที่มีมาตั้งแต่ ES6 ที่ทำให้เรา แบ่งแยกโครงสร้าง ไปเป็นตัวแปร variables (copy item ไป variable) หรือจริงๆ คือตามชื่อคือ destructure ทำลายโครงสร้าง ทั้ง Object หรือ Array ให้อยู่ในรูปของตัวแปร variables นั่นเอง

ฟังดูอาจจะงงๆ เอาเป็นว่าไปดูตัวอย่าง น่าจะเข้าใจง่ายขึ้นครับ

Destructuring Object

สมมติ เรามีก้อนข้อมูล Object แบบนี้

const user = {
  name: 'John Doe',
  username: 'john',
  contact: {
    location: 'Bangkok, Thailand',
    email: 'john@doe.com'
  }
}

ถ้าปกติ เราจะเอาค่า name และ username หรือ contact.email เราก็ต้องทำแบบนี้ใช่มั้ย

const name = user.name
const username = user.username
const email = user.contact.email
const location = user.contact.location

แบบ Destructuring objects จะเป็นแบบนี้

const { name, username, contact } = user
const { location, email } = contact

จะเห็นว่าโค๊ดสั้นลง แต่เราจะเห็นว่า ตัว contact เราก็สามารถ destructuring มันได้อีก เป็นแบบนี้

const { name, username, contact: { location, email } } = user

// มีค่าเท่ากับ
const naem = user.name
const username = user.username
const location = user.contact.location
const email = user.contact.email

นอกจากนี้ เราก็ยังสามารถ rename ค่าได้ เช่น สมมติ เรา ไม่ต้องการ name แต่เปลี่ยนเป็น fullname แทน ก็จะเป็นแบบนี้

const { name: fullname } = user

// มีค่าเท่ากับ
// const fullname = user.name

Destructuring Array

สมมติ มีข้อมูล array แบบนี้อยู่

const names = ["John Doe", "Jane Doe", "Chuck Norris"]

เราสามารถใช้ Array destrucutring แบบนี้ (ตั้งชื่ออะไรก็ได้ และค่าจะถูก assign ตาม ตำแหน่งของ array เช่น

const [a, b, c] = names

// มีค่าเท่ากับ
const a = names[0]
const b = names[1]
const c = names[2]

ตัวอย่างที่เจอบ่อยๆ ถ้าใครเขียน React.js จะเห็นบ่อยๆ ก็คือการใช้ useState นั่นเอง ตัว useState มัน return ค่าเป็น array กลับมา เวลาเราใช้งาน ก็เลยใช้แบบนี้

const [counter, setCounter] = useState(0)

แน่นอนว่าอ่านง่ายกว่าแบบนี้ถูกมั้ย?

const state = useState(0)
const counter = state.counter
const setCounter = state.setCounter

หวังว่าจะเข้าใจ Destructuring กันมากขึ้นนะครับ หากใครยังไม่เข้าใจอีก แนะนำ อ่านทบทวน และลองฝึกทำ ฝึกเขียน และดู console.log ประกอบครับ

Happy Coding ❤️

อ่านเพิ่มเติม

Destructuring assignment

Destructuring assignment - JavaScript | MDN

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

MDN Web Docs.logo-m{fill:var(--text-link)}