Fungsi Array.from() pada JavaScript: Konversi Objek ke Array dengan Mudah

JavaScript adalah bahasa pemrograman yang sangat populer dan kuat yang banyak digunakan untuk mengembangkan aplikasi web. Salah satu fitur yang kuat dalam JavaScript adalah kemampuannya untuk bekerja dengan array. Array adalah struktur data yang digunakan untuk menyimpan dan mengelola sejumlah elemen yang terorganisir secara teratur.

Namun, dalam beberapa kasus, Anda mungkin perlu mengkonversi objek yang mirip dengan array menjadi array sejati. Di sinilah fungsi Array.from() pada JavaScript sangat berguna. Fungsi ini memungkinkan Anda untuk melakukan konversi tersebut dengan mudah dan efisien. Dalam artikel ini, kita akan menjelajahi fungsi Array.from() pada JavaScript secara mendalam, mempelajari cara kerjanya, dan melihat contoh penggunaannya.

Mengenal Fungsi Array.from()

Fungsi Array.from() adalah metode bawaan JavaScript yang memungkinkan Anda untuk membuat array baru dari objek yang mirip dengan array atau iterable object. Objek yang mirip dengan array adalah objek yang memiliki panjang atau elemen yang dapat diiterasi.

Dengan menggunakan fungsi Array.from(), Anda dapat mengonversi objek seperti string, NodeList, dan objek Arguments menjadi array sejati. Ini sangat berguna ketika Anda ingin memanipulasi atau mengakses elemen-elemen ini dengan lebih mudah menggunakan metode dan properti array.

Sintaksis Fungsi Array.from()

Berikut adalah sintaksis dasar dari fungsi Array.from():

Array.from(objek, fungsiMap, konteks)

Di sini:

• objek (wajib): Objek yang akan dikonversi menjadi array.
• fungsiMap (opsional): Fungsi untuk memetakan setiap elemen objek sebelum ditambahkan ke array baru. Ini mirip dengan penggunaan fungsi map() pada array.
• konteks (opsional): Konteks yang akan digunakan sebagai “this” dalam fungsiMap.

Fungsi Array.from() mengembalikan array baru yang terdiri dari elemen-elemen objek yang dikonversi.

Contoh Penggunaan Fungsi Array.from()

Mari kita lihat beberapa contoh penggunaan fungsi Array.from() untuk memahami bagaimana itu bekerja dalam praktiknya.

Contoh 1: Mengkonversi String menjadi Array

const str = 'Halo, dunia!';
const arr = Array.from(str);

console.log(arr);
// Output: ['H', 'a', 'l', 'o', ',', ' ', 'd', 'u', 'n', 'i', 'a', '!']

Pada contoh di atas, kita mengonversi string “Halo, dunia!” menjadi array dengan menggunakan fungsi Array.from(). Setiap karakter dalam string dianggap sebagai elemen terpisah dalam array yang dihasilkan.

Contoh 2: Mengkonversi NodeList menjadi Array

const nodeList = document

.querySelectorAll('p');
const arr = Array.from(nodeList);

console.log(arr);
// Output: [p, p, p, p]

Dalam contoh di atas, kita menggunakan fungsi Array.from() untuk mengonversi NodeList yang diperoleh dari pemilihan elemen paragraf pada halaman web menjadi array yang sebenarnya. Hal ini memungkinkan kita untuk menggunakan metode dan properti array pada elemen-elemen tersebut dengan mudah.

Mengoptimalkan Penggunaan Fungsi Array.from()

Ketika menggunakan fungsi Array.from(), ada beberapa cara yang dapat Anda lakukan untuk mengoptimalkan penggunaannya dalam pengembangan web.

1. Memetakan Elemen dengan Fungsi Map

Fungsi Array.from() memungkinkan Anda untuk menyediakan fungsi map sebagai argumen kedua. Fungsi ini akan memetakan setiap elemen objek sebelum ditambahkan ke array baru. Anda dapat menggunakan ini untuk memanipulasi atau mengubah setiap elemen dengan cara tertentu.

Contoh:

const str = '12345';
const arr = Array.from(str, (elem) => parseInt(elem));

console.log(arr);
// Output: [1, 2, 3, 4, 5]

Dalam contoh di atas, kita menggunakan fungsi map untuk mengonversi setiap karakter string menjadi bilangan bulat sebelum menambahkannya ke array baru.

2. Menggunakan Konteks dalam Fungsi Map

Anda juga dapat menyediakan konteks yang akan digunakan sebagai “this” dalam fungsi map. Ini dapat berguna ketika Anda ingin mengakses konteks tertentu dalam pemetaan elemen.

Contoh:

const obj = {
  value: 2,
  double: function (elem) {
    return elem * this.value;
  },
};

const arr = Array.from([1, 2, 3], obj.double, obj);

console.log(arr);
// Output: [2, 4, 6]

Dalam contoh di atas, kita menggunakan fungsi map untuk menggandakan setiap elemen array, dengan mengakses properti “value” dalam konteks objek.

Kesimpulan

Fungsi Array.from() pada JavaScript adalah alat yang sangat berguna untuk mengkonversi objek yang mirip dengan array menjadi array sejati. Dengan menggunakan fungsi ini, Anda dapat dengan mudah mengakses, memanipulasi, dan bekerja dengan elemen-elemen tersebut menggunakan metode dan properti array yang sudah dikenal.

Dalam artikel ini, kita telah mempelajari tentang fungsi Array.from() dan cara kerjanya. Kita juga melihat beberapa contoh penggunaannya, termasuk mengkonversi string menjadi array dan mengkonversi NodeList menjadi array.