JavaScript ArrayBuffer 객체란?
JavaScript의 ArrayBuffer 객체는 범용적이면서 고정된 길이를 가지는 원시(raw) 이진 데이터 버퍼를 표현하는 데 사용됩니다. 이름에서 알 수 있듯이 '배열(array)'처럼 데이터를 담을 수 있는 공간이지만, 일반 배열과 달리 오직 바이트 단위의 순수한 이진 데이터만 저장합니다.
중요한 점은 ArrayBuffer의 내용에 직접 접근하거나 조작할 수 없다는 것입니다. 따라서 버퍼의 데이터를 읽거나 쓰려면 반드시 DataView 객체를 생성해야 하며, 이 DataView 객체를 통해 데이터를 읽고 쓸 수 있습니다.
문법(Syntax)
new ArrayBuffer(byteSize)
byteSize 매개변수는 생성할 배열 버퍼의 크기를 바이트 단위로 지정합니다. 예를 들어 new ArrayBuffer(8)은 8바이트 크기의 버퍼를 만듭니다.
ArrayBuffer 사용 예제
다음은 ArrayBuffer() 객체를 활용한 전체 코드입니다. 버튼을 클릭하면 버퍼에 저장된 값을 16진수와 2진수로 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript ArrayBuffer object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see the array buffer object contents in binary</h3>
<script>
let fillEle = document.querySelector(".sample");
var buffer = new ArrayBuffer(8);
var view1 = new DataView(buffer);
view1.setInt16(0, 0x2721);
fillEle.innerHTML = view1.getInt16(0).toString(16);
document.querySelector('.Btn').addEventListener('click',()=>{
fillEle.innerHTML = view1.getInt16(0).toString(2);
})
</script>
</body>
</html>코드 설명
new ArrayBuffer(8): 8바이트 크기의 새로운 버퍼를 생성합니다.new DataView(buffer): 생성된 버퍼를 조작하기 위한 DataView 뷰를 만듭니다.view1.setInt16(0, 0x2721): 오프셋 0 위치에 16비트 정수 값0x2721을 저장합니다.view1.getInt16(0).toString(16): 저장된 값을 16진수 문자열로 변환하여 화면에 출력합니다.- 버튼 클릭 시에는 같은 값을
toString(2)로 2진수 형태로 보여줍니다.
실행 결과(Output)
페이지가 로드되면 저장된 값이 16진수로 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 −
버튼을 클릭하면 동일한 값이 2진수 형태로 화면에 출력되는 것을 확인할 수 있습니다. 이처럼 ArrayBuffer와 DataView를 함께 사용하면 파일 처리, 네트워크 통신, WebGL 등에서 필요한 저수준 이진 데이터를 효율적으로 다룰 수 있습니다.