জাভাস্ক্রিপ্টে `ArrayBuffer`

এই প্রবন্ধটিতে জাভাস্ক্রিপ্টে ArrayBuffer ব্যাখ্যা করা হয়েছে।

ArrayBuffer সম্পর্কে আমরা সব কিছু ব্যাখ্যা করবো, এর মৌলিক জ্ঞান থেকে শুরু করে এর ব্যবহার, সম্পর্কিত টাইপগুলি এবং বাস্তবিক প্রয়োগ।

YouTube Video

জাভাস্ক্রিপ্টে ArrayBuffer

জাভাস্ক্রিপ্টের ArrayBuffer একটি অবজেক্ট যা নিম্ন-স্তরের বাইনারি ডেটা পরিচালনার জন্য ব্যবহৃত হয় এবং এটি বিশেষত WebAPI, ফাইল পরিচালনা, এবং নেটওয়ার্ক যোগাযোগের বাইনারি ডেটা পরিচালনার জন্য উপযোগী।

ArrayBuffer কী

ArrayBuffer একটি ডেটা স্ট্রাকচার যা নির্দিষ্ট-দৈর্ঘ্যের বাইনারি ডেটা পরিচালনার জন্য ব্যবহৃত হয়। এটি অধিক কাঁচা বাইনারি ডেটা প্রক্রিয়াকরণ করতে সক্ষম করে যেগুলি সাধারণ জাভাস্ক্রিপ্ট অ্যারেগুলি বা অবজেক্টগুলি দ্বারা পরিচালিত করা সম্ভব নয়।

ArrayBuffer নিজে সরাসরি ডেটা ম্যানিপুলেট করতে পারে না। বরং, ডেটা পড়া এবং লেখা হয় TypedArray অথবা DataView ব্যবহার করে যা একটি ArrayBuffer এর উপর ভিত্তি করে।

ArrayBuffer বিশেষভাবে কার্যকর নিম্নলিখিত পরিস্থিতিগুলিতে।

• নেটওয়ার্ক থেকে প্রাপ্ত বাইনারি ডেটা প্রক্রিয়াকরণের সময়
• Web Worker এ কার্যকর ডেটা শেয়ার করার প্রয়োজন হলে।
• ক্যানভাস বা WebGL এর মাধ্যমে ইমেজ প্রসেসিং বা 3D রেন্ডারিং করার সময়।
• ফাইল ম্যানিপুলেশন করার সময় (বিশেষ করে বাইনারি ফাইল)।

ArrayBuffer তৈরি করা

প্রথমে, চলুন দেখি কীভাবে একটি ArrayBuffer এর উদাহরণ তৈরি করা যায়। ArrayBuffer বাইট এককগুলিতে মেমরি বরাদ্দ করে, তাই আপনি এটি তৈরি করার সময় এর মাপ নির্ধারণ করবেন।

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

• এই উদাহরণে, ১৬ বাইটের একটি বাফার বরাদ্দ করা হয়েছে। এই বাফারে এখনও কোনো ডেটা নেই।

TypedArray ব্যবহার করে ডেটা পরিচালনা করা

আপনি সরাসরি একটি ArrayBuffer-এ প্রবেশ করতে পারবেন না, তাই ডেটা পড়া এবং লেখার জন্য আপনাকে একটি TypedArray ব্যবহার করতে হবে। TypedArray বিভিন্ন ধরনের ভিউ প্রদান করে যেমন Int8Array এবং Float32Array, যা দ্বারা বাইনারি ডেটায় কার্যকর প্রবেশ সম্ভব।

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 প্রতিটি বাইটে ডেটা সংরক্ষণ করতে পারে, যা বাফারটিকে ৮টি উপাদান ধারণ করতে দেয়। এইভাবে, বিভিন্ন ধরণের ভিউ ব্যবহার করে, আপনি ডেটা দক্ষতার সাথে পরিচালনা করতে পারেন।

অন্যান্য TypedArray উদাহরণ

জাভাস্ক্রিপ্ট-এর বিভিন্ন ধরণের TypedArray রয়েছে। উদাহরণস্বরূপ, যদি আপনি ৩২-বিট আনসাইন্ডড ইন্টিজার পরিচালনা করতে চান, তাহলে Uint32Array ব্যবহার করবেন।

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

• Uint32Array ৪-বাইট এককে ডেটা সংরক্ষণ করতে পারে, তাই বাফারটি চারটি উপাদান ধরে রাখতে পারে। আপনার পরিচালনাধীন ডেটার ধরনের উপর ভিত্তি করে সঠিক TypedArray নির্বাচন করা গুরুত্বপূর্ণ।

DataView ব্যবহার করে নমনীয় ডেটা পরিচালনা।

