자바스크립트의 반복 가능한 객체는 for of 반복문을 사용하여 반복 처리를 할 수 있다. 반복 가능한 객체는 iterable 이라 하며 문자열, 배열, json 과 같은 데이터 집합을 말한다. for of 반복문은 iterable한 데이터 집합을 처음부터 끝까지 반복하고 인덱스를 사용하지 않아도 데이터 집합 내의 개별 데이터에 접근이 가능하다.
자바스크립트 반복 가능 객체 Iterables 사용 하기
using javascript iterables object
객체 지향 언어를 공부하다보면 반복 가능한 데이터들을 볼 수 있다.
반복 가능한 데이터는 말 그대로 반복이 가능한 객체를 말한다. 쉽게 말해 문자열이 그렇고 배열이 그러하며 json 객체들이 그렇다 xml 또한 마찬가지이며, html 요소들도 반복이 가능하다.
자바스크립트는 이런 반복가능한 데이터를 iterable 이라고 하며 for of 반복자를 사용하면 전체적으로 반복문을 처리하라 수 있다.
반복문 for of
반복가능한 객체들의 특징은 데이터들의 집합인 객체를 말한다.
그렇기에 반복이 가능하고 각 개별요소에 대해 접근할 수 있다.
이런 반복 가능한 iterable 객체들을 효율적으로 반복할 수 있는 구문이 for of 이다.
for of 반복문은 먼저 반복 가능한 객체들을 처음부터 끝까지 반복하는 특징을 가진다.
객체들의 각 요소에 접근하기 위해 인덱스를 사용할 필요도 없다.
아래는 for of 구문을 사용하는 것을 보여준다.
for ( 개별변수 of 반복 가능 객체) {
// 개별변수에 대한 처리 코드
}샘플코드
이제 반복 가능한 각체를 for of 반복문을 사용하여 자바스크립트 예제를 만들어 본다.
iterable은 반복 가능한 객체로써 문자열일 수도 있고 보통의 배열일 수도 있으며, json 과 같은 데이터 집합을 말한다.
for of 반복문은 반복자로써 데이터 집합 객체를 처음부터 끝까지 반복하여 각 개별 데이터에 접근한다.
코드를 보자.
<!DOCTYPE html>
<html>
<body>
<script>
let _loop = 0;
console.log('----------');
const arrText = "JavaScript";
_loop = 0;
for ( let lpVal of arrText ) {
console.log(lpVal);
}
console.log('----------');
const arrStock = ["다우산업", "나스닥", "홍콩H", "상해종합", "니케이225"];
_loop = 0;
for ( let lpVal of arrStock ) {
console.log(lpVal);
}
console.log('----------');
const arrComp = [
{"기종":"노트북1", "CPU":"Intel-i5", "RAM":"256MB"},
{"기종":"노트북2", "CPU":"Intel-i7", "RAM":"512MB"},
{"기종":"노트북3", "CPU":"AMD", "RAM":"1024MB"}
];
_loop = 0;
for (let lpVal of arrComp) {
console.log(lpVal);
}
console.log('----------');
</script>
</body>
</html>코드가 길지만 for of 반복문만 보도록 하자.
공통점이 있을 것이다. 개별 변수와 데이터 집합을 이용하고, 데이터의 처리는 개별 변수로만 사용할 수 있다.
인덱스를 사용하지 않아도 데이터 집합 객체에 접근이 가능한 것을 볼 수 있다.
결과 화면을 보자.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 set 세트 만들고 출력하기 creating javascript set (0) | 2022.06.01 |
|---|---|
| 자바스크립트 Set Map 데이터의 for of 반복 using for of loop of Set and Map (0) | 2022.05.30 |
| 자바스크립트 continue 문 사용 하기 using javascript continue statement (0) | 2022.05.23 |
| 자바스크립트 break 구문 사용 using javascript break statement (0) | 2022.05.21 |
| 자바스크립트 반복문 for 와 while 초기값 생략과 비교 comparing loop for and while (0) | 2022.05.14 |
댓글