표준 객체 - 콜렉션과 추상화 객체

인덱스 콜렉션

Array

인스턴스 프로퍼티

• length : 배열의 길이를 반환함

스태틱 메서드

• Array.from(arrayLike[, mapFn[, thisArg]]) : 순회 가능한 객체(String, MAp, Set)를 인자로 받아 배열로 만듭니다.
• Array.isArray(value) : 배열인지 판별한다.
• Array.of(value) : value를 배열로 만듭니다. Array(7)은 길이가 7인 빈 배열을 만들지만, Array.of(7)은 길이가 1인 [ 7 ]을 만든다는 점에서 차이가 있다.

인스턴스 메서드

• at() : 상대 위치를 반환함. arr[arr.length -1]을 arr.at(-1)로 단순화 할 수 있음.
• concat(다른배열): 배열과 다른 배열을 합쳐 새로운 배열을 반환함. arr.concat(['바나나', '토마토'])
• copyWithin(바꿀시작점, 슬라이싱시작점, 슬라이싱끝점) : 기본 배열을 바꿉니다. 배열의 크기는 바꾸지 않습니다. [0, 1, 2, 3].copyWithin(2, 1) //[0, 1, 1, 2, 3]
• fill(값, 바꿀 시작점, 슬라이싱끝점) : 기존 배열을 바꿉니다. 배열의 크기는 바꾸지 않습니다. [0, 1, 2, 3, 4, 5].fill(0, 1, 3) // [0, 0, 0, 3, 4, 5]
• entries() : [인덱스, 값]으로 만들어진 Array Iterator객체를 반환한다. (Iterator는 iter.next().value혹은 for ... of로 순회할 수 있다.)
• keys() : 인덱스로 이루어진 Array Iterator객체를 반환한다.
• values() : 값으로 이루어진 Array Iterator객체를 반환한다.
• every((element, index, array) => { ... }) : 배열의 모든 요소를 순회하며 콜백함수가 true이면 true.
• some((element, index, array) => { /* … */ }) : 배열의 요소를 순회하여 콜백함수가 하나라도 true이면 true를 반환한다.
• filter(callback(element[, index[, array]])[, thisArg]) : 배열의 모든 요소를 순회하여 true면 요소를 반환하여 새로운 배열을 만듭니다.
• find(callback(element[, index[, array]])[, thisArg]) : 콜백이 true인 첫번째 요소를 반환한다.
• findIndex(callback(element[, index[, array]])[, thisArg]) : 콜백이 true인 첫번째 요소의 인덱스를 반환한다.
• findLast(), findLastIndex() : 콜백이 true인 마지막 요소
• flat(depth) : depth가 싶은 경우 depth를 낮추어 새로운 배열을 반환한다. 기본값은 1. [0, 1, 2, [3, 4]].flat() // [0, 1, 2, 3, 4]
• flatMap(callback(currentValue[, index[, array]])[, thisArg]) : 맵을 실행한 후, 결과를 새로운 배열로 평탄화 한다.
• forEach(callback(currentvalue[, index[, array]])[, thisArg]) : 배열을 순회하며 콜백함수를 실행한다.
• includes(value): 배열에 해당 값이 있는지 확인하여 true를 반환한다.
• indexOf(searchElement, fromIndex), lastIndexOf() : 특정 값이 있으면 인덱스를 반환한다. 없으면 -1을 반환한다. findIndex는 인수로 콜백을 받지만 indexOf는 요소를 받는다.
• join(구분자) : 배열을 합쳐서 문자열로 반환한다.
• map(function (element, index, array) { /* … */ }, thisArg) : 배열의 요소를 순환하며 콜백 함수를 실행하고 그 결과값을 새로운 배열로 반환한다.
• pop() : 마지막 요소를 제거하고 그 값을 반환한다. (기존 배열을 바꿉니다.)
• push(요소1, 요소2? .... ) : 요소들을 배열의 마지막에 추가한다. 새로운 length를 반환한다.
• shift() : 배열의 첫번째 요소를 제거하고 그 값을 반환한다. 빈 배열의 경우 undefined를 반환한다.
• unshift(요소1, 요소2? .... ): 요소들을 배열의 앞에 추가한다. 새로운 length를 반환한다.
• reduce((accumulator, currentValue, currentIndex?, array?) => {...}, 최초accumulator값) : [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) { return accumulator + currentValue; }, 10); accumulator는 10, 11, 13, 16, 20이 되며 20을 최종적으로 반환한다.
• reduceRight() : reduce와는 달리 배열의 오른쪽에서 왼쪽으로 순회한다.
• reverse() : 원본 배열의 순서를 반전하며, 그 참조를 반환한다.
• sort(compareFunction(a, b)) : 배열을 낮은 순에서 높은 순으로 정렬한다. 만일 conpareFunction이 주어진다면 1) 반환값 < 0 : a가 앞에 온다. 2) 반환값 === 0 : 둘의 위치를 바꾸지 않으며, ECMA표준은 아니나 일반적으로는 둘을 같은 우선순위로 취급하게 된다. 3) 반환값 > 0 : b가 앞에 온다. 종합하면 arr.sort((a, b) => a - b)는 기본값과 같은 결과를 반환하게 된다.
• slice(시작점, 끝점?): 시작 인덱스부터 끝 인덱스 직전까지를 얕은 복사하여 새로운 객체를 반환한다.
• splice(start[, deleteCount[, item1[, item2[, ...]]]]) : 기존 배열을 변경한다. 변경을 시작할 인덱스에서부터 삭제할 갯수만큼 삭제 후 추가할 요소들을 삽입한다.
• toLocaleString() : 배열에 객체들에 toLocaleString()을 적용해서 ,로 join()된 문자열을 반환한다. [1337, new Date(), 'foo'].toLocaleString() // '1,337,2023. 1. 5. 오후 8:59:27,foo'
• toString(): 배열의 요소들에 toString()을 적용해서 ','로 join()된 문자열을 반환한다. 결합자를 따로 지정할 수 없다는 점이 join()과 다르다.

