개발자 미니민의 개발스터디

[javascript] Set 객체 (+배열로 반환) / Map 객체

by mini_min

✔️ Set 객체

: 중복을 허용하지 않는다. 중복 안되는 프로그램 짤 때 유용함!

var set = new Set(); // 중복 허용 안함

set.add("java");
set.add("oracle");
set.add("html");
set.add("css");
set.add("java");
set.add("spring");

console.log(set.size); // 개수 5
console.log(set.has('html'));
set.delete('spring'); // 삭제
💡 has : item 의 존재 유무 확인
indexOf 보다 연산이 더 빠르다~

💡 배열에서 삭제하면, 요소 수가 안줄어든 것과 달리, set 은 delete 시 요소 수가 줄어든다!

 

-- 처음부터 순회 (for of 문으로)

//처음부터 순회
for(let a of set){
	console.log(a);
}

 

 

📓 set 을 배열로 반환하기

Array.from ⭐

var arr = Array.from(set); // 어레이 객체로 반환함
console.log(arr.join());
💡Array 객체로 반환한다. from 이용!

 

📓 배열을 set으로 반환하기

var set2 = new Set([1,2,3]);
console.log(set2); // {1,2,3}

 

✔️ set의 모든 요소 제거하기

set2.clear();
console.log(set2.size); // 0

 

 

✔️ set 에 객체 값을 저장한다면?

: set에 객체를 add 하는 것은, 값이 아닌 주소를 저장하는 것이다.

var set3 = new Set();
var obj = {subject:'java', score:100}; //객체

set3.add({subject:'java', score:100}); //객체는 값이 아닌 주소가 저장됨
set3.add({subject:'java', score:100}); //위의 객체와는 다른 객체
💡 위에 두 개는 동일해보이지만, 서로 다른 객체로 저장된 것이다. (주소 1, 주소 2가 저장된 것)
set3.add(obj); / set3.add(obj); 는 하나로 취급

 

 

✔️ Map 객체

: 키와 값으로 이루어진 객체

var map = new Map();
map.set("java", 100); // 키, 값
map.set("oracle", 90);
map.set("html", 80);
map.set("spring", 90);
map.set("oracle", 80); // 키가 중복이면 이전 데이터에 최신 데이터를 덮는다.
💡 키가 중복이면, 이전 데이터에 최신 데이터를 덮는다.

 

console.log(map.size); // 4
console.log(map.has("css") ); // false. 키 존재여부
console.log(map.get("oracle")); //80. 키에 대한 값을 반환
//map 은 하나씩 값을 가져올 수 있다.
console.log(map.get("css")); //undefined
map.delete("spring"); // 키와 값을 삭제
💡 has : 키 존재 여부 확인
get : 키가 일치하는 값을 반환한다.
만약, 값이 없으면 undefined 를 반환한다.
delete : 키와 값을 삭제

 

 

📓 map 을 배열로 반환하기

-- for of 를 이용하면 배열로 반환할 수 있다!

for(let [key, value] of map) {
	console.log(key + ":" + value);
}

 

-- forEach 를 이용하면 배열로 반환할 수 있다!

⭐ 첫번째가 value, 두번째가 key

//첫번째가 value!! 두번째가 key
map.forEach((value, key) => console.log(key + ":" + value) );

 

const map2 = new Map(
	[
		["01", "java"],
		["02", "spring"],
		["03", "oracle"],
		["01", "html"] // 키가 같으면 덮는다.
		
	]
);
💡 키가 같으면 데이터를 덮는다.

 

 

 

 

블로그의 정보

개발자 미니민의 개발로그

mini_min

활동하기