JavaScript - The TypedArray Object

Hello there, future coding superstars! ? Today, we're going to embark on an exciting journey into the world of TypedArrays in JavaScript. Don't worry if you're new to programming - I'll be your friendly guide, and we'll take this step by step. So, grab your favorite beverage, get comfy, and let's dive in!

What is a TypedArray?

Imagine you're organizing a big party (because who doesn't love a good party, right?). You need to keep track of how many cups, plates, and utensils you have. That's kind of what a TypedArray does in JavaScript - it helps us organize and store specific types of data efficiently.

A TypedArray is a special kind of array in JavaScript that can only contain numbers of a specific type. It's like having separate boxes for your forks, spoons, and knives instead of throwing them all in one big drawer.

// Creating a TypedArray of 8-bit integers
const myArray = new Int8Array(5);
console.log(myArray); // Output: Int8Array(5) [0, 0, 0, 0, 0]

In this example, we've created a TypedArray that can hold five 8-bit integers. It's like setting up five small boxes, each able to hold a number between -128 and 127.

Why TypedArray?

You might be wondering, "Why bother with TypedArrays when we have regular arrays?" Great question! TypedArrays have some superpowers that make them perfect for certain situations:

1. Speed: They're faster for numerical operations.
2. Memory efficiency: They use a fixed amount of memory.
3. Compatibility: They play well with binary data and other languages.

It's like using a specialized tool instead of a Swiss Army knife - sometimes, you need that perfect fit!

TypedArray Objects

JavaScript offers various types of TypedArrays, each designed for different number types and sizes. Let's look at them in a nice, organized table:

TypedArray	Description	Range
Int8Array	8-bit signed integer	-128 to 127
Uint8Array	8-bit unsigned integer	0 to 255
Int16Array	16-bit signed integer	-32,768 to 32,767
Uint16Array	16-bit unsigned integer	0 to 65,535
Int32Array	32-bit signed integer	-2,147,483,648 to 2,147,483,647
Uint32Array	32-bit unsigned integer	0 to 4,294,967,295
Float32Array	32-bit floating point	~1.2E-38 to ~3.4E+38
Float64Array	64-bit floating point	~5.0E-324 to ~1.8E+308

Wow, that's quite a list! Don't worry if it seems overwhelming - we'll use examples to make it all clear.

TypedArray Properties

TypedArrays come with some handy properties. Let's explore them:

1. length

This tells us how many elements are in our TypedArray.

const myArray = new Int16Array(3);
console.log(myArray.length); // Output: 3

2. BYTES_PER_ELEMENT

This property tells us how many bytes each element in the array takes up.

console.log(Int8Array.BYTES_PER_ELEMENT); // Output: 1
console.log(Int16Array.BYTES_PER_ELEMENT); // Output: 2

It's like knowing how big each box is in our storage system!

TypedArray Static Methods

TypedArrays come with some built-in methods that we can use without creating an instance. Let's look at a couple:

1. TypedArray.from()

This method creates a new TypedArray from an array-like object.

const regularArray = [1, 2, 3, 4];
const typedArray = Int8Array.from(regularArray);
console.log(typedArray); // Output: Int8Array(4) [1, 2, 3, 4]

It's like converting our mixed utensil drawer into neatly organized boxes!

2. TypedArray.of()

This method creates a new TypedArray with a variable number of arguments.

const myArray = Int16Array.of(1, 2, 3, 4, 5);
console.log(myArray); // Output: Int16Array(5) [1, 2, 3, 4, 5]

It's like saying, "Here are the items, please organize them for me!"

TypedArray Instance Methods

Now, let's look at some methods we can use on our TypedArray instances:

1. set()

This method lets us copy values into our TypedArray.

const myArray = new Int8Array(5);
myArray.set([1, 2, 3]);
console.log(myArray); // Output: Int8Array(5) [1, 2, 3, 0, 0]

It's like putting items into our organized boxes.

2. subarray()

This method returns a new TypedArray that's a portion of the original.

const originalArray = new Int8Array([1, 2, 3, 4, 5]);
const subArray = originalArray.subarray(1, 4);
console.log(subArray); // Output: Int8Array(3) [2, 3, 4]

It's like taking a few boxes out of our storage system for a specific task.

Examples

Let's put all this knowledge together with some practical examples!

Example 1: Creating and Modifying a TypedArray

// Create a TypedArray of 8-bit unsigned integers
const pixelData = new Uint8Array(4);