키 콜렉션

키 기반의 컬렉션-mozilla을 참조하자. ECMAScript 6(2015)부터 도입되었으며, 타 언어(파이썬 등)의 맵 객체, 집합 객체와 동일하게 작동한다.

Map

const sayings = new Map();
sayings.set("개", "멍멍");
sayings.set("고양이", "삐약삐약");
sayings.size; // 2

for (const element of sayings) {
  console.log(element);
  	// [ '개', '멍멍' ]
	// [ '고양이', '삐약삐약' ]
}

인스턴스 프로퍼티

• size : 맵 객체 내의 쌍 갯수.

인스턴스 메서트

• clear() : 맵 객체를 비운다.
• delete(key) : 맵 객체의 특정 값을 삭제한다.
• entries() : [key, value]로 이루어진 iterator를 반환한다
• keys(), values()
• forEach((value, key, map) => { /* … */ } )
• get(key)
• set(key, value) : 키와 밸류 쌍을 map객체에 추가한다.
• has(key) : 해당 키를 가진 값이 있으면 true.

Set

인스턴스 속성

• size : 집합에 들어있는 요소의 갯수

인스턴스 메서드

• add(값) : 집합에 요소를 추가
• clear() : 집합에 있는 모든 요소를 제거
• delete(value): 집합에 있는 특정 요소를 제거
• has(value) : 집합이 특정 값을 가지고 있으면 true

weakMap, weakSet

Map과 Set는 key값으로 Object를 사용할 수 있다. 이 경우 해당 인스턴스에 대한 참조가 key가 되는 것이다.
weakMap과 weakSet는 key값으로 Object만을 사용해야 하며, 참조가 끝나면 해당 Object를 가비지 컬렉션할 수 있도록 지원한다. key값으로 사용되는 객체를 null 혹은 undefined로 초기화하면, 참조가 끝난 후 가비지 컬렉팅 된다.

weakMap, weakSet의 메서드

weakMap과 weakSet은 Map, Set에 비해 적은 인스턴스 메서드만 제공한다. 이는 외부에 의한 참조를 최소화하여 가비지 컬렉팅 되도록 하기 위함이다.

• weakMap.prototype.get(key)

• weakMap.prototype.set(key, value)

