[JavaScript] for in / for of / foreach 사용법 비교 정리

for in

반복 수행을 위해서 사용합니다.

for in의 경우 열거가 가능한 모든 객체(Array, Object, Map, Set, ...)에 대해서 반복 작업 수행이 가능합니다.

 

 

const arr = ['Angel', 'Player', 'tistory'];

const obj = {
    a: 'apple',
    b: 'banana',
    c: 'carrot',
};

const str = 'Angel';

// 객체 for in
for (let i in obj) {
    console.log(i);
}
console.log('-------');

// 배열 for in
for (let i in arr) {
    console.log(i);
}
console.log('-------');

// 문자열 for in
for (let i in str) {
    console.log(i);
}

 

a
b
c
-------
0
1
2
-------
0
1
2
3
4

 

객체의 경우 위 과일을 저장하는 예시를 통해 알 수 있듯이, key(a, b, c)를 리턴하게 됩니다.

 

배열은 배열의 값을 리턴하는 것이 아니라 배열의 index(0, 1, 2)를 리턴하는 것을 확인할 수 있습니다.

 

문자열 역시 문자열의 각각 문자가 아닌 index를 리턴합니다.

 

 

 

 

for of

for in과 마찬가지로 반복 수행을 위해서 사용합니다. 

Symbol.iterator 속성을 가지는 객체에 한정되어 사용 가능하며 대표적으로 Array, String, Map, Set 등이 있습니다.

 

 

※ 참고 : Symbol.iterator

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator

Symbol.iterator - JavaScript | MDN

 

 

// 배열 for of
for (let i of arr) {
    console.log(i);
}
console.log('-------');

// 객체 for of
// error : (TypeError: obj is not iterable)
// for (let i of obj) {
//     console.log(i);
// }
// console.log('-------');

// 문자열 for of
for (let i of str) {
    console.log(i);
}

 

Angel
Player
tistory
-------
A
n
g
e
l

 

앞서 말씀드렸듯이 for of는 Symbol.iterator를 가지는 객체에 한정해서만 사용 가능하므로 Object형은 사용이 불가능합니다.

 

실제 코드를 실행해보면 error : (TypeError: obj is not iterable)가 나타나는 것을 확인할 수 있습니다.

 

for in과 다르게 for of는 인덱스가 아닌 실제 값을 가져오게 됩니다.

(python의 for in과 유사하다고 보시면 될 것 같습니다.)

 

 

 

 

foreach

foreach는 배열 타입에서만 사용가능한 문법입니다.

 

foreach는 결과적으로 보면 for of와 동일한 효과라고 볼 수 있습니다.

 

반복마다 배열의 요소들을 하나씩 가져오게 되는데, callback 함수 형태로 인자를 받아옵니다.

 

 

const arr = ['Angel', 'Player', 'tistory'];

const obj = {
    a: 'apple',
    b: 'banana',
    c: 'carrot',
};

const str = 'Angel';

// 배열 foreach
arr.forEach(e => {
    console.log(e);
});

// str.forEach(e => {
//     console.log(e);
// });

// obj.forEach(e => {
//     console.log(e);
// });

 

 

 

 

정리

	사용 범위	결과
for in	iterable한 모든 객체	index, key
for of	Symbol.iterator 속성을 가지는 객체	각 객체의 요소
foreach	배열	배열의 요소