[JavaScript 개념잡기] JavaScript Map(), Set(), Math()

8. Collection(1)

 

1) 자바스크립트가 제공하는 Collection

구조 혹은 비구조화 형태로 프로그래밍 언어가 제공하는 값을 담을 수 있는 공간

1. Indexed Collection: Array, Typed Array
2. Keyed Collection: Object, Map, Weak Map, Set, Weak Set

 

 

 

2) Map

다양한 자료형의 key를 허용하고 key-value 형태의 자료형을 저장 할 수 있는 Collection

• Map은 Object 대비 다양한 key의 사용을 허용
• 값의 추가, 삭제 시 메서드를 통해 수행이 필요
• property & method
  • 생성자: new Map()
  • 개수 확인: Map.size
  • 요소 추가: Map.set()
  • 요소 접근: Map.get()
  • 요소 삭제: Map.delete()
  • 전체 삭제: Map.clear()
  • 요소 존재 여부 확인: Map.has()
  • 그 외 메서드: Map.keys(), Map.values(), Map.entires()

✔ 요소 추가 및 삭제

다양한 자료형을 key로 사용 가능하며 map.set 호출 시 map이 반환되므로 체이닝(chaining) 가능

let map = new Map();

map.set("name", "park"); // string key
map.set(123, 456); // number key
map.set(true, "bool_type"); // boolean key

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

// chaining
map.clear();
console.log(map); // Map(0) {}
map.set("name", "alice").set(123, 456).set(true, "bool_type");
console.log(map); // Map(3) { 'name' => 'park', 123 => 456, true => 'bool_type' }

✔ 반복문

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

let recipe_juice = new Map([
  ["grape", 50],
  ["banana", 150],
  ["mango", 100],
]);

for (let item of recipe_juice.keys()) console.log(item); // grape banana mango
for (let amount of recipe_juice.values()) console.log(amount); // 50, 150, 100
for (let entity of recipe_juice) console.log(entity); // Map의 객체 그대로 호출

✔ Map <> Object 변환

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

let recipe_juice = new Map([
  ["grape", 50],
  ["banana", 150],
  ["mango", 100],
]);

let recipe_juice_obj = Object.fromEntries(recipe_juice); 
let recipe_juice_kv = Object.entries(recipe_juice_obj_); // [key, value]
let recipe_juice_map = new Map(recipe_juice_kv);

console.log(recipe_juice); // Map(3) { 'grape' => 50, 'banana' => 150, 'mango' => 100 }
console.log(recipe_juice_obj); // { grape: 50, banana: 150, mango: 100 }
console.log(recipe_juice_kv); // [ [ 'grape', 50 ], [ 'banana', 150 ], [ 'mango', 100 ] ]
console.log(recipe_juice_map); // Map(3) { 'grape' => 50, 'banana' => 150, 'mango' => 100 }

3) Set

Value만을 저장하며 중복을 허용하지 않는 Collection

• property & method
  • 생성자: new Set()
  • 개수 확인: Set.size
  • 요소 추가:`Set.add()
  • 요소 삭제:`Set.delete()
  • 전체 삭제:`Set.clear()
  • 요소 존재 여부 확인:`Set.has()
  • 그 외 메서드: Set.keys(), Set.values(), Set.entires()

✔ 요소 추가 및 삭제

다양한 자료형을 value로 사용 가능하며 set.add 호출 시 set이 반환 되므로 체이닝 가능

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', '!' }, 중복된 값(l) 제외

set.add(1).add(10).add(20);
console.log(set); // Set(3) {1, 10, 20}
console.log(set.has(10)); // true

set.delete(1);
set.delete(30);
console.log(set); // {10, 20}, 30은 아무런 영향x

✔ Set 반복문

map과 마찬가지로 for...of 구문을 통해 반복문 수행 가능

let str = new Set("Hello!");

for (let item of str) console.log(item); // 보통 따로 key, value 호출 안함
for (let item of str.keys()) console.log(item); // H e l o !
for (let item of str.values()) console.log(item); // key랑 같음
for (let item of str.entries()) console.log(item); // key, value 형태로 포맷시켜 반환

4) Math

표준 Built-in 객체로써 수학적인 연산을 위한 속성값과 메서드를 제공하는 객체

• 생성자 함수가 아니며 모든 속성과 메서드는 정적이기에 Math.function()으로 언제든 호출 가능
• property & method
  • 오일러 상수: Math.E
  • PI(π): Math.PI
  • 절대값: Math.abs()
  • 최대값: Math.max()
  • 최소값: Math.min()
  • 랜덤 난수 값: Math.random()
  • 제곱과 제곱근: Math.pow(x, y), Math.sqrt()
  • 소수점 처리: Math.round(), Math.ceil(), Math.floor()

✔ 최대, 최소, 절대값

배열을 인수로 받아 최대, 최소를 산출하려면 apply함수 혹은 스프레드 문법 사용 필요

/* MAX, MIN 
  많은 매개변수 받을 수 있음 */
console.log(Math.max(1, -1)); // 1
console.log(Math.min(1, -1)); // -1

let nums = [1, 5, 6, -19, 49];

// max(): value만 받아 NaN으로 나오기 때문에 apply 사용
console.log(`Max: ${Math.max.apply(null, nums)}`); // 49
console.log(`Max: ${Math.min.apply(null, nums)}`); // -19

// use spread 
console.log(`Max: ${Math.max(...nums)}`);
console.log(`Max: ${Math.min(...nums)}`);

/* ABS */
console.log(Math.abs(-4)); // 4
console.log(Math.abs(-Infinity)); // Infinity 

✔ 속성 및 랜덤

1. __0과 1사이의 난수 랜덤 값: Math.random()

/* Math property */
console.log(Math.E);
console.log(Math.PI);

/* random */
for (let i = 0; i < 3; i++) {
  console.log(Math.random());
}
/* 진짜 아무 숫자 나옴
0.895675511737891
0.16512257249134255
0.3686644516113249
 */

for (let i = 0; i < 3; i++) {
  console.log(Number.parseInt(Math.random() * 10)) // * n = 0 ~ n사이 숫자 호출
}

✔ 제곱, 제곱근, 소수점 처리

• 제곱: Math.pow(x, y)
• 제곱근: Math.sqrt(x)
• 소수점 이하 반올림 정수: Math.round(x)
• 소수점 이하 올림: Math.ceil(x)
• 소수점 이하 내림: Math.floor(x)

/* pow */
console.log(Math.pow(2, 3)); // 8
console.log(2 ** 3); // 8

/* sqrt */
console.log(Math.sqrt(4)); // 2
console.log(Math.sqrt(2)); // 1.4142135623730951

/* round, ceil, floor */
console.log(Math.round(3.5)); // 4
console.log(Math.round(-2.8)); //-3

console.log(Math.ceil(4.1)); // 5
console.log(Math.ceil(-2.3)); // -2

console.log(Math.floor(5.2)) // 5
console.log(Math.floor(-7.3)) // -8