가장 자주 사용하는 for문이지만 헷갈렸던 for in과 for of의 차이점과 사용하는 경우에 대해 짚고 넘어가려고 한다.
📗 for in
- value가 아닌
key에 해당한 값이 변수로 반복된다. (객체에 적합)- enumerable(열거 가능한) 것들만 출력한다.
- IE에서 사용가능하다.
배열의 경우
let arr1 = [10, 20, 30, 40, 50]
for (const i in arr1) {
console.log(i) //index를 가져온다
// 0 1 2 3 4
}
객체의 경우
let obj1 = {
'one': 10,
'two': 20
}
for (const i in obj1) {
console.log(i) //key를 가져온다
// one two
console.log(obj1[i]) //value를 출력
// 10 20
}console.log를 찍어보면 i에 배열의 경우 index값이,
객체의 경우 key 값이 들어가게 된다.
키값과 밸류를 같이 보고 싶으시다면 key와 밸류값에 접근하는 방법인 객체명[키값]을 입력해서 코딩하면 된다.
배열의 반복을 위해서는 추천되지 않고, Array.prototype.forEach(), for...of가 이미 존재한다. 그렇다면..
💡 언제 for in을 사용할까?
- 실질적으로 디버깅을 위해 사용
- 키-값 쌍이 선호되는 데이터의 경우(속성이 "key"의 역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우
📕 for of
- 배열에서
value에 해당한 값이 변수로 반복된다. (배열에 적합)- iterable(반복가능한) 객체를 출력한다.
- iterable 객체에는 String, Array, Map, Set 등이 있다. (Object는 X)
- IE 지원이 불가하다.
배열의 경우 O
let arr2 = [10, 20, 30, 40, 50]
for (const item of arr2) {
console.log(item) //item(value)을 가져온다!
}문자열의 경우 O
for (const item of 'hello world') {
console.log(item)
// h e l l o w o r l d
}객체의 경우 X
let obj2 = {
'one': 10,
'two': 20
}
// 오류발생 !!
for (const item of obj2) { //of뒤에 iterable한 것이 나와야한다.
console.log(item)
}