ArrayBuffer.byteLength 속성은 ArrayBuffer 객체의 크기를 바이트(byte) 단위로 반환합니다. 이 속성은 읽기 전용이며, 버퍼가 생성될 때 지정된 고정된 길이를 나타냅니다.
주요 특징
- ArrayBuffer의 전체 바이트 크기를 숫자로 반환합니다.
- 읽기 전용 속성이므로 값을 직접 변경할 수 없습니다.
- DataView나 TypedArray를 통해 버퍼에 접근할 때 유용하게 활용됩니다.
예제 코드
다음은 ArrayBuffer.byteLength 속성의 사용법을 보여주는 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<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.byteLength 속성</h1>
<div class="sample"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 배열 버퍼의 크기를 확인할 수 있습니다</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.byteLength + '바이트입니다';
})
</script>
</body>
</html>
코드 설명
위 예제에서는 new ArrayBuffer(8)을 통해 8바이트 크기의 버퍼를 생성합니다. 그런 다음 DataView 객체를 사용하여 해당 버퍼에 16비트 정수 값(0x2721)을 저장하고 다시 읽어와 화면에 표시합니다.
버튼을 클릭하면 byteLength 속성을 통해 배열 버퍼의 크기인 8바이트가 화면에 출력됩니다.
실행 결과
페이지를 처음 열면 버퍼에 저장된 16진수 값이 표시됩니다.
"클릭하세요" 버튼을 누르면 다음과 같이 배열 버퍼의 크기가 표시됩니다.
정리
ArrayBuffer.byteLength 속성은 이진 데이터를 다룰 때 버퍼의 크기를 확인하는 필수적인 도구입니다. 파일 처리, 네트워크 통신, WebGL 등 바이너리 데이터를 다루는 다양한 상황에서 활용할 수 있습니다.