minTech

[JavaScript] Set Methods 본문

JavaScript

[JavaScript] Set Methods

pushzzeong 2023. 10. 5. 16:11

코딩 테스트 연습 중에 배열의 중복된 값을 제거하는 어려움을 만났다. 내가 생각한 코드는 너무 복잡하여 서치 해보던 중에 new Set() 이라는 것을 통해 배열의 중복 값을 제거하는 방법을 알아내었다. 그래서 이 함수에 대해 더 알아보고, 정리해보고자 한다. 

 

 

1. Set 

1) set의 중복된 값을 허용하지 않는 값의 집합을 나타내는 자료구조이다. 따라서 set 객체안에는 동일한 값을 가지지 않고, 유일한 값을 저장한다.

2) Set은 순서를 가지지 않는다. 따라서 값의 위치에 의존하지 않는다. 

2. new Set ()

: Set 객체를 생성

<html>
    <body>
        <script>
            let letters = new Set(["a","b","c"]);
            console.log(letters);
        </script>
    </body>
</html>

결과 1

결과 사진과 같이 'a','b','c'의 값을 요소로 갖는 Set객체가 생성되었음을 알 수 있다. 

 

2. add() 

Set()에 새로운 요소를 추가한다. Set은 중복되는 값을 가지지 않기 때문에 중복된 값을 추가하려고 하면 무시된다.

<html>
    <body>
        <script>
            let letters = new Set(["a","b","c"]);
            letters.add("d");
            letters.add("e")
            console.log(letters);
        </script>
    </body>
</html>

add() 함수를 통해 'd'와 'e' 가 추가되었다. 

 

3. delete() 

Set()의 요소를 제거한다. 

<html>
    <body>
        <script>
            let letters = new Set(["a","b","c"]);
            letters.delete('a')
            console.log(letters);
        </script>
    </body>
</html>

delete() 함수를 통해 'a','b','c'의 값을 갖는 Set 객체에서 'a' 값이 되었다. 

 

4. has() 

값이 존재하는지 여부를 리턴한다. 

<html>
    <body>
        <script>
            let letters = new Set(["a","b","c"]);

            console.log(letters.has('b'));
            console.log(letters.has('d'))
        </script>
    </body>
</html>

Set이 'b' 값을 가지고 있기 때문에 true를 반환하였으며, 'd' 는 갖지 않기 때문에 false를 반환한다.

 

 

5. clear()

Set의 모든 요소를 제거한다. 

<html>
    <body>
        <script>
            let letters = new Set(["a","b","c"]);
            letters.clear();
            console.log(letters);
        </script>
    </body>
</html>

 

 

 

6. 그 외

1) Array -> Set

new Set()을 이용해 배열에서 세트로 전환이 가능하다. 

<html>
    <body>
        <script>
            const array = [1,2,3,3,3,2,2,5];
            const set = new Set(array);
            console.log(set)
        </script>
    </body>
</html>

2) Set -> Array

spread(...) 연산자를 이용해 반대로 세트에서 배열로 전환이 가능하다. 

<html>
    <body>
        <script>
            const set = new Set(["a","b","c","d"]);
            const array = [...set];
           
            console.log(set)
            console.log(array)
        </script>
    </body>
</html>

3)  중복값 제거

<html>
    <body>
        <script>
            const Array = ["a","a","a","c","c","d","b","c","d"];
            const RemovedArr = [...new Set(Array)];
           
            console.log(Array)
            console.log(RemovedArr)
        </script>
    </body>
</html>

 

  1. 중복값이 포함된 배열을 new Set를 이용해 set로 전환해서 중복값을 제거
  2. spread (...) 연산자를 통해 다시 배열로 변환하여 새로운 변수 RemovedArr에 넣어준다. 

 

처음에 '간단히 배열의 중복값을 제거하는 방법이 무엇일까' 라는 마음으로 서치하다가 JavaScript 의 set 에 대해서 공부하게 되었다. 

위에 정리한 것들 말고도 Set는 수학연산을 할 때 많이 이용되기 때문에 교집합, 합집합 등의 연산에 많이 사용된다. 오늘은 Set의 기본적인 것만을 공부해보았고, 다음에는 더 깊이 들어가서 수학연산에 어떻게 이용되는지 정리해볼 것이다. 

코딩테스트 연습 문제를 풀어보면서 문제의 정답을 맞추는 것도 중요하지만, 다른 사람의 풀이를 보고, 내가 몰랐던 부분의 코드 분석해보면서 이렇게 블로그를 통해 정리해나가는 방법도 괜찮은 것 같다고 생각했다. 자주 이렇게 작성해야지!

'JavaScript' 카테고리의 다른 글

[JavaScript] DOM(Document Object Model) / 노드(Node) 접근법  (0) 2024.01.17
[JavaScript] 원하는 태그 선택하는 방법  (0) 2024.01.16
[JavaScript] 브라우저 렌더링 원리  (0) 2024.01.12
[Javascript] Array.Sort()  (0) 2023.10.17
[JavaScript] Array 생성 및 요소 추가/제거  (0) 2023.10.17
'JavaScript' Related Articles more