Object Destructuring Javascript | Goodpixelpro Tutorial

Goodpixelpro Tutorial – Sampai jumpa kembali, kali ini saya akan membahas Object destructuring di javascript. Yah, Dengan mengetahui ini akan membantu kamu melakukan coding menjadi lebih simple, clean, pretty dan readable hehehe. Menurut saya bagian paling sulit dalam javascript adalah membuat kodingmu mudah di baca orang karena javascript sangat flexible dalam penulisan variabel, function dan loose data type.

Langsung saja kita mulai:

Misal kita mempunyai object yang memiliki lebih dari 10 atribut seperti ini:

var state = { name:"Andy wiranta wijaya", address:"Jl. xxx", phoneNumber:"+627272727227", sex:"pria", .... 

Nah, saya hanya butuh 2 atribut name dan address yang akan saya tampung di suatu variabel.

//Cara konvensional var name = state.name; var address = state.address; //Object destructuring const { name, address } = state; 

Simple, clean, pretty dan readable. Coba kalian bayangkan jika kalian passing lebih dari 10 atribut. Contoh ke dua:

var state = { name : "budi", address:"Jl kebon timur no 7-8", sex : "pria", hobby:"main bola" } printMyNameAndAddress(state) function printMyNameAndAddress({name, address}){ console.log(`my name is ${name} and address ${address}`); } 

Hasilnya:

Mari kita implementasikan di react component, sebelum (destructuring):

render() { return (  ); } 

Bisa dilihat sendiri banyak penggunaan this.props :o, mari kita perbaikin dengan seperti ini:

render() { const { hidePriceFulfillmentDisplay, primaryOffer, productType, productPageUrl, inventory, submapType, ppu, isLoggedIn, gridView } = this.props; return (  ); } 

Kesimpulan:

Remember, beautiful code does a lot without saying much.

Sumber:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
Inspirasi quote:
https://medium.com/walmartlabs/make-your-react-components-pretty-a1ae4ec0f56e#.qlgf8l272

Terimakasih telah berkunjung ke website Goodpixelpro. Semoga bermanfaat.!

There are no comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Start typing and press Enter to search

Shopping Cart