[JavaScript] 비교하며 알아보는 for~in과 for~of 문법

for~in

const arr = [1, 2, 3, 4, 5];
for (let value in arr){
    console.log(value);  //  0, 1, 2, 3, 4 (인덱스 반환)
}

배열에서 for~in문을 사용하면 각 배열 원소의 인덱스를 반환한다.

초기값은 인덱스를 나타내며, indexOf() 메서드를 사용한 것처럼 배열 전체 원소의 인덱스를 반환해준다.

 

const obj = {name: "Shawn", age: 29, sex: "Male"};
for (let value in obj){
    console.log(value)  //  name, age, sex (key 반환)
    console.log(obj[value])  //  Shawn, 29, Male (value 반환)
}

객체에서 for~in문을 사용하면 해당 객체의 key 값을 전부 반환한다.

초기값은 key 값을 나타내며, Object.keys(obj)를 사용한 것처럼 객체의 key 값 전부를 반환해준다.

만약, key 값이 아닌 value 값을 받고 싶다면 obj[value]와 같은 형태로 value 값을 받아올 수 있다.

 

for~of

const arr = [1, 2, 3, 4, 5];
for (let value of arr){
    console.log(value)  //  1, 2, 3, 4, 5 (원소를 반환)
}

/* forEach()로 배열의 원소를 받아올 때 */
arr.forEach(i => console.log(i));  //  1, 2, 3, 4, 5

배열에서 for~of문을 사용하면 배열의 인덱스가 아닌 원소를 전부 반환해준다.

초기값은 배열의 각 원소를 나타내며, forEach()를 사용하는 것과 같다.

 

객체는 for~of문에서 사용할 수 없다. 객체는 Iterable Object가 아니기 때문이다.

Iterable이란 배열처럼 하나씩 차례로 반환 가능한 것을 말하는데, 객체는 이에 해당하지 않는다.

만약 굳이 객체에 for~of문을 써야겠다면, Object.keys() 등과 같은 메서드로 객체를 배열화시킨 다음, 그 다음에 만들어진 배열을 대상으로 for~of문을 사용하면 된다.

 

배열의 원소들을 하나씩 추출하고 싶으면 for~of
배열의 원소들의 '인덱스'를 하나씩 추출하고 싶으면 for~in
객체의 key 값들을 모두 추출하고 싶으면 for~in
for는 그냥 반복문, for 뒤에 뭔가 붙어있다면 반복문이긴 한데 모든 원소(프로퍼티)에 접근하는 순회 반복문