JavaScript - The TypedArray Object

안녕하세요, 미래의 코딩 슈퍼스타 여러분! ? 오늘 우리는 JavaScript의 TypedArrays 세계에 흥미로운 여정을 떠납니다. 프로그래밍에 새로운 사람이라면 걱정하지 마세요 - 나는 당신의 친절한 안내자가 되겠습니다. 우리는 단계별로 이를 탐구하겠습니다. 그러니 좋아하는 음료를 한 잔 마시고 편안하게 앉아 있자고요. 그럼 다 함께 들어보겠습니다!

JavaScript - TypedArray

What is a TypedArray?

大型 파티를 준비하는 것을 상상해 봅시다 (누구나 좋은 파티를 좋아하지 않나요?). 그럼 컵, 접시, 그리고 식기의 수를 관리해야 합니다. JavaScript에서 TypedArray가 하는 일은 이와 비슷합니다 - 특정 유형의 데이터를 효율적으로 조직하고 저장하는 데 도움을 줍니다.

TypedArray는 JavaScript의 특별한 종류의 배열로, 특정 유형의 숫자만 포함할 수 있습니다. 이는Spoons, forks, and knives를 따로 보관하는 별도의 상자를 가지는 것과 같은 것입니다.

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

이 예제에서 우리는 5개의 8비트 정수를 담을 수 있는 TypedArray를 만들었습니다. 이는 -128에서 127 사이의 숫자를 담을 수 있는 5개의 작은 상자를 설정하는 것과 같습니다.

Why TypedArray?

정수 배열을 사용하는 것보다 TypedArrays를 사용하는 이유에 대해 궁금할 수 있습니다. 훌륭한 질문입니다! TypedArrays는 특정 상황에서 완벽하게 맞는 몇 가지 특별한 능력을 가지고 있습니다:

Speed: 숫자 연산이 더 빠릅니다.
Memory efficiency: 고정된 메모리를 사용합니다.
Compatibility: 이진 데이터와 다른 언어와 잘 어울립니다.

이는 다용도 도구 대신 특수 도구를 사용하는 것과 같습니다 - 가끔은 완벽한 핏이 필요합니다!

TypedArray Objects

JavaScript는 다양한 유형의 TypedArrays를 제공하며, 각각은 다른 숫자 유형과 크기에 맞게 설계되었습니다. 이를 아름답게 정리된 표로 보겠습니다:

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

와우, 그리 긴 목록이네! 이리에 지쳐하지 마세요 - 우리는 예제를 사용하여 이 모든 것을 명확하게 만들 것입니다.

TypedArray Properties

TypedArrays는 몇 가지 유용한 속성을 가지고 있습니다. 이를 탐구해 보겠습니다:

1. length

이 속성은 TypedArray에 얼마나 많은 요소가 있는지 알려줍니다.

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

2. BYTES_PER_ELEMENT

이 속성은 배열의 각 요소가 몇 바이트를 차지하는지 알려줍니다.

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

이는 우리의 저장 시스템에서 각 상자의 크기를 알고 있는 것과 같습니다!

TypedArray Static Methods

TypedArrays는 인스턴스를 생성하지 않고도 사용할 수 있는 몇 가지 내장된 메서드를 제공합니다. 두 가지를 살펴보겠습니다:

1. TypedArray.from()

이 메서드는 유사 배열 객체에서 새로운 TypedArray를 만듭니다.

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

이는 우리의 혼잡한 식기抽屉을 정리된 상자로 변환하는 것과 같습니다!

2. TypedArray.of()

이 메서드는 가변 개수의 인자로 새로운 TypedArray를 만듭니다.

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

이는 "이 아이템들을 정리해 주세요!"라고 말하는 것과 같습니다!

TypedArray Instance Methods

이제 우리는 TypedArray 인스턴스에서 사용할 수 있는 몇 가지 메서드를 살펴보겠습니다:

1. set()

이 메서드는 우리의 TypedArray에 값을 복사합니다.

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

이는 우리의 정리된 상자에 아이템을 넣는 것과 같습니다.

2. subarray()

이 메서드는 원래 배열의 일부를 반환하는 새로운 TypedArray를 만듭니다.

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

이는 우리의 저장 시스템에서 몇 개의 상자를 특정 작업 위해 꺼내는 것과 같습니다.

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]

이 예제에서 우리는 Uint8Array를 사용하여 픽셀의 색상 값을 나타냅니다. 각 값은 0에서 255 사이의 8비트 무 unsigned 정수에 알맞습니다!

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

이 코드를 실행하면 TypedArray가 더 빠르다는 것을 확인할 수 있습니다! 이는 잘 정리된 저장 시스템과 모든 것이 한 덩어리로 던져진 저장 상자 사이의 차이입니다.

그리고 여러분! 우리는 TypedArrays의 세계를 탐험했고, 그들을 이해하고 사용하는 방법을 배웠습니다. 연습이 완벽을 만들어 줍니다. 그러니 이 개념들을 실험해 두시오.

다음에 다시 만날 때까지, 행복한 코딩을 하세요! ??‍??‍?

Credits: Image by storyset