lang/js

ECMA6 타입배열

C/H 2019. 6. 7. 08:30

Type Array

타입 배열은 트구한 목적을 가진 배열로, 숫자 타입(모든 타입이 아님)과 동작하도록 설계 되었다. 타입 배열은 WebGL로부터 시작되었으며, WebGL은 OpenGL ES 2.0을 포팅하여 웹 페이지에서 <canvas> 엘리멘트와 사용되록 설계된 버전을 의미한다. javascript에서 빠른 산술 비트 연산을 제고하기 위한 포팅 과정의 일부로 타입 배열이 만들어 졌다.
javascript 숫자를 이용한 산술 연산은 숫자를 64bit 부동소수점 형식으로 저장하고 필요에 따라 32bit 정수로 변환했기 때문에 WebGL을 위해서는 너무 느렸다. 타입 배열은 이러한 제약을 피하고 더 나은 성능의 산술 연산을 제공하기 위해 도입되었다. 이 개념은 어떤 단일 숫자든지 비트 배열처럼 처리될 수 있도록 하며, javascript 배열에서 이용할 수 있는 익숙한 메서드를 사용할 수 있다는 의미이다.
ECMAScript 6에서는 javascript 엔진을 통한 더 나은 호환성 그리고 배열과의 상호 운용성을 보장하기 위해 공식적인 언어의 일부로 타입 배열을 받아들였다. ECMAScript 6 버전의 타입 배열은 WebGL 버전과 완전히 같지는 않지만 ECMAScript 6 버전을 다른 접근법보다 WebGL의 진화한 버전이라 할 수 잇는 유사점이 충분히 존재한다. 모던 자바스크립트 니콜라스 자카스 지음 | 김두형·정재훈 옮김 ISBN 978-89-6626-211-3 226p

숫자 데이터 타입

javascript 숫자는 부동 소수점 숫자 표현을 저장할 때 64bit를 사용하는 IEEE 754 형식으로 저장된다.
타입 배열은 여덟 가지 다른 수자 타입의 저장 공간과 조작을 허용한다.

  • Signed 8-bit integer (int8)
  • Unsigned 8-bit integer (uint8)
  • Signed 16-bit integer (int16)
  • Unsigned 16-bit integer (uint16)
  • Signed 32-bit integer (int32)
  • Unsigned 32-bit integer (unit32)
  • 32-bit float (float32)
  • 64-bit float (float64)

배열 버퍼

모든 타입 배열은 배열 버퍼에 기초하며, 배열 버퍼는 지정된 수의 바이트를 포함하는 메모리 장소이다. 배열 버퍼를 만드는 것은 C언어에서 메모리를 할당하기 위해 메모리 블록이 포함하는 타입이 무엇인지 명시하지 않고 malloc()을 호출하는 것과 유사하다 모던 자바스크립트 니콜라스 자카스 지음 | 김두형·정재훈 옮김 ISBN 978-89-6626-211-3 227p 

let buffer = new ArrayBuffer(10); // 10바이트 할당
console.log(buffer.byteLength);   // 10

// buffer의 일부를 포함하는 새로운 buffer
buffer2 = buffer.slice(4, 6);
console.log(buffer2.byteLength);   // 2

뷰와 함게 배열 버퍼 조작

배열 버퍼는 메모리 장소를 나타내고, 뷰는 메모리를 조작하는 데 사용할 인터페이스다. 뷰는 배열 버퍼나 배열 버퍼 바이트의 부분집합에서 동작하고, 숫자 테이터 타입 중의 하나인 데이터를 읽고 쓴다. 배열 버퍼에서 DataView 타입은 여덟 가지 숫자 데이터 타입 연산을 가능하게 하는 일반적인 뷰다.
DataView를 사용하려면 먼저 ArrayBuffer의 인스턴스를 만들고, 이 인스턴스를 사용하여 새로운 DataView를 만든다. 모던 자바스크립트 니콜라스 자카스 지음 | 김두형·정재훈 옮김 ISBN 978-89-6626-211-3 228p

