본문 바로가기
programming/javascript

자바스크립트 Set Map 데이터의 for of 반복 using for of loop of Set and Map

by 개코 - 개발과 코딩 2022. 5. 30.

자바스크립트의 Set 과 Map 은 데이터의 집합이다. 이들 또한 for of 반복문을 사용하여 데이터의 접근이 가능하다. for of 의 특징은 데이터 집합을 지정하면 처음부터 끝까지 자동으로 반복해 준다. 참고로 자바스크립트의 Set 은 배열과 비슷한 데이터의 집합이며 Map 은 key value pair 형식의 데이터 집합이다.

자바스크립트 Set Map 데이터의 for of 반복
using for of loop of Set and Map

자바스크립트의 데이터 집합의 대표적인 것은 배열이지만 그 외 Set 과 Map 이 있다.

Set 은 반복이 가능한 데이터의 집합으로 배열과 비슷한 구조를 가진다.

Map은 키와 값이 쌍으로 이루어진 Key-Value Pair 구조를 가진 데이터 집합이다.

이런 데이터 집합은 for of 반복문을 통해 반복이 가능하다.

for of 반복문의 내용은 이전의 내용을 참고해 본다.

Set과 Map의 for of 반복문의 사용

OOP 프로그래밍 언어에서 반복이 가능한 데이터의 집합은 for of 반복문이 가능하다.

for of 반복문은 데이터 집합이 있을 때 처음부터 끝까지 자동으로 반복해 주는 반복문이다.

인덱스로 별도의 처리를 하지 않아도 되며 직접적으로 데이터 집합의 값에 접근이 가능하다.

당연히 Set 과 Map 또한 for of 반복문이 가능하다.

아래는 for of 구문을 사용하는 방법이다.

for ( 접근개별변수 of Set 집합 ) {
	// 코드
}

for ( 접근개별변수 of Map 집합) {
	// 코드
}

샘플코드

데이터 집합인 Set 과 Map 을 for of 반복문을 사용한 자바스크립트 예제를 만들어 본다.

데이터의 집합은 반복문이 가능하고 for of 반복문을 사용하면 데이터 접근과 가공이 용이하다.

for of 뿐만 아니라 forEach 도 있지만, 여기서는 for of 반복문만 다뤄본다.

코드를 보자.

<!DOCTYPE html>
<html>
    <body>

        <script>
            
            console.log('----------');

            const arrStock = new Set(["다우산업", "나스닥", "홍콩H", "상해종합", "니케이225"]);
            
            _loop = 0;
            for ( let lpEach of arrStock ) {
                console.log(lpEach);
            } 
            
            console.log('----------');

            const arrComp = new Map([
                ["type","노트북1"]
                , ["CPU","Intel-i5"]
                , ["RAM","256MB"]
            ]);
            
            _loop = 0;
            for (let lpEach of arrComp) {
                console.log(lpEach);
            }

            console.log('----------');

        </script>

    </body>
</html>

코드가 길어보이지만 반복문인 for of 만 보면 된다.

배열을 for of 반복문을 사용한 것과 크게 차이는 없다.

사용법은 단조롭고 명확하고 공통적이다. 다만, 데이터만 일정한 규칙만 따르면 그만이다.

결과 화면을 보자.

반응형

댓글