// Set RGB values for a pixel (Red: 255, Green: 128, Blue: 64, Alpha: 255)
pixelData[0] = 255; // Red
pixelData[1] = 128; // Green
pixelData[2] = 64;  // Blue
pixelData[3] = 255; // Alpha (fully opaque)

console.log(pixelData); // Output: Uint8Array(4) [255, 128, 64, 255]

In this example, we're using a Uint8Array to represent the color values of a pixel. Each value is between 0 and 255, perfect for 8-bit unsigned integers!

Example 2: Using TypedArrays for Performance

const size = 1000000;

// Using regular array
console.time('Regular Array');
const regularArray = new Array(size);
for (let i = 0; i < size; i++) {
regularArray[i] = i;
}
console.timeEnd('Regular Array');

// Using TypedArray
console.time('TypedArray');
const typedArray = new Int32Array(size);
for (let i = 0; i < size; i++) {
typedArray[i] = i;
}
console.timeEnd('TypedArray');

Run this code, and you'll likely see that the TypedArray is faster! It's like having a well-organized storage system versus throwing everything into a big pile.

And there you have it, folks! We've journeyed through the land of TypedArrays, from understanding what they are to seeing them in action. Remember, practice makes perfect, so don't be afraid to experiment with these concepts.

Before you know it, you'll be TypedArray wizards, optimizing your code and impressing your fellow developers. Until next time, happy coding! ??‍??‍?

Terjemahan ke Bahasa Melayu:

JavaScript - Objek TypedArray

Hai هناك، bakat-bakat pemrograman masa depan! ? Hari ini, kita akan memulakan sebuah perjalanan yang menarik ke dunia TypedArrays dalam JavaScript. Jangan bimbang jika anda baru dalam bidang pemrograman - saya akan menjadi panduannya yang ramah, dan kita akan mengambil langkah demi langkah. Jadi, ambil minuman kesukaan anda, duduk selesa, dan mari kita masuk ke dalam!

Apa itu TypedArray?

Bayangkan anda sedang mengatur sebuah pesta besar (siapa yang tidak suka pesta, kan?). Anda perlu menguruskan berapa banyak gelas, piring, dan perkakas yang anda punyai. Itu seperti apa yang dilakukan TypedArray dalam JavaScript - ia membantu kita untuk mengatur dan menyimpan jenis data tertentu secara efisien.

TypedArray adalah jenis khusus array dalam JavaScript yang hanya boleh mengandungi nombor jenis tertentu. Itu seperti memiliki kotak terpisah untuk garpu, sendok, dan pisau anda, bukannya melemparkan semuanya ke dalam satu lemari besar.

// Membuat TypedArray daripada integer 8-bit
const myArray = new Int8Array(5);
console.log(myArray); // Output: Int8Array(5) [0, 0, 0, 0, 0]

Dalam contoh ini, kita telah membuat TypedArray yang boleh menyimpan lima integer 8-bit. Itu seperti setting lima kotak kecil, setiap kotak boleh menyimpan nombor antara -128 dan 127.

Mengapa TypedArray?

Anda mungkin bertanya, "Mengapa malu dengan TypedArrays ketika kita ada array biasa?" Pertanyaan hebat! TypedArrays mempunyai beberapa kuasa khas yang menjadikannya sempurna untuk situasi tertentu:

1. Kecerdasan: Mereka lebih cepat untuk operasi nombor.
2. Efisiensi memori: Mereka menggunakan jumlah memori tetap.
3. Keserasian: Mereka bermain lancar dengan data binari dan bahasa lain.

Itu seperti menggunakan alat khusus instead of a Swiss Army knife - kadang-kadang, anda perlu kepadatan yang sempurna!

Objek TypedArray

JavaScript menyediakan jenis-jenis TypedArrays yang berbeza, setiap satu direka untuk jenis nombor dan saiz yang berbeza. Mari kita lihat mereka dalam jadual yang rapi:

TypedArray	Description	Range
Int8Array	8-bit signed integer	-128 to 127
Uint8Array	8-bit unsigned integer	0 to 255
Int16Array	16-bit signed integer	-32,768 to 32,767
Uint16Array	16-bit unsigned integer	0 to 65,535
Int32Array	32-bit signed integer	-2,147,483,648 to 2,147,483,647
Uint32Array	32-bit unsigned integer	0 to 4,294,967,295
Float32Array	32-bit floating point	~1.2E-38 to ~3.4E+38
Float64Array	64-bit floating point	~5.0E-324 to ~1.8E+308

Wah, itu adalah senarai yang cukup panjang! Jangan bimbang jika ia tampak menakutkan - kita akan menggunakan contoh untuk menjadikan ia jelas.

