Destrukturisasi Data di JavaScript

Destrukturisasi Data di JavaScript – JavaScript ES6 #5

72 views
1 minute read

10 Maret 2023

Destrukturisasi (destructuring) adalah proses mengembalikan data struktur yang sebelumnya terstruktur menjadi tidak lagi terstruktur atau dipisah pada tiap-tiap elemen.

Cara ini biasa sering dipraktikkan untuk mengambil nilai-nilai dari elemen tertentu pada data yang bentuknya sudah terstruktur sebelumnya, seperti pada array atau objek di JavaScript.

Berikut cara-cara melakukan destrukturisasi data struktur pada JavaScript.

Destrukturisasi Array di JavaScript

Sebelum ES6, kita harus mengekstrak nilai dari sebuah array secara manual dengan menggunakan sintaks array indexing.

Berikut adalah contoh bagaimana kita dapat mengekstrak nilai dari sebuah array menggunakan sintaks array indexing di ES5:

// ES5

const arr = [‘Yaumil’, 26]; 

const name = arr[0]; 
const age = arr[1];

console.log(name); 
console.log(age);

Pada ES6 ada destrukturisasi pada array, sehingga penulisan bisa lebih singkat dan mudah seperti contoh kode berikut.

// ES6

const arr = [‘Yaumil’, 26];

const [name, age] = arr;

console.log(name);

console.log(age);

Destrukturisasi Object di JavaScript

Sama seperti array ES6, sebelumnya kita harus mengekstraknya secara manual menggunakan sintaks objek.

Berikut adalah contoh bagaimana kita dapat mengekstrak nilai dari objek menggunakan sintaks objek di ES6:

// ES5

const obj = { 
    firstName: ‘Yaumil’,
    lastName: ‘Ikhsan’ 
};

var firstName = obj.firstName;
var lastName = obj.lastName;

console.log(firstName);
console.log(lastName);

Destructuring object pada javascript ES6 dapat kita lihat pada contoh dibawah ini.

// ES6

const obj = {
    firstName: ‘Yaumil’,
    lastName: ‘Ikhsan’
};

const {firstName, lastName} = obj;

console.log(firstName);

console.log(lastName);

atau

const {firstName : a, lastName: b} = obj;

console.log(a);

console.log(b);

Contoh Penggunaan Destrukturisasi di JavaScript

function calcRetirement(year) {
const age = new Date().getFullYear() - year;
return [age, 65 – age];
}

const [age, retirement] = calcRetirement(1998);

console.log(age);
console.log(retirement);

Destrukturisasi Data di JavaScript – JavaScript ES6 #5