[자바스크립트 완벽가이드] - 자바스크립트 표준 라이브러리

Lee Jeong Min·2022년 6월 7일

JavaScript

자바스크립트

목록 보기

12/17

자바스크립트 완벽가이드 11장에 해당하는 부분이고, 읽으면서 자바스크립트에 대해 새롭게 알게된 부분만 정리한 내용입니다.

세트와 맵

WeakMap과 WeakSet

WeakMap은 Map 클래스의 변형이고, 이 클래스는 키 값이 가비지 컬렉션에 포함되지 않게 막아주지 않는다.
→ 키 값이 WeakMap에 존재하더라도 메모리를 회수할 수 있다.

일반적인 Map은 키 값을 '강하게' 참조하며 키 값에 대한 다른 참조가 더 이상 남아 있지 않더라도 참조 관계를 유지한다.

WeakMap의 특징

키는 반드시 객체 또는 배열이어야 한다. 기본 값은 가비지 컬렉션 대상이 되지 않으며 키로 사용할 수 없다.
WeakMap에는 get(), set(), has(), delete() 메서드만 있다. 또한 WeakMap은 이터러블이 아니며 keys(), values(), forEach() 메서드가 없다.
WeakMap에는 size 프로퍼티가 없다. WeakMap의 크기는 가비지 컬렉션이 일어날 때마다 언제든 바뀔 수 있기 때문이다.

이 WeakMap의 설계의도는 메무리 누수를 방지하면서 객체와 값을 연결할 수 있게 하는것!

WeakSet의 특징

WeakSet은 객체가 가비지 컬렉션에 포함되도록 허용하는 객체 세트이며 Set() 생성자와 비슷하게 동작하지만 다른 부분이 있다.

WeakSet는 기본 값을 요소로 허용하지 않는다.
오직 add(), has(), delete() 메서드만 가지며 이터러블이 아니다.
size 프로퍼티가 없다.

형식화 배열과 이진 데이터

ES6에 도입한 형식화 배열(typed array)은 C나 자바의 저수준 배열과 꽤 비슷하다.

이 배열은 웹 브라우저가 WebGL 그래픽을 지원하기 시작하면서 클라이언트 사이드 자바스크립트에 처음 도입되었다.

형식화 배열의 특징

형식화 배열의 요소는 모두 숫자이다.
형식화 배열을 생성할 때 반드시 길이를 지정해야 하며 이 길이는 절대 바꿀 수 없다.
형식화 배열의 요소는 항상 0으로 초기화된다.

형식화 배열 타입

생성자	숫자 타입
Int8Array()	부호 붙은 바이트
Uint8Array()	부호 없는 바이트
Uint8ClampedArray()	롤오버 없는 부호 없는 바이트
Int16Array()	부호 붙은 16비트 정수
Uint16Array()	부호 없는 16비트 정수
Int32Array()	부호 붙은 32비트 정수
Uint32Array()	부호 붙은 32비트 정수
BigInt64Array()	부호 붙은 64비트 BigInt 값 (ES2020)
BigUint64Array()	부호 없는 64비트 BigInt 값 (ES2020)
Float32Array()	32비트 부동 소수점 값
Float64Array()	64비트 부동 소수점 값 (일반적인 자바스크립트 숫자)

여기서 Uint8ClampedArray는 타입 체크를 따로 수행하여 255보다 크거나 0보다 작은 값을 넘치지 않도록 해당 범위로 잘라낸다(clamp). 이렇게 잘라내는 동작은 HTML <canvas> 요소가 픽셀 색깔을 조작하는 저수준 API에 꼭 필요하다.
또한 형식화 배열 생성자에는 모두 BYTES_PER_ELEMENT 프로퍼티가 있다.(타입에 따라 1, 2, 4, 8중 하나)

형식화 배열의 메서드와 프로퍼티

set()
일반적인 배열이나 형식화 배열의 요소를 복사해 형식화 배열의 요소 여러개를 한번에 바꾼다.

const bytes = new Uint8Array(1024);
const pattern = new Uint8Array([0, 1, 2, 3]);
bytes.set(pattern);
bytes.set(pattern, 4);
bytes.set([0, 1, 2, 3], 8);
console.log(bytes.slice(0, 12)); // Uint8Array(12) [0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3]

subArray()
slice() 메서드와 같은 방법으로 동작하지만 메모리를 전혀 복사하지 않고 기존의 값을 참조하는 새 뷰를 반환한다.

const ints = new Int16Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
const last3 = ints.subarray(ints.length - 3, ints.length);
console.log(last3[0]); // 7

DataView와 엔디안

형식화 배열을 사용하면 동일한 바이트 시퀀스를 8, 16, 32, 64비트 덩어리로 볼 수 있다. 이런 경우 바이트 순서인 엔디안이 드러나는데 최근 CPU 아키텍처는 리틀 엔디안을 사용하지만 외부 데이터를 사용할 때 일부는 빅 엔디안을 사용하기도 한다.

따라서 이러한 경우 바이트 순서를 명시적으로 지정하는 DataView 클래스를 사용하자.

const bytes = new Uint8Array(1024);
const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);

let int = view.getInt32(0); // 바이트 0에서 빅 엔디안 부호 붙은 정수를 읽는다.
int = view.getInt32(4, false); // 다음 정수 역시 빅 엔디안
int = view.getUint32(8, true); // 다음 정수는 리틀 엔디안이고 부호는 없다.
view.setUint32(8, int, false); // 빅 엔디안 형식으로 바꾼다.

JSON 직렬화와 분석

JSON.stringify()와 JSON.parse()의 목적은 데이터를 보낼때 반드시 문자열로 변환(직렬화)하고 역직렬화를 하기 위함인데, 비효율적이지만 두 함수를 사용해 다음과 같이 객체를 깊게 복사할 수 있다.

function deepCopy(o) {
  return JSON.parse(JSON.stringify(o));
}

국제화 API

자바스크립트 국제화 API는 Intl.NumberFormat, Intl.DateTimeFormat, Intl.Collator 세가지 클래스로 구성된다.

숫자 형식

Intl.NumberFormat은 숫자 형식을 적용할 지역의 인자와 숫자 형식을 더 자세히 지정하는 객체 이 2가지 인수를 받아 사용한다.

지역마다 다른 숫자 표기법을 위한 API이다.

const euros = Intl.NumberFormat('es', { style: 'currency', currency: 'EUR' });
console.log(euros.format(10)); // 10,00 €

const data = [0.05, 0.75, 1];
const formatData = Intl.NumberFormat(undefined, {
  style: 'percent',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1
}).format;

console.log(data.map(formatData)); // [ '5.0%', '75.0%', '100.0%' ]