[TIL] `for-in`, `for-of` 의 차이점

경두현·2020년 5월 3일

CODESTATES JavaScript TIL for...in for...of 객체 반복문 배열

TIL

목록 보기

2/11

`for-in`

for ... in 문은 객체의 모든 non-Symbol, enumerable properties을 반복합니다. - MDN

문법

for (variable in object) { ... }
variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정된다.
object : 반복 시킬 Object(객체)

예제1

let obj = { 1 : "a",
            2 : "b",
            3 : "c"};
for (let prop in obj){ // prop 는 아무거나 상관없다.
     console.log(prop);
     console.log(typeof prop);
    }
// 1
// String
// 2
// String
// 3
// String

결과값은 1, 2, 3 이 출력된다. 그리고, 출력된 결과값의 type은 string이다. 나는 숫자를 프로퍼티값으로 추가했지만 결과는 String이다. 하지만, 평소에 for-in을 이용하여 Object의 Value를 불러왔기에 전혀 사용에 문제가 없었다.

obj[1] // "a"
obj["1"] // "a"

위 코드와 같이 Object에 접근할때에 숫자를 넣어도 가능하고 숫자를 문자열로 바꿔서 넣어도 똑같이 접근이 가능하다. 이 부분은 MDN등은 참조하여 더욱 공부가 필요한 부분이다.

예제2

위에서 for-in은 Object에 사용한다고 기술하였으나 Array에 사용하면 어떤 결과를 가져올까.

let arr = ["a", "b", "c", "d"];
for (let item in arr){
     console.log(item);
     console.log(typeof item);
// 0
// String
// 1
// String
// 2
// String

결과값은 0, 1, 2가 출력되었다. Array의 Index값이 출력되었다.(고 생각한다) 그리고, 여기에서도 Index값의 type는 String이다.

`for-of`

for-of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성합니다. - MDN

문법

for (variable of iterable) {
  statement
}

variable : 각 반복에 서로 다른 속성값이 variable에 할당됩니다.
iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체.

예제1

let obj = { 1 : "a",
            2 : "b",
            3 : "c"};
for (let prop of obj){
     console.log(prop);
     console.log(typeof prop);
    }
// Uncaught TypeError: obj is not iterable

for-of를 Object에 사용해 보았다. 결과값은 TypeError이다. 이유는 Object는 iterable하지 않다고 한다. iterable이란 "반복이 가능한"이란 뜻으로 Object는 반복이 가능하지 않다는 것이다. 간단히 말해서 길이와 순서가 있지 않은 것이다.(Array, String등은 길이와 순서가 있다)

예제2

let arr = ["a", "b", 1, 2];
for (let element of arr){
     console.log(element);
     console.log(typeof element);
}
// a
// String
// b
// String
// 1
// Number
// 2
// Number