자바스크립트의 for of 반복문은 반복이 가능한 데이터 집합 객체를 반복할 수 있도록 해 준다. 다른 반복문보다 사용의 용이성이 있다. 반복이 가능한 데이터 객체는 array, map, json 등과 같은 집합적인 데이터들을 말하며, 이들은 이터레이터 iterator 라고도 한다.
자바스크립트 반복문 for of 사용 방법
using javascript for in loop
자바스크립트는 반복 가능한 객체인 컬렉션 객체를 반복할 수 있다.
for of 구문을 이용하여 컬렉션 객체를 반복하여 컬렉션에 있는 개개의 데이터에 접근할 수 있다.
이런 컬렉션 객체들은 이터레이터 iterator 라고도 하며 json, array, map 등의 자료구조를 가진다.
이런 반복 가능한 객체들을 반복할 수 있도록 하는 구문은 익혀두는 것이 추후 코딩을 할 때 편하다.
for of 사용 방법
for in 구문은 반복이 가능한 데이터를 반복할 때 사용한다.
for of 구문은 반복이 가능한 데이터 객체를 반복할 때 사용한다.
차이가 있다면 데이터 구조이다.
하지만 for of 로 반복문을 사용할 수 있는 객체라면 for in 으로도 반복을 할 수 있고, foreach 나 for 문을 사용할 수도 있다.
어떤 구문을 사용하느냐에 따라 차이가 있을 수 있지만 큰 차이는 없다.
아래는 for of 구문으로 반복을 하는 문법을 보여준다.
for ( 반복변수 of 반복 가능한 객체 ) {
// 코드 실행
}샘플코드
위에서 언급한 for of 구문을 이용한 자바스크립트 예제를 만들어 본다.
첫번째는 json 객체를 나열한 데이터를 표시하고, 두번째는 일반적인 문자열 배열을 보여준다.
이것들을 for of 구문을 이용하여 반복을 할 수 있는데 for in 과 는 조금 차이가 있음을 보여준다.
for in 구문에 대한 내용은 이전의 내용을 참고해 본다.
<!DOCTYPE html>
<html>
<body>
<script>
console.log('----------');
const arrComp = [
{"기종":"노트북1", "CPU":"Intel-i5", "RAM":"256MB"},
{"기종":"노트북2", "CPU":"Intel-i7", "RAM":"512MB"},
{"기종":"노트북3", "CPU":"AMD", "RAM":"1024MB"}
];
for (let lpVal of arrComp) {
console.log( lpVal.기종, lpVal.CPU, lpVal.RAM );
}
console.log('----------');
const arrStock = ["다우산업", "나스닥", "홍콩H", "상해종합", "니케이225"];
for (let lpVal of arrStock) {
console.log( lpVal );
}
console.log('----------');
</script>
</body>
</html>json 데이터 객체를 for of 구문을 사용한 것이 for in 을 사용한 것과 차이가 있음을 알 수 있지만, 데이터의 접근에 용이함을 보여준다.
배열 객체를 for of 구문을 사용한 것이 일반적인 다른 반복문을 사용한 것보다 코딩에 용이함을 보여준다.
이정도만 알아도 코딩에 도움이 크다.
결과 화면을 보자.
첫번째는 json 데이터 객체를 for of 반복문을 이용하여 데이터를 출력한 것이며, 두번째는 배열 객체를 for of 반복문을 이용하여 데이터를 출력한 것이다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 while 반복문 사용 using javascript while loop statement (0) | 2022.05.02 |
|---|---|
| html 하이퍼 링크 태그 a href 사용 using html a tag (0) | 2022.04.28 |
| 자바스크립트 반복문 for in 사용 방법 using javascript for in loop statement (0) | 2022.04.24 |
| 자바스크립트 반복문 for 사용 방법 using javascript loop for statement (0) | 2022.04.22 |
| 자바스크립트 선택 조건 switch case 사용 방법 using javascript switch case statement (0) | 2022.04.19 |
댓글