Properti TypedArray

TypedArrays datang dengan beberapa properti yang berguna. Mari kita jelajahi mereka:

1. length

Ini memberitahu kita berapa banyak elemen yang ada dalam TypedArray kita.

const myArray = new Int16Array(3);
console.log(myArray.length); // Output: 3

2. BYTES_PER_ELEMENT

Properti ini memberitahu kita berapa banyak bait setiap elemen dalam array.

console.log(Int8Array.BYTES_PER_ELEMENT); // Output: 1
console.log(Int16Array.BYTES_PER_ELEMENT); // Output: 2

Itu seperti mengetahui besar kotak dalam sistem penyimpanan kita!

Metode Statis TypedArray

TypedArrays datang dengan beberapa metode binaan yang kita boleh gunakan tanpa mencipta instance. Mari kita lihat beberapa:

1. TypedArray.from()

Metode ini mencipta TypedArray baru daripada objek seperti array.

const regularArray = [1, 2, 3, 4];
const typedArray = Int8Array.from(regularArray);
console.log(typedArray); // Output: Int8Array(4) [1, 2, 3, 4]

Itu seperti mengubah lemari peralatan campur menjadi kotak yang diatur rapi!

2. TypedArray.of()

Metode ini mencipta TypedArray baru dengan bilangan variabel argumen.

const myArray = Int16Array.of(1, 2, 3, 4, 5);
console.log(myArray); // Output: Int16Array(5) [1, 2, 3, 4, 5]

Itu seperti mengatakan, "Ini adalah item, sila atur mereka untuk saya!"

Metode Instance TypedArray

Sekarang, mari kita lihat beberapa metode yang kita boleh gunakan pada instance TypedArray kita:

1. set()

Metode ini membolehkan kita menyalin nilai ke TypedArray.

const myArray = new Int8Array(5);
myArray.set([1, 2, 3]);
console.log(myArray); // Output: Int8Array(5) [1, 2, 3, 0, 0]

Itu seperti memasukkan item ke dalam kotak yang diatur kita.

2. subarray()

Metode ini mengembalikan TypedArray baru yang adalah sebahagian daripada asal.

const originalArray = new Int8Array([1, 2, 3, 4, 5]);
const subArray = originalArray.subarray(1, 4);
console.log(subArray); // Output: Int8Array(3) [2, 3, 4]

Itu seperti mengambil beberapa kotak daripada sistem penyimpanan kita untuk tugas khusus.

Contoh

Mari kita gabungkan semua pengetahuan ini dengan beberapa contoh praktikal!

Contoh 1: Membuat dan Mengubah TypedArray

// Membuat TypedArray daripada integer 8-bit unsigned
const pixelData = new Uint8Array(4);

// Menetapkan nilai RGB untuk satu piksel (Merah: 255, Hijau: 128, Biru: 64, Alpha: 255)
pixelData[0] = 255; // Merah
pixelData[1] = 128; // Hijau
pixelData[2] = 64;  // Biru
pixelData[3] = 255; // Alpha (sepenuhnya buram)

console.log(pixelData); // Output: Uint8Array(4) [255, 128, 64, 255]

Dalam contoh ini, kita menggunakan Uint8Array untuk merepresentasikan nilai warna sebuah piksel. Setiap nilai adalah antara 0 dan 255, sempurna untuk integer 8-bit unsigned!

Contoh 2: Menggunakan TypedArrays untuk Prestasi

const size = 1000000;

// Menggunakan array biasa
console.time('Regular Array');
const regularArray = new Array(size);
for (let i = 0; i < size; i++) {
regularArray[i] = i;
}
console.timeEnd('Regular Array');

// Menggunakan TypedArray
console.time('TypedArray');
const typedArray = new Int32Array(size);
for (let i = 0; i < size; i++) {
typedArray[i] = i;
}
console.timeEnd('TypedArray');

Jalankan kod ini, dan anda mungkin akan melihat TypedArray adalah lebih cepat! Itu seperti memiliki sistem penyimpanan yang teratur berbanding melemparkan segalanya ke dalam satu timbunan besar.

Dan itu lah, teman-teman! Kita telah menjelajah melalui negeri TypedArrays, dari memahami apa itu hingga melihat mereka dalam aksi. Ingat, latihan membuat sempurna, jadi jangan takut untuk menguji konsep ini.

Sebelum anda tahu, anda akan menjadi ahli TypedArray, mengoptimalkan kod anda dan mengimpresskan rakan kerjaya anda. Sampaijumpa lagi, selamat coding! ??‍??‍?

Credits: Image by storyset