[개발자의품격][부트캠프][1기][9차시] JavaScript 주요 포인트 #6 | 내장 객체 - Set, Map 객체

JavaScript 주요 포인트 #6

내장 객체 - Set 객체

Set 객체는 주로 중복값을 제거하기 위한 용도로 사용한다. 

중복값 제거 1(오브젝트 이용)

// 중복값 제거 1(오브젝트 이용)
<script>
  let foods = [
    "햄버거",
    "김치찌개",
    "된장찌개",
    "김치찌개",
    "햄버거",
    "제육볶음",
  ];

  // 오브젝트는 중복된 키를 가질 수 없다. 이런 특징을 이용한 중복값 제거 방법이다.
  // if문을 사용하는 것 보다는 좋으나 set과 비교해 성능면에서 좋지 못한 코드이다.
  let oFoods = {};
  //   for (const food of foods) {
  //     oFoods[food] = "";
  //   }
  // foods 리스트를 값이 ""인 oFoods 오브젝트 생성한다. 이때 중복이 제거된다.
  foods.forEach(function (food) {
    oFoods[food] = "";
  });

  // 중복 제거된 oFoods 오브젝트의 키를 uniqueFoods 리스트에 push한다. 
  let uniqueFoods = [];
  for (const foodName in oFoods) {
    // for-in은 오브젝트의 키만 가져온다.
    uniqueFoods.push(foodName);
  }
  console.log(uniqueFoods); // ['햄버거', '김치찌개', '된장찌개', '제육볶음']
</script>

위 코드는 오브젝트가 중복된 키를 가질 수 없다는 점을 이용해 중복값을 제거한 경우이다. if문을 사용하는 것 보다는 좋으나 set과 비교해 성능면에서 좋지 못한 코드이다. Set 객체가 없었을때 주로 사용하던 방식이다.

 

중복값 제거 2(Set 객체 이용)

// 중복값 제거 2(Set 객체 이용)
<script>
  let foods = [
    "햄버거",
    "김치찌개",
    "된장찌개",
    "김치찌개",
    "햄버거",
    "제육볶음",
  ];
  let foodSet = new Set();
  // 이터러블한 경우 forEach를 주로 사용한다.
  foods.forEach(function (food) {
    foodSet.add(food); // (add 함수로 데이터 추가한다.)
  });
  console.log(foodSet); // {'햄버거', '김치찌개', '된장찌개', '제육볶음'}
</script>

Set은 배열 처럼 데이터의 집합이지만 순서가 없고, 유일한 값을 가진다.

 

Set 객체의 has, delete, clear 함수

// Set 객체의 has, delete, clear 함수
<script>
  let foodSet = new Set(["햄버거", "김치찌개", "된장찌개", "제육볶음"]);

  console.log(foodSet.has("김치찌개")); // true(특정 데이터가 있는지 확인한다.)
  console.log(foodSet.delete("김치찌개")); // true(특정 데이터를 삭제한다.)
  console.log(foodSet.clear); // (전체 데이터를 삭제한다.)
</script>

 

---

 

내장 객체 - Map 객체

Map은 key-value 구조이지만 오브젝트(object)와 다르다. 반복문 등에서 동적으로 이용하는 경우 오브젝트 보다 Map이 유리하다. 그리고 키에 공백이 있는 값, 함수, 문자, 숫자 등 어떠한 데이터 유형도 넣을 수 있는데 이는 오브젝트에서는 불가능하다. set, get, has, delete, clear 함수도 오브젝트에는 없는 기능이다.

Map 객체와 set, get, has, delete, clear 함수

// Map 객체와 set, get, has, delete, clear 함수
<script>
  // object는 key-value 구조이지만 Map과 다르다.
  let oUser = {};
  oUser.name = "홍길동";
  oUser.email = "abc@gmail.com";
  oUser.phone = "010-0000-0000";
  console.log(typeof oUser); // object

  // 반복문 등에서 동적으로 이용하는 경우 object 보다 Map이 유리하다.
  let userMap = new Map();
  userMap.set("name", "홍길동"); // (object와 달리 키에 공백 있는 값, 함수, 문자, 숫자 등 어떠한 데이터 유형도 넣을 수 있다.)
  userMap.set("email", "abc@gmail.com");
  userMap.set("phone", "010-0000-0000");
  console.log(userMap); // {'name' => '홍길동', 'email' => 'abc@gmail.com', 'phone' => '010-0000-0000'}

  // object가 할 수 없는 다음 기능 들을 사용할 수 있다.
  console.log(userMap.get("name")); // 홍길동
  console.log(userMap.has("name")); // true

  userMap.delete("name");
  console.log(userMap.get("name")); // undefined

  console.log(userMap); // {'email' => 'abc@gmail.com', 'phone' => '010-0000-0000'}
  userMap.forEach(function (item) {
    console.log(item); // abc@gmail.com, 010-0000-0000
  });

  userMap.clear(); // (전체 삭제)
  console.log(userMap.size); // 0
</script>

 

실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/javascript