[es6]Set(),WeakSet(),set 메소드,set 으로 중복없는 배열 만들기, set 배열로 만들기

안녕하세요 이번 포스팅은 Set() & WeakSet() 에 알아보겠슴다

공부하다 좀 헷갈리고 어려운 부분이 있어서,,

이해하기 쉽게,,정리를 좀 해보려고 해요

그럼 공부해보아요!😝

1. Set()

중복이 허용되지 않는 데이터 집합 입니다.

iterable 한 특징을 가지고 있죠. ( * 값을 하나씩 순차적으로 접근이 가능하다 => 반복가능한객체 )

	


const set = new Set()

- 속성

size	Set객체 내의 요소 개수 확인

- 메소드

add()	Set객체에 요소 추가
clear()	Set객체 내의 모든 요소 제거
delete()	Set객체에 요소 제거
forEach()	Set객체 내의 요소 순서대로 실행
has()	Set객체 내의 요소 값 확인

add 메소드를 통해 중복이 허용되지 않는다를 확인해보자

	


const set = new Set([1,2,3])   //Set(3) {1, 2, 3}
set.add(1)   //Set(3) {1, 2, 3}
set.add(4)   //Set(4) {1, 2, 3, 4}

set에 값 1이 이미 존재하니까 add 메소드로 값 1을 추가해도 추가되지 않습니다.

알아서 중복을 걸러주죠 아주 똑똑한 아이,,

has,delete 메소드로 값 존재 유무 확인

	


//현재 => Set(4) {1, 2, 3, 4}

set.delete(2)  //true
set.has(2)   //false
set   //Set(3) {1, 3, 4}

has 메소드로 삭제한 요소의 boolean 을 확인 할 수 있습니다

forEach로 순회

set에서도 forEach를 사용할 수 있는데요.

배열에서 쓰는 forEach 와 다릅니다.

배열에선 콜백의 인자가 값,인덱스,배열 로 들어오죵?

set 에선 값,키,오브젝트 로 들어옵니다

set은 인덱스가 없거든요 ~ ! ! 😋

	


//현재 => Set(3) {1, 3, 4}

set.forEach( (v,k,arr)=> {  
    console.log(v,k,arr)
})

//1 1 Set(3) {1, 3, 4}
//3 3 Set(3) {1, 3, 4}
//4 4 Set(3) {1, 3, 4}

엇 value와 key의 값이 같죠?

네 맞습니다. set은 value와 key 가 같아요.

기억해둡시다.

Set을 배열로 만들기

Set을 스프레드연산자(spread operator)를 활용해 배열로 만들 수 있어요!

	


const arrset = [...set]

//(3) [1, 3, 4]

Set을 활용하여 중복없는 배열을 만들어보자

	


let arr = ['라면','김치볶음밥','스테이크','라면','스테이크','떡볶이']
const set = new Set(arr);
const setArr = [...set];

//["라면", "김치볶음밥", "스테이크", "떡볶이"]

정말 so simple 하게,, 중복없는 배열을 만들었습니다.

Set을 안쓴다면 나름 지지고 볶는 소스를 작성해야하는데,,

중복없이 유일한 값을 저장 or 값이 존재여부를 확인 할때 

아주 Set이 유용할 것 같습니다

2. WeakSet()

WeakSet을 알기전에 Set과 함 비교해볼까요 ?

Set이 객체를 가질경우 그 객체의 값이 없어진다면,,?

어떻게 될까요 ? 밑의 예시를 봅시다

	


const set = new Set()

let a = {num:1}  // 객체생성
set.add(a) //a 객체의  참조값 추가

set.forEach( (v)=> 
    console.log(v) // {num: 1}
)

a = null; // a 객체 값 지우기

set.forEach( (v)=> 
    console.log(v) // {num: 1}
)

Set이 내부에서 객체를 참조하고 있기 때문에 a객체에서 값을 바꾸더라도

Set에서는 값이 바뀌지 않습니다.

그런데 참조를 같이 끊어버리고 싶은 경우가 있겠지요 ,,

그럴때 WeakSet을 사용합니다

WeakSet은 객체의 참조를 모니터링하여 WeakSet 내의 객체의 참조가 없어지면 가비지컬렉션GC(Garbage Collection) 대상이 됩니다.

예시로 확인해보죠

	


const wset = new WeakSet();

let a = {num:1}  // 객체생성
wset.add(a) //a 객체의  참조값 추가

a = null; // a 객체 값 지우기

wset.has(a) //false

has메소드로 확인하면 false 가 나오죠? 

값을 갖고있지 않겠다는 거죠.

콘솔에 wset 찍어보면 값이 존재하는 것 처럼 보이지만 유효한 객체가 아니라는 걸 알수있습니다.

WeakSet을 사용할 경우 가비지셀렉션이 계속 주시합니다..

엇 참조 끊겼어 ,,,? 없어졌니,,? 메모리에서도 지워줄게 뭐 이런식으로 주의깊게 봐주는거죠,,

그래서 WeakSet을 약한참조라고 합니다!  

Set 은 강한참조!

WeakSet은 참조형 객체만 가질 수 있어요 (원시데이터 x)

iterable 하지도 않습니다. 반복 뭐 그딴거 안되구여

메소드도 has() , add() , delete() 만 가능합니다.

제일 큰 차이점이 가비지컬렉션인거 같습니다.

Set을 쓰면서 메모리 관련해서 신경이 쓰인다,,이럴때 WeakSet 을 사용해보면 어떨까 싶네요

공부하면서 느낀건데 너무 깊게 알려고 하지 말고

Set과 WeakSet 의 제일 큰 비교 , 차이점이 뭔가 ,,? 를 아는게 중요한 것 같습니다

더 알아보고 추가사항은 포스팅 하도록 할게용 ~