• weakMap.prototype.delete(key)

• weakMap.prototype.has(key)

• weakSet.prototype.add(value)

• weakSet.prototype.delete(value)

• weakSet.prototype.has(value)

weakMap, weakSet의 용도

모던 자바스크립트 튜토리얼을 참조하자.
가비지 컬렉션이 보장되지 않는 Map, Set과 다르게, weakMap, weakSet은 가비지 컬렉션이 보장된다. 하지만 가비지 컬렉션이 언제 일어날지는 알 수 없다.

weakMap은 특정 객체에 다른 객체가 의존적일 때에 사용하면 유용하다. 유저가 사라지면 유저 데이터도 자동으로 가비지 컬렉팅 되는 것이 성능 유지에 적절할 것이다.

weakMap.set(john, "비밀문서");
// john이 사망하면, 비밀문서는 자동으로 파기됩니다.

weakSet은 Set이 다른 객체를 참조할 때에 유용하다. 다른 객체가 사라지면 Set에서도 사라짐이 적절하다. 회원이 탈퇴하면 회원의 방문 기록을 관리하던 weakSet에서도 회원의 데이터가 사라진다.

오류 객체

Error

• Error은 런타임 오류가 발생했을 때에 던져진다.
• new Error(message, fileName, lineNumber), new ReferenceError() 등의 생성자로 새로운 에러를 만들 수 있다.
• message, name, fileName, lineNumber, columnNumber 등의 인스턴스 속성이 있다.

오류 유형

RangeError : 숫자 변수나 매개변수가 유효한 범위를 벗어났음
ReferenceError : 잘못된 참조
SyntaxError : 문법적으로 유효하지 않은 코드에 대해 eval()이 던지는 코드
TypeError : 변수나 매개변수가 유효한 자료형이 아님
URIError : encodeURI()나 decodeURl()의 매개변수가 부적절 할 때에
AggregateError : 한 동작에 여러개의 에러가 발생하는 경우
InternalError : 일부 자바스크립트 엔진은 자바스크립트 엔진 내부에서 에러가 발생할 때에 InternalError를 던진다.

제어 추상화 객체

GeneratorFunction

function*와 같이 함수 끝에 *이 붙는다.

yeild 키워드

GeneratorFunction 함수 내부에서 사용할 수 있는 키워드.
제너레이터 함수의 작동을 멈추고 값을 반환한다.

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

Generator 객체

GeneratorFunction는 Generator 객체를 반환한다.

let generator = generateSequence();

인스턴스 메서드

• next() : yield된 값을 반환합니다.
• return(value) : value를 반환하고 Generator를 종료합니다.
• throw(exception) : 예외를 발생시킵니다. throw(new Error('Something went wrong'));

사용법

자바스크립트 튜토리얼을 참조하자.

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const g = gen();

g.next();        // { value: 1, done: false }
g.return('foo'); // { value: "foo", done: true }
g.next();        // { value: undefined, done: true }

return() 메서드를 사용하면 done이 true로 변경된다.

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

for(let value of generator) {
  alert(value); // 1, 2가 출력됨
}

제너레이터는 이터러블 한다. 이때 done: true이면 value가 무시되고 순회가 중단된다. 따라서 이터러블한 용도로 사용하는 경우 return없이 yield만을 사용하는 것이 좋다.

Promise, AsyncFunction

Promise는 Promise()를 통해 생성할 수 있으며, axios 등 비동기 처리에서 반환되기도 한다.
Promise.all(), Promise.any(), Promise.race() 등을 통해 비동기 처리를 대기하는 방식을 정할 수 있으며,
Promise.prototype.catch(), Promise.prototype.then(), Promise.prototype.finally() 를 통해 프로미스의 이행과 거부를 처리하게 된다.

AsyncFunction은 async function()과 같이 함수 앞에 async를 붙인 async function 표현식과 async function 선언문을 사용하여 생성할 수 있다. async function 내부에서는 await 키워드를 사용할 수 있으며, Promise를 기다리는 역할을 한다. async - await 키워드를 통해 기존 Promise - then을 대체할 수 있다.

본 시리즈 내의 비동기 처리에서 자세히 다룬다.