갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • 호이스팅
  • 싱글스레드
  • this
  • 이터러블
  • 자바스크립트엔진
  • class
  • prototype
  • 네이밍
  • ECMAScript
  • Arrow
  • 컴파일러
  • 심볼
  • SPREAD
  • 원시타입
  • 스코프 체인
  • Babel
  • 오버라이딩
  • 프로토타입
  • 객체타입
  • 렉시컬 환경
  • 인터프리터
  • 정적 레벨
  • nodemon
  • PM2
  • 상속
  • function
  • symbol
  • 실행 컨텍스트
  • structure
  • 함수

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

Study/JavaScript

[JavaScript_study] Map과 Set

2022. 4. 12. 12:20

* 맵 (Map)

  • [키, 값] 으로 이루어진 자료구조
  • 순서가 없다.
  • key는 유일한 키를 가지고 있어야 한다.
  • key값만 다르다면 values는 중복가능

* 맵(Map)과 오브젝트(Object)와의 큰 차이점은??

  • map에서는 다양한 함수를 사용 가능하다.
  • object에서는 사용할 수 있는 함수가 적다.
  • map은 key[value] 동적으로 접근이 불가능하며 map.get(key)이라는 함수를 사용해야 한다.
  • object는 key[value] 동적으로 접근이 가능하다.
  • 결론 : 사용할 수 있는 인터페이스가 살짝 다르다.

* 맵 (Map)예시코드

const map = new Map([
  ['key1', '사과'],
  ['key2', '바나나'],
]);
console.log(map);

// 사이즈 확인
console.log(map.size);

// 존재하는지 확인
console.log(map.has('key1'));
console.log(map.has('key6'));

// 순회
// value뿐만 아니라 key도 받아올 수 있다.
map.forEach((value, key) => console.log(key, value));
console.log(map.keys());
console.log(map.values());
console.log(map.entries());

// 찾기
// 존재하지않는 값은 undefined
console.log(map.get('key1'));
console.log(map.get('key2'));
console.log(map.get('key4'));

// 추가
map.set('key3', '키위');
console.log(map);

// 삭제
map.delete('key3');
console.log(map);

// 전부삭제
map.clear();
console.log(map);

// 오브젝트와의 큰 차이점??
// map에서는 다양한 함수를 사용 가능하다.
// object에서는 사용할 수 있는 함수가 적다.

// map은 key[value] 동적으로 접근이 불가능한다. // get이라는 함수를 사용해야한다. get(key)
// object는 key[value] 동적으로 접근이 가능하다.

// 사용할 수 있는 인터페이스가 살짝 다르다.
const key = { name: 'milk', price: 10 };
const milk = { name: 'milk', price: 10, description: '맛있는우유' };
const obj = {
  [key]: milk,
};
console.log(obj);
const map2 = new Map([[key, milk]]);
console.log(map2);
console.log(obj[key]);
console.log(map2[key]);
console.log(map2.get(key));

* Set

  • 데이터의 집합체
  • 인덱스 없음, 순서 없음, 중복불가
  • 이미 있는 요소를 추가하면 해당 추가가 무시가 된다.
// Set
const set = new Set([1, 2, 3]);
console.log(set);

// 사이즈 확인
console.log(set.size);

// 존재하는지 확인
// true or false값을 return한다.
console.log(set.has(2));
console.log(set.has(6));

// 순회 (forEach)
set.forEach((item) => console.log(item));

// 순회 (for of)
for (const value of set.values()) {
  console.log(value);
}

// 추가
set.add(6);
console.log(set);
// set은 중복이 안되는 성질을 가지고 있다.
// 이미 있는 요소를 추가하면 해당 추가가 무시가 된다.
set.add(6);
console.log(set);

// 삭제
set.delete(6);
console.log(set);

// 전부 삭제
set.clear();
console.log(set);

// 오브젝트 세트
const obj1 = { name: '사과', price: 8 };
const obj2 = { name: '바나나', price: 5 };
const objs = new Set([obj1, obj2]);
console.log(objs);

// 퀴즈
// price를 10으로 변경한뒤에 add를 하면 price는 10이라는 값으로 지정되어 있으므로
// add를 하면 add를 하는 price의 값이 무시가 된다. 따라서 price : 10으로 출력이 된다.
// 또한 shallow copy가 이루어져 있어서 objs안의 요소들도 값의 변경에 영향을 받는다.
obj1.price = 10;
objs.add(obj1);
console.log(obj1);
console.log(objs);

// 퀴즈
// obj2와 동일한 내용이여도 객체는 메모리주소를 참조 및 가르키고 있으므로
// 같은 요소의 값을 가지고 있어도 다른 주소를 가르키고 있어서 서로 다른값으로 인식된다.
// 따라서 obj3객체가 추가된다. obj2와 obj3는 객체의 요소는 동일하나 서로 다른 메모리 주소를 참조하고 있으므로
// 서로 다른 객체이다.
const obj3 = { name: '바나나', price: 5 };
objs.add(obj3);
console.log(objs);
obj3.price = 8;
console.log(objs);

* Set 활용 예시

// 주어진 배열에서 중복을 제거 하라
const fruits = ['바나나', '사과', '포도', '바나나', '사과', '복숭아'];
// output : ['바나나', '사과', '포도', '복숭아']
function removeDuplication(array) {
  return [...new Set(array)];
}
console.log(removeDuplication(fruits));

// 주어진 두 세트의 공통된 아이템만 담고 있는 세트 만들어라
const set1 = new Set([1, 2, 3, 4, 5]);
const set2 = new Set([1, 2, 3]);

function findIntersection(set1, set2) {
  return new Set([...set1].filter((item) => set2.has(item)));
}
console.log(findIntersection(set1, set2));

 

'Study > JavaScript' 카테고리의 다른 글

[JavaScript_study] 논리연산자, 단축평가(short-circuit evaluation)  (0) 2022.04.12
[JavaScript_study] 심볼(Symbol)  (0) 2022.04.12
[JavaScript_study] 구조 분해 할당(Destructuring assignment)  (0) 2022.04.12
[JavaScript_study] Spread operator  (0) 2022.04.12
[JavaScript_study] 제너레이터(generator)  (0) 2022.04.12
    'Study/JavaScript' 카테고리의 다른 글
    • [JavaScript_study] 논리연산자, 단축평가(short-circuit evaluation)
    • [JavaScript_study] 심볼(Symbol)
    • [JavaScript_study] 구조 분해 할당(Destructuring assignment)
    • [JavaScript_study] Spread operator
    갈푸라떼
    갈푸라떼

    티스토리툴바