Float32Array(float32Array)에 대한 오해를 풀고, 고성능 JavaScript 배열 완벽 정복하기

2025-11-17

Float32Array는 JavaScript의 TypedArray(타입이 지정된 배열) 객체 중 하나로, 32비트 부동 소수점 숫자를 효율적으로 저장하고 처리하기 위해 사용됩니다. 주로 웹GL(WebGL)이나 오디오/비디오 처리와 같은 고성능 환경에서 사용되죠.

요청하신 Float32Array.float32Array는 표준 JavaScript 명세에는 없는 속성입니다. 아마도 Float32Array 생성자나 Float32Array 인스턴스의 메서드에 대한 오타이거나 혼동하신 것 같아요.

가장 흔하게 사용되는 Float32Array 생성과 관련된 일반적인 문제와 대체 방법을 예시 코드로 친절하게 설명해 드릴게요!

ECMAScript 2015(ES6) 이후부터 Float32Array 생성자는 반드시 new 연산자를 사용해야 합니다. 이전에는 new 없이 호출하면 암묵적으로 생성자처럼 동작하기도 했지만, 이제는 오류가 발생합니다.

// new를 사용하지 않음
const size = 3;
const myArray = Float32Array(size); 
//  ES6 이후: TypeError: Constructor Float32Array requires 'new'

// 반드시 new를 사용해야 합니다.
const size = 3;
const myArray = new Float32Array(size); 
console.log(myArray.length); // 출력: 3 (크기 3의 배열이 생성됨)

배열을 생성할 때 길이를 나타내는 숫자, 혹은 기존 배열이나 다른 TypedArray를 인수로 전달해야 합니다. 아무것도 전달하지 않으면 길이가 0인 배열이 생성됩니다.

// 인수가 없거나 잘못된 인수를 전달
const myArray = new Float32Array(); 
console.log(myArray.length); // 출력: 0
// 배열에 값을 넣을 수 없음: myArray[0] = 1.0;

배열의 길이로 생성

// 길이가 4인 배열을 생성 (모든 값은 0으로 초기화됨)
const myArray = new Float32Array(4);
myArray[0] = 1.23;
console.log(myArray); // 출력: Float32Array(4) [1.23, 0, 0, 0]

일반 배열(Array)에서 복사하여 생성

// 일반 배열에서 값을 복사하여 생성
const sourceArray = [1.1, 2.2, 3.3];
const myArray = new Float32Array(sourceArray);
console.log(myArray); // 출력: Float32Array(3) [1.1, 2.2, 3.3]

하나의 Float32Array의 내용을 다른 배열에 복사할 때, 루프를 사용하기보다는 set() 메서드를 사용하는 것이 훨씬 효율적이고 빠릅니다.

const source = new Float32Array([10, 20, 30]);
const destination = new Float32Array(3);

// 루프를 사용한 복사 (느림)
for (let i = 0; i < source.length; i++) {
    destination[i] = source[i];
}
console.log(destination);

const source = new Float32Array([10, 20, 30]);
const destination = new Float32Array(5); // 더 큰 배열에도 복사 가능

// set(sourceArray, offset)을 사용한 복사 (빠름)
destination.set(source, 1); // source 배열을 destination의 인덱스 1부터 채워 넣음
console.log(destination); // 출력: Float32Array(5) [0, 10, 20, 30, 0]

일반 배열에서 slice()를 사용하듯이, Float32Array의 일부를 새로운 Float32Array로 만들 때는 subarray()를 사용합니다.

const original = new Float32Array([1.1, 2.2, 3.3, 4.4, 5.5]);

// 인덱스 1부터 3 이전(2)까지의 요소를 포함하는 새로운 배열 생성
const sub = original.subarray(1, 3);
console.log(sub); // 출력: Float32Array(2) [2.2, 3.3]

// 참고: subarray는 내부적으로 동일한 ArrayBuffer를 공유할 수 있습니다.