1. for of 구문
- [ for of ] 구문은 ES6부터 추가된 반복문입니다.
- 공식적으로 된 설명을 보면 반복 가능한 객체의 값을 반복한다고 되어 있습니다.
- array, string, map, NodeList 등을 반복할 수 있습니다.
- 이 외에도 [ for in ] 구문이라고도 있죠? 그 구문과 비교해서 보도록 하겠습니다.
## for of 문법
for(let value of object){
//code
}- 그러니까 결국 [ for of ]구문은 객체나 배열의 값을 반복해서 반환합니다.
## for in 문법
for(let key in object){
//code
}- 하지만 [ for in ]구문은 객체나 배열의 키(key)를 반복해서 반환합니다.
- 2개의 차이는 아래 예시로 보도록 할게요.
1) 배열 반복
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - For Of</title>
</head>
<body>
<script>
var array = [10,20,30];
console.log('=====for of=====');
for(let item of array){
console.log(item);
}
console.log('=====for in=====');
for(let item in array){
console.log(item);
}
console.log('=====for in : 값호출=====');
for(let item in array){
console.log(array[item]);
}
</script>
</body>
</html>- 일단 첫 번째로는 [ for of ]구문으로, 두 번째는 [ for in ]구문으로 호출해볼게요.
- [ for of ]구문으로는 값이 아닌 키(key : 여기서는 인덱스 번호)가 호출돼서 다시 한번 값이 호출되게 해 봤습니다.
## 결과 보기
- 결과를 보니까 [ for of ] 구문은 바로 값을 잘 호출해줍니다.
- [ for in ] 구문은 key인 인덱스번호가 반환됩니다.
- 그래서 [ for of ]구문 값을 호출 시 배열명[key] 로 호출해야 가능합니다.
2) 객체 반복
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - For Of</title>
</head>
<body>
<script>
var person = {
name: '홍길동',
age: 20,
hobby: '넷플릭스보기'
};
console.log('=====for in=====');
for(let item in person){
console.log(item);
}
console.log('=====for of=====');
for(let item of person){
console.log(item);
}
</script>
</body>
</html>- 이번엔 [ for of ] 구문은 에러가 나기 때문에 뒤에 써보겠습니다.
## 결과 보기
- 보면 [ for in ]구문은 key를 잘 반환해서 보여주는 것이 확인이 됩니다.
- 하지만 [ for of ] 구문은 에러가 발생되는 것이 확인돼죠? 객체는 값만으로 이루어져 있지 않기 때문입니다.
- 그래서 [ for of ]구문은 컬렉션 되어 있는 객체인 [Symbol.iterator] 속성을 가지고 있어야만 합니다(직접 명시 가능).
3) Object 메서드를 통한 에러 처리
- Object는 통합적인 객체를 의미하는데, 객체니까 속성과 메서드가 있습니다.
- 그중 keys()는 키값을 반환, values()는 값을 반환, entries()는 키와 값을 모두 받을 수 있습니다.
- 자세한 메서드들은 아래 주소를 참고해주세요.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries
Object.entries() - JavaScript | MDN
The Object.entries() static method returns an array of a given object's own enumerable string-keyed property key-value pairs.
developer.mozilla.org
- 위에서 에러가 발생된 것은 이것을 통해 처리가 가능합니다.
## 코드 보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - for of구문</title>
</head>
<body>
<script>
const person = {
name: '홍길동',
age: 20,
hobby: '넷플릭스보기'
};
console.log('=====for in=====');
for(let item in person){
console.log(item); //키를 반환
}
console.log('=====for of=====');
for(let item of Object.values(person)){
console.log(item);
}
</script>
</body>
</html>
## 결과 보기
- 그럼 value값만 잘 출력됩니다.
☆ 마치며...
- 결과적으로 두 개다 반복하는 구문은 맞습니다.
- 하지만 [ for of ] VS [ for in ]으로 정리해보자면...
for in : 객체의 키를 반복
for of : 배열 값을 반복- 물론 키를 잘 호출해서 [ for in ]으로 값도 호출을 할 수 있다는 것을 잘 알아두면 될 듯합니다.
'웹언어 > 자바스크립트 - ES6' 카테고리의 다른 글
| [ES6강좌] 9강 JS Asynchronous(비동기) - 오쌤의 니가스터디 (0) | 2022.11.23 |
|---|---|
| [ES6강좌] 8강 JS Callback - 오쌤의 니가스터디 (0) | 2022.11.23 |
| [ES6강좌] 7강 Array객체의 메서드 추가 - 오쌤의 니가스터디 (0) | 2021.03.03 |
| [ES6강좌] 6강 Import & Export 모듈화 - 오쌤의 니가스터디 (0) | 2021.03.01 |
| [ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디 (2) | 2021.03.01 |
