[javascript] for in 과 for of 사용법(차이)

막상 쓰려고하면 두개가 헷갈려서 기록한다.

 

for ... in

for ... of

 

반복문으로 사용되는 for in 과 for of는 ES6부터 추가되었다.

 

우선 두개의 차이는 다음과 같다.

 

 

for in

- 객체 탐색

 

for of

- 배열 요소 탐색(Array뿐 아니라 Map, Set, String 에도 사용 가능하다.)

 

 

그럼 예시를 살펴보자

 

---

 

1. for in

 

const param = {
   a: 1,
   b: 2,
   c: 3
}

위와같은 param이라는 변수가 있을때,

>> a, b, c

라는 출력값을 얻기위해서는 다음과 같은 로직을 짜면 된다.

 

for (let item in param) {
   console.log(item)
}


// output
>> a, b, c

해당 로직을 보면 item이 객체의 키값을 반환하는것을 알 수 있다.

이를 활용해 value값을 뽑을 수 있는데,

 

>> 1, 2, 3

의 출력을 얻기 위해 다음과 같은 로직을 짜면 된다.

 

for (let item in param) {
   console.log(param[item])
}


// output
>> 1, 2, 3

 

 

2. for of

const arr = [1, 2, 3]

for(let item of arr) {
   console.log(item)
}


// output
>> 1, 2, 3

위 예시처럼 arr라는 배열 변수가 있을때

해당 값을 리턴하기 위해서는 for of를 사용할 수 있다.

 

 

 

---

 

 

그럼 만약 객체에 for of를 사용하고,

배열에 for in을 사용하면 어떻게 될까?

 

1. 객체에 for of를 사용하는 경우

 

우선 전자의 경우(객체에 for of를 사용하는 경우) 다음과 같은 에러가 발생하며 로직이 정상적으로

수행되지 않는다.

>> Uncaught TypeError: param is not iterable

 

 

 

 

2. 배열에 for in을 사용하는 경우

 

자바스크립트에서는 배열도 객체이다. 때문에 해당 경우에는 에러가 발생하지 않는다.

다만, for of를 사용할 경우 각각의 요소의 value값을 리턴하지만

for in의 경우 각각의 요소의 인덱스를 반환한다.

 

const arr = [1, 2, 3];

for (let item in arr) {
  console.log(item);
}

// output - 인덱스를 반환함
>> 0, 1, 2