for…in, for…of

• for…in
• for…of
• for…in VS for…of

for…in

• 객체의 열거 가능한 속성들을 순회 할 수 있도록 합니다.
• 객체의 key 값에 접근이 가능하나 value 값에는 직접 접근 불가합니다.
• 모든 객체에서 사용이 가능 합니다.

for …in 문을 사용해 배열과 객체의 요소에 접근하는 예제 key 값에서만 접근이 가능하기 때문에 배열에서는 index에 객체에서는 key 값에 접근하게 됩니다. value 값이 궁금하면 arr[i], obj[key]와 같이 key를 이용하는 방식을 사용해 간접적으로 접근 할 수도 있습니다.

1
2
3
4
5
6
7
8
9
10

let arr = ['a' , 'b', 'c']
for (let i in arr){
    console.log(i , arr[i])
}
// 0 a, 1 b, 2 c

let obj = { a: 1, b: 2, c: 3 }
for (let key in obj) { 
    console.log(key, obj[key]); }
// a 1, b 2, c 3

주의사항

• for …in 문에서는 순서가 보장되지 않으므로 속성들 간의 순서가 중요한 경우 for…in 문법을 사용하지 않는 것이 좋습니다.

for…of

• 반복 가능한 객체(iterable)를 순회 할 수 있도록 합니다.
• Array, Map, Set, arguments 등이 해당되며 Object는 해당이 되지 않습니다.

for...of 문은 반복 가능한 객체(iterable)를 순회 할 수 있도록 합니다. iterator 속성이 있는 Array,Map,Set,String 등의 값을 반복할 수 있으며 string 문자열에도 적용할 수 있습니다. for ...of 문은 [Symbol.iterator] 속성을 가지는 대상으로 하기 때문에 객체는 이에 해당하지 않으므로 사용을 하려고 하면 TypeError 가 발생 합니다.

1
2
3
4
5
6
7
8
9
10
11

let arr = ['a', 'b', 'c']
let obj = {a : 1 , b : 2 , c : 3}

for(let i of arr){
  console.log(i)
 } <-- 'a', 'b', 'c'

for(let c of obj){
  console.log(c)
} <-- TypeError: obj is not iterable

for…in VS for…of

for ...in

• Iterable object 대상으로 합니다.
• 객체의 모든 열거 가능한 속성에 대해 반복
• key를 리턴 (배열의 경우 index)

for ...of

• [Symbol.iterator] 속성을 가지는 collection만 대상으로 함

• Iterable object이지만, prototype chain에 의한 Iterable은 대상에서 제외 -> Array, Map, Set, String, TypedArray, arguments 등

• value를 리턴