es6-02

for…in 루프

for...in루프는 객체의 프로퍼티에 루프를 실행하도록 설계된 루프

1
2
for(variable in object)
statement

이건 es6에 새로 추가된 문법은 아니지만 내가 몰랐었으니 추가

1
2
3
4
5
const player = { name : 'Thomas', rank : 'Midshipman', age:25}
for(let prop in player){
if(!player.hasOwnProperty(prop)) continue;
console.log(prop + ':' + player[prop]);
}

결과는

1
2
3
"name:Thomas"
"rank:Midshipman"
"age:25"

여기에서 player.hasOwnProperty를 호출할 필요는 없지만 이 메서드를 생략하면 에러가 생기기 쉽다고 한다. 나중에 다시 보는걸로…

for…of 루프

for…of 루프는 ES6에 새로생긴 반복문.
컬렉션 요소에 루프를 실행한다고 한다. 배열은 물론 이터러블(iterable)객체에 모두 사용이 가능하다.

1
2
for(variable of object)
statement
1
2
3
4
const hand = [randFace(), randFace(), randFace()];
for(let face of hand)
console.log(`you rolled...${face}!`);
//

for…of는 배열에 루프를 실행해야 하지만 각 요소의 인덱스를 알 필요는 없을때 알맞음. 인덱스를 알아야 하면 일반적인 for루프를 이용하는 것으로

1
2
3
const hand = [randFace(), randFace(), randFace()];
for (let i=0; i<hand.length; i++)
console.log(`ROLL ${i+1} : ${hand[i]}`);

책에서는 이렇게 나왔는데 이론적으로 나와서 잘 이해가 되지 않는다.
예제를 찾아보자.

1
2
3
4
5
6
7
8
let iterable = [10, 20, 30];
for (let value of iterable) {
console.log(value);
}
// 10
// 20
// 30
1
2
3
4
5
6
7
8
let iterable = "boo";
for (let value of iterable) {
console.log(value);
}
// "b"
// "o"
// "o"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]
for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3

등등 다양하게 쓸 수 있다고 한다. 더 많은 예제는 아래 링크에서 볼 수 있다.
MDN

공유하기 댓글