for~ of 와 for~in의 차이점

이번 글에서는 for ~ of 반복문과 for ~ in 반복문의 차이점에 대해 정리해보려 한다. 

 

 

for ~ of 반복문

● for ~ of 반복문은 Array, String, Map, Set 등의 반복가능한 객체를 순회할 때 사용하는 반복문으로, 객체 안의 값들을 직접 접근하는 반복문이다.

 

 

 

for ~ of 반복문의 특징은 어떤 것이 있을까? 아래 예제에서 확인해 보도록 하겠다.

 

 

let array = [10, 20, 30];

for (let value of array) {
    console.log(value); 
}

 

 

 

 

 

 

위의 예제에서 array라는 배열을 선언하여 해당 배열의 value값들을 array[i]의 형태로 반복문을 돌려 출력하지 않고도 for ~ of 반복문을 활용하여 각 인덱스들을 순회하며 제대로 value값들을 출력해 주는 모습을 알 수 있다.

 

이처럼 for ~ of 반복문은 컬렉션의 요소에 직접 접근하기 때문에 반복하여 조회하는 객체에 대해 접근할 때 매우 유용하게 쓸 수 있다.

 

 

 

for ~ in 반복문

● for ~ in 반복문은 열거 가능한 속성을 Key(속성 이름)을 통해 객체가 직접 순회할 때 사용하는 반복문으로, 직접 설계한 객체(Object)의 속성에 접근할 때 유용하게 활용될 수 있고, 객체의 키(속성의 이름)에 접근하는 반복문이다.

 

 

 

그렇다면 for ~ in 반복문과는 어떤 차이점이 있는지 for ~ in 반복문의 특징을 아래 예제를 통해 알아보도록 하겠다.

 

 

 

let obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
    console.log(key, obj[key]); 
}

 

 

 

 

 

 

위의 예제에서 obj라는 객체를 선언하여 속성을 각각 a,b,c 로 지정해 주고 각각의 속성값을 1,2,3으로 지정해 준 다음,  해당 객체를 for ~ in 반복문을 통해 속성들을 순차적으로 접근하여  각각 a,b,c를 출력해 주는 모습이다.

 

이처럼 for ~ in 반복문은 객체의 속성에 쉽게 접근할 수 있다는 장점이 있지만, a,b,c중 원하지 않는 속성이 있더라도 강제로 출력되어 버리는 단점이 있다.

 

 

 

for ~ of 반복문 vs for ~ in 반복문

'겉보기엔 둘 다 배열이나 객체의 값들을 모두 순회하며 출력해 주는 건 똑같은 거 같은데 그냥 아무거나 쓰면 되는 거 아닌가? '라는 생각이 들 것이다. 하지만 두 반복문에는 차이점이 존재하고 혼동해서 사용했다가는 에러가 발생할 수 있다. 

 

 

 

 

두 반복문의 차이점에 대해 알아보기 위해 이전 예제를 서로 바꿔 사용하게 되면 어떤 결과값이 나오는지 알아보도록 하자.

 

 

 

 

let array = [10, 20, 30];

for (let value in array) {
    console.log(value); 
}

 

배열의 index에 저장된 value값들을 출력하고자 할 때 for ~ of 반복문이 아닌 for ~ in 반복문을 사용한 결과값

 

 

 

 

위의 결과값은 배열의 index에 저장된 value값들을 출력하고자 할 때 for ~ of 반복문이 아닌 for ~ in 반복문을 사용한 결과값이고, 아래 결과값은 객체의 속성들을 출력하고자 할 때 for ~ in 반복문이 아닌 for ~ of 반복문을 사용한 결과값이다.

 

 

 

 

let obj = { a: 1, b: 2, c: 3 };

for (let key of obj) {
    console.log(key, obj[key]); 
}

 

객체의 속성들을 출력하고자할 때 for ~ in 반복문이 아닌 for ~ of 반복문을 사용한 결과값

 

 

 

 

위 예제 2개를 통해 알 수 있듯이 for ~ of 반복문과 for ~ in 반복문은 사용용도가 다르게 설계된 것을 알 수 있다.

 

for ~ of 반반복문은 반복문을 통해 객체들을 하나하나 순회 가능한 형태의 객체들의 value값을 번거롭게 index 지정을 통한 반복문으로 접근하는 번거로움을 줄이기 위해 만들어진 것이고, for ~ in 반복문은 우리가 직접 선언하는 객체들을 불러올 때 해당객체에 속한 속성들을 한꺼번에 순회하기 편하기 위해 만들어진 반복문이다.

 

그렇기에 순회를 도는 type의 대상이 속성이름이냐 value값이냐가 다르기 때문에 for ~ in 반복문으로 배열을 순회하면 value값이 아닌 속성이름인 index값을 출력하게 되고, for ~ of 반복문으로 여러 속성이 지정된 일반 객체를 순회하게 되면 각 속성에 대해 반복가능한 프로토콜이 세팅되어있지 않아 value에 직접적으로 접근할 수 없어 값을 찾지 못하고 type error를 반환하게 되는 것이다. 

 

 

 

 

마지막으로 위의 내용을 간단히 정리해 보자면, for ~ of 반복문은 값에 직접 접근하며, for ~ in 반복문은 객체의 키(속성 이름)에 접근하기 때문에 for ~ of 반복문은 배열과 같은 반복문을 통해 값에 직접적으로 접근가능한 객체에만 사용할 수 있고, for ~ in 반복문은 일반 객체와 같이 속성을 열거할 수 있는 객체에만 사용할 수 있다.