Destructuring (ES6)

TypeScript และ JavaScript ES6 ในตอนนี้สามารถทำ Destructuring ได้แล้วครับ แต่ว่าเจ้า Destructuring มันคืออะไร และมีประโยชน์อย่างไรวันนี้เราจะมาดูกัน

ถ้าให้พูดง่าย ๆ Destructuring ก็คือการ assign ค่าอย่างหนึ่งที่ลดภาระการเขียนโปรแกรมลงได้บ้าง ทำให้การ assign ค่าให้กับตัวแปรหรือประกาศตัวแปรได้สะดวกมาขึ้น ซึ่งตัว Destructuring นั้นสามารถแบ่งได้ 2 ประเภทคือ
1. Object Destructuring
2. Array Destructuring

Object Destructuring

Destructuring มีประโยชน์มากเพราะมันทำให้เราสามารถย่อการเขียน code จากหลายบรรทัด ลงมาเหลือบรรทัดเดียวได้ ดังตัวอย่างต่อไปนี้

var rect = { x: 0, y: 10, width: 15, height: 20 };

// Destructuring assignment
var {x, y, width, height} = rect;
console.log(x, y, width, height); // 0,10,15,20

จะเห็นว่าเป็นการ assignment ค่าจากตัวแปร object rect เข้าไปยังตัวแปร x y width height ตามชื่อตัวแปรที่ตรงกัน

นอกจากนี้ยังสามารถสร้างชื่อตัวแปรใหม่ได้ด้วย ดังตัวอย่าง

let { x: newName1, y: newName2 } = rect;
console.log(newName1, newName2); // 0,10

จาก code จะเป็นการ assign ค่า x ไปที่ newName1 และ y ไปที่ newName2

เพิ่มเติมอีกนิดนะครับ เราสามารถดึง data จากระดับความลึกจาก structure ได้อีกด้วย

var foo = { bar: { bas: 123 } };
var {bar: {bas}} = foo; // Effectively `var bas = foo.bar.bas;

เราจะได้ตัวแปร bas ซึ่งมีค่าเป็น 123 มาครับ

Function declarations

Destructuring สามารถนำมาใช้กับการประกาศ function ได้ด้วยครับ เช่นการสร้าง default value ให้กับ parameter

function f({ a, b } = { a: "", b: 0 }): void {     // ... } 
f(); // ใช้งานได้ ค่า default จะเป็น { a: "", b: 0 }

Spread

Destructuring สามารถใช้ร่วมกับ Spread Operator ในการ assign ค่าต่าง ๆ เช่น

let first = [1, 2]; 
let second = [3, 4]; 
let bothPlus = [0, ...first, ...second, 5];
console.log(bothPlus) // 0 1 2 3 4 5

หรือถ้าจะให้เห็นภาพการใช้งานจะไปดูกันที่ตัวอย่างนี้ครับ

let defaults = { food: “spicy”, price: “$$”, ambiance: “noisy” }; let search = { …defaults, food: “rich” };

เป็นการสร้างตัวแปร defaults ไว้ก่อน แล้วค่อย assign ให้กับ search แต่ food ของ search จะมีค่าเป็น rich นะครับ เหมือนการสืบทอดของ class เลยครับ

Array Destructuring

ต้นที่ทุกคนเริ่มเขียนโปรแกรมใหม่ ๆ ทุกคนคงเคยฝึกสลับค่าตัวแปรใช่ไหมละครับ เช่นการสลับค่า x กับ y ถ้าปกติแล้วเราก็จะสร้างตัวแปรขึ้นมาใหม่เพิ่มเก็บค่าไว้สักตัวหนึ่งก่อนประมานนี้รึเปล่าครับ

var x = 1, y = 2
var z = x;
x=y;
y=z
console.log(x, y); // 2,1

แต่ถ้าใช้ Destructuring เข้ามาช่วยเราทำได้ง่าย ๆ อย่างงี้ครับ

var x = 1, y = 2;
[x, y] = [y, x];
console.log(x, y); // 2,1

ไม่ต้องมีตัวแปรที่ 3 ด้วย

หรือว่าการสร้างตัวแปรโดยใช้ array ก็สามารถทำได้ง่าย

let [x, y] = [1, 2, 3, 4]; 
console.log(x, y); // outputs 1, 2

หรือว่าจะอย่างงี้ก็ได้นะครับ

let [, second, , fourth] = [1, 2, 3, 4]
console.log(second, fourth); // outputs 2, 4

จะเห็นว่ามีข้ามค่าตามตัวแปรที่มารับครับ

สรุป

Destructuring สามารถทำให้ code ของเราอ่านได้ง่ายขึ้น(รึเปล่า) และทำให้เราสามารถลดบรรทัดการเขียน code ลงได้เยอะ ดูสะอาดตามากขึ้น ยังไงก็ลองนำไปปรับใช้กับโปรแกรมของเราดูครับ หรือถ้าไปเจอใครใช้ก็จะได้ไม่ต้องมานั่งงงว่าเขาเขียนอะไรอีกแล้วนะครับ

ที่มา
https://basarat.gitbooks.io/typescript/content/docs/destructuring.html
https://www.typescriptlang.org/docs/handbook/variable-declarations.html