TypedArray শুধুমাত্র একটি নির্দিষ্ট ধরণের ডেটা পরিচালনা করতে পারে, কিন্তু DataView ব্যবহার করে আপনি যেকোন ধরণের ডেটা যেকোনো স্থানে লিখতে পারবেন। এটি বিশেষভাবে উপযোগী যখন আপনি মিশ্র ডেটা টাইপযুক্ত বাফারের সাথে কাজ করেন।

 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

DataView ব্যবহার করে আপনি একটি বাইট অফসেট নির্ধারণ করতে পারেন এবং বিভিন্ন ধরণের ডেটা পড়তে বা লিখতে পারেন। এটি জটিল বাইনারি কাঠামো যেমন নেটওয়ার্ক প্রোটোকল বা ফাইল ফরম্যাট পরিচালনায় অত্যন্ত উপযোগী।

এন্ডিয়ানেস-এর বিবেচনা

DataView ব্যবহার করার সময় আপনাকে এন্ডিয়ানেস (বাইট অর্ডার) এর উপরও মনোযোগ দিতে হবে। কম্পিউটার আর্কিটেকচারের উপর নির্ভর করে, মেমরিতে ডেটা সঞ্চয় করার ক্রম আলাদা হতে পারে। DataView মেথডে এন্ডিয়ানেস নির্দিষ্ট করার অপশন রয়েছে।

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

যদি আপনি সঠিক এন্ডিয়ানেস নির্দিষ্ট না করেন, তবে বিভিন্ন পরিবেশে ডেটা সঠিকভাবে বোঝা নাও যেতে পারে, তাই নেটওয়ার্ক যোগাযোগ বা ফাইল কার্যক্রমে বিশেষভাবে সতর্ক থাকা গুরুত্বপূর্ণ।

ArrayBuffer এর প্রয়োগসমূহ

ArrayBuffer একটি শক্তিশালী টুল যা প্রায়শই ওয়েব ডেভেলপমেন্ট এবং ব্রাউজার API-তে ব্যবহৃত হয়। চলুন প্রয়োগের কিছু উদাহরণ দেখি।

বাইনারি ডেটা গ্রহণ এবং প্রক্রিয়াকরণ

উদাহরণস্বরূপ, আপনি XMLHttpRequest বা fetch API ব্যবহার করে একটি সার্ভার থেকে বাইনারি ডেটা আনতে পারেন এবং এটিকে একটি 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    });

• এই উদাহরণে, ইমেজ ডেটা সার্ভার থেকে আনা হয়েছে এবং এটি একটি Uint8Array হিসাবে পরিচালিত হয়েছে। এইভাবে, আপনি সার্ভার থেকে প্রাপ্ত ডেটা ArrayBuffer ব্যবহার করে প্রক্রিয়াকরণ করতে পারেন।

WebGL-এ ব্যবহার

WebGL-এ, ArrayBuffer ভার্টেক্স ডেটা এবং কালার ডেটার মতো বাইনারি ডেটা দক্ষতার সাথে পরিচালনার জন্য ব্যবহার করা হয়।

 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);

• এই উদাহরণে, একটি আয়তক্ষেত্রের ভার্টেক্স কোঅর্ডিনেটগুলি সংজ্ঞায়িত করতে এবং সেগুলি একটি WebGL বাফারে পাঠাতে Float32Array ব্যবহার করা হয়েছে।

মেমরি ব্যবস্থাপনা এবং ArrayBuffer

ArrayBuffer বাইট স্তরে মেমরি পরিচালনা করে, যা এটিকে অত্যন্ত কার্যকরী করে তোলে, তবে মেমরি ব্যবস্থাপনায় আপনাকেও সতর্ক থাকতে হবে। বড় বাইনারি ডেটার সাথে কাজ করার সময় ব্যবহৃত না হওয়া ArrayBuffer সঠিকভাবে মুক্ত করা গুরুত্বপূর্ণ। যদিও জাভাস্ক্রিপ্ট স্বয়ংক্রিয়ভাবে গার্বেজ সংগ্রহ করে, যদি ArrayBuffer এর রেফারেন্স চালু থাকে, তবে এটি মেমরি লিক সৃষ্টি করতে পারে।

সারসংক্ষেপ

ArrayBuffer জাভাস্ক্রিপ্টে বাইনারি ডেটা প্রক্রিয়াকরণের জন্য ভিত্তি প্রদান করে। TypedArray এবং DataView একত্রিত করে, বাইনারি ডেটা কার্যকরী এবং নমনীয়ভাবে পরিচালনা করা সম্ভব। তারা ওয়েব ডেভেলপমেন্টে অপরিহার্য সরঞ্জাম, বিশেষ করে নেটওয়ার্ক যোগাযোগ এবং WebGL এর মতো বাইনারি ডেটা পরিচালনার প্রয়োজনীয় অনেক পরিস্থিতিতে। তাদের সঠিকভাবে বুঝে এবং সঠিকভাবে ব্যবহার করে, আপনি কার্যক্ষমতা এবং দক্ষতা বাড়াতে পারেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video