`ArrayBuffer` dalam JavaScript

Artikel ini menjelaskan tentang ArrayBuffer dalam JavaScript.

Kami akan menjelaskan segala sesuatu tentang ArrayBuffer, mulai dari dasar-dasarnya hingga penggunaannya, tipe-tipe yang terkait, dan aplikasi praktisnya.

YouTube Video

ArrayBuffer dalam JavaScript

ArrayBuffer dalam JavaScript adalah sebuah objek untuk menangani data biner tingkat rendah dan sangat berguna untuk memanipulasi data biner dalam WebAPIs, operasi file, dan komunikasi jaringan.

Apa itu ArrayBuffer

ArrayBuffer adalah struktur data untuk menangani data biner dengan panjang tetap. Ini memungkinkan pengolahan data biner mentah yang tidak dapat ditangani oleh array atau objek JavaScript biasa.

ArrayBuffer sendiri tidak dapat langsung memanipulasi data. Sebagai gantinya, data dibaca dan ditulis menggunakan TypedArray atau DataView berdasarkan ArrayBuffer.

ArrayBuffer sangat berguna dalam situasi-situasi berikut ini.

• Saat memproses data biner yang diterima dari jaringan
• Ketika diperlukan berbagi data secara efisien dalam Web Worker.
• Ketika melakukan pemrosesan gambar atau rendering 3D dengan Canvas atau WebGL.
• Ketika memanipulasi file (terutama file biner).

Membuat sebuah ArrayBuffer

Pertama, mari mulai dengan cara membuat sebuah instance dari ArrayBuffer. ArrayBuffer mengalokasikan memori dalam satuan byte, sehingga Anda menentukan ukuran saat pembuatan.

1const buffer = new ArrayBuffer(16); // Create a 16-byte buffer
2console.log(buffer.byteLength); // 16

• Dalam contoh ini, sebuah buffer dengan ukuran 16 byte dialokasikan. Buffer ini belum mengandung data apapun.

Memanipulasi data dengan TypedArray

Anda tidak dapat langsung mengakses sebuah ArrayBuffer, sehingga Anda menggunakan TypedArray untuk membaca dan menulis data. TypedArray menyediakan berbagai jenis tampilan seperti Int8Array dan Float32Array, memungkinkan akses yang efisien ke data biner.

Contoh menggunakan Int8Array

1const buffer = new ArrayBuffer(8); // Create an 8-byte buffer
2const int8View = new Int8Array(buffer); // Create an Int8Array
3
4int8View[0] = 42; // Write data to the first byte
5console.log(int8View[0]); // 42

• Int8Array dapat menyimpan data dalam setiap byte, memungkinkan buffer untuk menampung 8 elemen. Dengan cara ini, dengan menggunakan berbagai jenis tampilan, Anda dapat memanipulasi data secara efisien.

Contoh TypedArray lainnya

JavaScript memiliki berbagai jenis TypedArray. Sebagai contoh, jika Anda ingin menangani bilangan bulat tak bertanda 32-bit, Anda menggunakan Uint32Array.

1const buffer = new ArrayBuffer(16);
2const uint32View = new Uint32Array(buffer);
3
4uint32View[0] = 123456;
5console.log(uint32View[0]); // 123456

• Uint32Array dapat menyimpan data dalam unit 4-byte, sehingga buffer dapat menampung empat elemen. Penting untuk memilih TypedArray yang sesuai berdasarkan jenis data yang Anda tangani.

Manipulasi data fleksibel menggunakan DataView

TypedArray hanya dapat menangani data dengan tipe tetap, tetapi dengan menggunakan DataView, Anda dapat menulis data dalam tipe apa pun ke lokasi mana pun. Ini sangat berguna saat menangani buffer yang berisi berbagai jenis data.

 1const buffer = new ArrayBuffer(16);
 2const dataView = new DataView(buffer);
 3
 4// Write a 32-bit signed integer to byte 0
 5dataView.setInt32(0, 2147483647);
 6console.log(dataView.getInt32(0)); // 2147483647
 7
 8// Write a 16-bit unsigned integer to byte 4
 9dataView.setUint16(4, 65535);
10console.log(dataView.getUint16(4)); // 65535

Dengan menggunakan DataView, Anda dapat menentukan offset byte dan membaca atau menulis data dengan berbagai jenis. Ini sangat berguna saat menangani struktur biner yang kompleks seperti protokol jaringan atau format file.

Pertimbangan tentang Endianess

Saat menggunakan DataView, Anda juga perlu memperhatikan endianess (urutan byte). Tergantung pada arsitektur komputer, urutan penyimpanan data dalam memori dapat berbeda. Metode DataView memiliki opsi untuk menetapkan endianess.

1const buffer = new ArrayBuffer(4);
2const view = new DataView(buffer);
3
4// Write a 32-bit integer in little-endian format
5view.setInt32(0, 42, true); // true indicates little-endian
6console.log(view.getInt32(0, true)); // 42

Jika Anda tidak menetapkan endianess yang benar, data mungkin tidak akan ditafsirkan dengan benar di lingkungan yang berbeda, jadi terutama penting untuk berhati-hati dalam komunikasi jaringan atau operasi file.

Aplikasi ArrayBuffer

ArrayBuffer adalah alat yang kuat yang sering digunakan dalam pengembangan web dan API browser. Mari kita lihat beberapa contoh aplikasi.

Menerima dan Memproses Data Biner

Sebagai contoh, Anda dapat mengambil data biner dari server menggunakan XMLHttpRequest atau API fetch dan menanganinya sebagai ArrayBuffer.

1fetch('https://codesparklab.com/image.jpg')
2    .then(response => response.arrayBuffer())
3    .then(buffer => {
4        const view = new Uint8Array(buffer);
5        console.log(view);
6    });

• Dalam contoh ini, data gambar diambil dari server dan ditangani sebagai Uint8Array. Dengan cara ini, Anda dapat memproses data yang diterima dari server menggunakan ArrayBuffer.

Penggunaan dalam WebGL

Dalam WebGL, ArrayBuffer digunakan untuk menangani data biner seperti data vertex dan data warna secara efisien.

 1const vertices = new Float32Array([
 2    -1.0, -1.0,
 3    1.0, -1.0,
 4    1.0,  1.0,
 5    -1.0,  1.0
 6]);
 7
 8// Send data to the WebGL buffer
 9const buffer = gl.createBuffer();
10gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
11gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• Dalam contoh ini, Float32Array digunakan untuk mendefinisikan koordinat vertex dari sebuah persegi panjang dan mengirimkannya ke buffer WebGL.

Manajemen Memori dan ArrayBuffer

ArrayBuffer mengelola memori pada tingkat byte, membuatnya sangat efisien, tetapi Anda juga perlu berhati-hati dengan manajemen memori. Ketika menangani data biner dalam jumlah besar, penting untuk melepaskan ArrayBuffer yang tidak digunakan dengan benar. Meskipun JavaScript secara otomatis melakukan pengumpulan sampah, jika sebuah ArrayBuffer terus direferensikan, ini dapat menyebabkan kebocoran memori.

Ringkasan

ArrayBuffer menyediakan dasar untuk pemrosesan data biner dalam JavaScript. Dengan menggabungkan TypedArray dan DataView, memungkinkan untuk menangani data biner secara efisien dan fleksibel. Mereka adalah alat yang tak tergantikan dalam pengembangan web, terutama dalam banyak situasi yang melibatkan pengelolaan data biner seperti komunikasi jaringan dan WebGL. Dengan memahami mereka dengan benar dan menggunakannya secara tepat, Anda dapat meningkatkan performa dan efisiensi.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video