자바스크립트(JavaScript) - for ...in 과 for ...of

for … in 과 for … of

ES6 부터 추가된 문법이다.

1
2

for ...in
for ...of

두 가지 모두 반복문으로 사용되는데 조금 차이가 있다.

for …in - 객체 순환

1
2
3
4
5
6
7
8
9

let obj = {
	kwon: 1,
	kim: 2,
	jo: 3,
};

for (let item in obj) {
console.log(item + ': ' + obj[item]);
}

출력

1
2
3

kwon: 1
kim: 2
jo: 3

위의 코드에서 for ...of 를 사용한다면 다음과 같은 에러가 발생한다.

1

TypeError: obj is not iterable

이터러블하지 않다고 한다. 즉 반복가능한 객체가 아니기 때문에 에러가 발생한 것이다.

이 결과를 보면 for ...of 가 어떻게 사용되어야 하는지 유추할 수 있다.

for …of - 배열 순환

for ...of 문은 반복가능한 객체를 통해 반복하는 루프를 만든다.

1
2
3
4
5

let arr = [10, 20, 30];

for (let item of arr) {
    console.log(item);
}

출력

1
2
3

10
20
30

위의 코드에서 for ...in 을 사용한다면 다음과 같은 결과가 나온다.

1
2
3

0
1
2

자바스크립트에서는 배열 또한 객체이기 때문에 해당 객체의 키값이 출력되게 된다.

배열로 생각하면 index라고 보면 될 것이다.

참조
https://velog.io/@eomttt/for-...in-for-...of-%EC%B0%A8%EC%9D%B4
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_%EB%AC%B8

• ← Previous Post
• Next Post →