buffer
뷰와 연결된 배열 버퍼
byteOffset
제공된 경우, DataView 생성자의 두 번째 인자 (기본값 0)
byteLength
제공된 경우, DataView 새엉자의 ㅔ 번째 인자 (기본값은 버퍼의 byteLength)
let buffer = new Arrayvuffer(10),
    view1 = new DataView(buffer),          // 기본적인 오프섹에서 버퍼의 끝까지 포함한다.
    view2 = new DataView(buffer, 5, 2);   // 바이트 5, 6을 포함한다. view2는 인덱스 5, 6에서만 동작한다.

console.log(view1.buffer === buffer);     // true
console.log(view2.buffer === buffer);     // true
console.log(view1.byteOffset);            // 0
console.log(view2.byteOffset);            // 5
console.log(view1.byteLength);            // 10
console.log(view2.byteLength);            // 2

읽고 쓰기

getInt8(byteOffset, littleEndian)
byteOffset에서 시작하여 int8만큼 읽는다.
setInt8(byteOffset, value, littleEndian)
byteOffset에서 시작하여 int8만큼 쓴다.
getUint8(byteOffset, littleEndian)
byteOffset에서 시작하여 unit8만큼 읽는다.
setUnit8(byteOffset, value, littleEndian)
byteOffset에서 시작하여 unit8만큼 쓴다.
getFloat32(byteOffset, littleEndian)
byteOffset 시작, float32만큼 읽는다.
setFloat32(byteOffset, value, littleEndian)
byteOffset 시작, float32만큼 쓴다.
getFloat64(byteOffset, littleEndian)
byteOffset 시작, float64만큼 읽는다.
setFloat64(byteOffset, value, littleEndian)
byteOffset 시작, float64만큼 쓴다.
let buffer = new ArrayBuffer(2),
    view = new DataView(buffer);

view.setInt8(0, 5);
view.setInt8(1, -1);

console.log(view.getInt16(0));  // 1535
console.log(view.getInt8(0));   // 5
console.log(view.getInt8(1));   // -1

타입 배열과 뷰

생성자 요소 크기(bytes) 설명 통일한 C 언어 타입
Int8Array 1 8-bit 부호 있는 정수 signed char
Uint8Array 1 8-bit 부호 없는 정수 unsigned char
Uint8ClampedArray 1 8-bit 부호 없는 정수 (고정 변환) unsigned char
Int16Array 2 16-bit 부호 있는 정수 signed short
Uint16Array 2 16-bit 부호 없는 정수 unsigned short
Int32Array 4 32-bit 부호 있는 정수 int
Uint32Array 4 32-bit 부호 없는 정수 int
Float32Array 4 32-bit IEEE 부동소수점 표준 float
Float64Array 8 64-bit IEEE 부동소수점 표준f double

타입 명시 뷰 만들기

let ints = new Int16Array(2),
    floats = new Float32Array(5);

console.log(ints.byteLength);     // 4
console.log(ints.length);         // 2

console.log(floats.byteLength);   // 20
console.log(floats.length);       // 5

객체 인자로 타입 배열 생성

타입 배열
각 요소는 새로운 타입 배열에 새로운 요소로서 복사된다. Int16Array 생성자에 int8을 전달하면 int8값은 int16 배열에 복사된다. 새로운 타입 배열은 전달된 배열과 다른 배열 버퍼를 가진다.
이터러블
객체의 이터레이터는 타입 배열에 사입하기 위한 요소를 얻기 위해 호출된다. 생성자는 어떤 요소든지 뷰 타입이 유효하지 않으면 에러를 발생 시킨다.
배열
배열의 요소는 새로운 타입 배열로 복사된다. 생성자는 어떤 요소든지 타입이 유효하지 않으면 에러를 발생 시킨다.
유사 배열 객체
배열과 동일하게 동작한다.
let ints1 = new Int16Array([25, 50]),
    ins2 = new Int32Array(ints1);

console.log(ints1.buffer === ints2.buffer);     // false

console.log(ints1.byteLength);                  // 4
console.log(ints1.length);                      // 2
console.log(ints1[0]);                          // 25
console.log(ints1[1]);                          // 50

console.log(ints2.byteLength);                  // 8
console.log(ints2.length);                      // 2
console.log(ints2[0]);                          // 25
console.log(ints2[1]);                          // 50
반응형