JS 문법 - collection

Class: 제로베이스
Created: December 2, 2022 8:15 AM
Type: Javascript
강의 명: 이론부터 실전까지 모든 것을 담은 자료구조/알고리즘

collection

프로그래밍 언어에서 Collection 이란 단어는 '프로그래밍 언어가 제공하는 값을 담을 수 있는 컨테이너’다.

자바스크립트에서 제공하는 collection

Indexed Collection - Arrays, Typed Array

Keyed Collection - Objects, Map, Set, Weak Map, Weak Set

collection 객체가 가진 iterable 속성

반복 가능한 객체(iterable object)는 for...of 구문과 함께 ES2015에서 도입되었다. 반복 가능한 객체를 다른 객체와 구분짓는 특징은, 객체의 Symbol.iterator 속성에 특별한 형태의 함수가 들어있다는 것.
객체의 Symbol.iterator 속성에 특정 형태의 함수가 들어있다면, 이를 반복 가능한 객체(iterable object) 혹은 줄여서 iterable이라 부르고, 해당 객체는 iterable protocol을 만족한다고 말한다.

Iterable 의 사용

https://helloworldjavascript.net/pages/260-iteration.html

어떤 객체가 Iterable이라면, 그 객체에 대해서 아래의 기능들을 사용할 수 있다.

• for...of 루프
• spread 연산자 (...)
• 분해대입(destructuring assignment)
• 기타 iterable을 인수로 받는 함수

Map

• 다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장 가능할 수 있는 collection
• Map 은 Object 대비 비교하면 다양한 key의 사용을 허용하고, 값의 추가 삭제 시 메서드를 통해 수행이 필요하다.
• 대표 속성 및 메서드
  • 생성자: new Map( )
  • 개수 확인: Map. size
  • 요소 추가: Map. set(key,value)
  • 요소 접근: Map. get(key)
  • 요소 삭제: Map. delete(key)
  • 전체 삭제: Map. clear( )
  • 요소 존재 여부 확인: Map. has(key)
  • 그 밖의 베서드: Map. keys( ) , Map. values( ) , Map. entries( )

let map = new Map();

map.set("name", "john")
map.set(123,456)
map.set(true, 'bool_type')
console.log(map);
// Map(3) { 'name' => 'john', 123 => 456, true => 'bool_type' }

console.log(map.get(123)); // 456
console.log(map.get('name')); // john
console.log(map.size); // 3

map.delete(123);
console.log(map);
// Map(2) { 'name' => 'john', true => 'bool_type' }
map.clear();
console.log(map);
// Map(0) {}

map.set(123, 789).set(false, "bool_type").set('fruit', 'banana');
console.log(map);
// Map(3) { 123 => 789, false => 'bool_type', 'fruit' => 'banana' }

Map의 반복문 활용

collection 객체인 Map 이 가지고 있는 iterator 속성을 이용하여 for … of 구문을 통해 반복문 수행 가능하다.

let recipe_juice = new Map([
  ['strawberry', 50],
  ['banana', 100],
  ['ice', 150],
])

for (let item of recipe_juice.keys()) {
  console.log(item);
}  // strawberry banana ice

for (let amount of recipe_juice.values()) {
  console.log(amount);
} // 50 100 150

for (let entity of recipe_juice.entries()) {
  console.log(entity);
} // [ 'strawberry', 50 ] [ 'banana', 100 ] [ 'ice', 150 ]

map ←→ object 변환

object.entries(Object), Object. fromEntries(Map)를 통해 Map과 Object 간 변환 가능

let recipe_juice = new Map([
  ['strawberry', 50],
  ['banana', 100],
  ['ice', 150],
])

console.log(recipe_juice)
// Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

// 객체로 변환 
let recipe_juice_obj = Object.fromEntries(recipe_juice);
console.log(recipe_juice_obj);
// { strawberry: 50, banana: 100, ice: 150 } 

// key value형태로 변환 
let recipe_juice_kv = Object.entries(recipe_juice_obj);
console.log(recipe_juice_kv);
// [ [ 'strawberry', 50 ], [ 'banana', 100 ], [ 'ice', 150 ] ]

// 다시 Map으로 변환 
let recipe_juice_map  = new Map(recipe_juice_kv);
console.log(recipe_juice_map);
// Map(3) { 'strawberry' => 50, 'banana' => 100, 'ice' => 150 }

Set

• value 만을 저장하며 중복을 허용하지 않는 Collection
  • 중복된 데이터를 제거할 때 보통 많이 사용된다.
• 대표 속성(property) 및 메서드(Method)
  • 생성자 : new Set( )
  • 개수 확인 : Set. size
  • 요소 추가: Set. add(value)
  • 요소 삭제: Set. delete(value)
  • 전체 삭제: Set. clear( )
  • 요소 존재 여부 확인: Set. has(key)
  • 그 밖의 베서드: Set. keys( ), Set. values( ), Set. entries( )

요소 추가 및 삭제

• 다양한 자료형을 value로 사용 가능
• set. add 호출 시 set이 반환되므로 map.set과 마찬가지로 체이닝(chaining) 가능.

  let set = new Set();
  let num = new Set([1, 2, 3, 4, 5]);
  let str = new Set('hello!');
  
  console.log(set); // Set(0) {}
  console.log(num); // Set(5) { 1, 2, 3, 4, 5 }
  console.log(str); // Set(5) { 'h', 'e', 'l', 'o', '!' }
  
  set.add(1).add(1).add(10).add(20);
  console.log(set); // Set(3) { 1, 10, 20 }
  
  console.log(set.has(10)); // true
  console.log(set.has(2)); // false
  
  console.log(set.delete(1)) // true
  console.log(set.delete(-1)) // false
  console.log(set); // Set(2) { 10, 20 } -> 1만 삭제됨

set 반복문

• Collection 객체인 set 이 가지고 있는 iterator속성을 이용하여 for … of 구문을 통해 반복문 수행 가능

  let set = new Set();
  let num = new Set([1, 2, 3, 4, 5]);
  let str = new Set('hello!');
  
  console.log(str); // Set(5) { 'h', 'e', 'l', 'o', '!' }
  
  for (let item of str) {
    console.log(item); // h e l 0 ! 순으로 value 값이 리턴 된다.
  }
  
  for (let item of str.keys()) {
    console.log(item); // h e l 0 ! 
  }                    // -> set은 key가 없기 때문에 동일한 결과 반환
  
  for (let item of str.values()) {
    console.log(item); // h e l 0 ! 
  }                    // -> .values를 추가하지 않은것과 동일한 결과 반환
  
  for (let item of str.entries()) {
    console.log(item); 
    // [ 'h', 'h' ] [ 'e', 'e' ] [ 'l', 'l' ] [ 'o', 'o' ] [ '!', '!' ]
  } // key, value 형태로 포맷을 지켜서 반환. key와 value로 같은 요소를 호출

Set에서 구현되지 않은 것.

• Array.prototype에 구현된 map, filter, some, every등의 내장함수 미구현
• 많은 값들을 한번에 처리할 수 있는 메소드들이 누락 (Ex. set.addAll(iterable), set.removeAll(iterable) 등등
• Set에 Object 값이 들어오는 경우 레퍼런스(주소 값) 이 다르면 값이 같아도 다르게 처리.