자바스크립트 for in과 for of 비교하기

자바스크립트는 다양한 반복문을 제공하여 데이터를 처리하는데 사용됩니다. 그 중에서도 'for in'과 'for of'는 자주 사용되는 반복문 중의 두 가지입니다. 이번 블로그 포스트에서는 'for in'과 'for of' 반복문에 대해 자세히 알아보고, 두 반복문의 차이점과 각각의 적절한 사용 사례에 대해 알아보겠습니다.

'for in' 반복문

'for in' 반복문은 객체의 속성들을 반복하여 처리하는데 사용됩니다. 이 반복문은 객체의 속성들을 순회하며 해당 속성의 키(key)를 변수로 할당합니다. 이제 'for in' 반복문을 사용하는 예제를 살펴보겠습니다.

    const person = {
      name: 'John',
      age: 30,
      occupation: 'Engineer'
    };

    for (let key in person) {
      console.log(key + ': ' + person[key]);
    }
    
    // 결과값
    // name : John
    // age : 30
    // occupation : 'Engineer'

위의 예제는 객체 'person'의 속성들을 순회하며 각 속성의 키와 값을 출력합니다.

 

'for of' 반복문

'for of' 반복문은 순회 가능한(iterable) 객체를 반복하여 처리하는데 사용됩니다. 이 반복문은 배열과 같은 컬렉션을 순회할 때 매우 유용하며, 각 요소의 값을 변수로 할당합니다. 'for of' 반복문의 사용 예제를 살펴봅시다.

    const numbers = [1, 2, 3, 4, 5];

    for (let num of numbers) {
      console.log(num); // 1, 2, 3, 4, 5
    }

위의 예제는 배열 'numbers'의 각 요소들을 순회하며 각 요소의 값을 출력합니다.

'for in'과 'for of' 비교하기

이제 'for in'과 'for of' 반복문을 비교해 보겠습니다.

1. 사용하는 객체 형태

'for in' 반복문은 객체의 속성들을 순회하는데 사용되고, 'for of' 반복문은 순회 가능한 객체, 주로 배열과 같은 컬렉션을 순회하는데 사용됩니다.

2. 값의 할당 방식

'for in' 반복문은 객체의 속성의 키(key)를 변수에 할당하며, 'for of' 반복문은 컬렉션의 요소의 값을 변수에 할당합니다.

3. 순회 대상

'for in' 반복문은 객체의 모든 열거 가능한 속성을 순회하며, 'for of' 반복문은 순회 가능한 객체의 요소들을 순서대로 순회합니다.

 

배열에서의 for in

배열에서 for in을 사용하면 아래와 같습니다.

const DUMMY_DATAS = ["a", "b", "c", "d"]

for( DUMMY_DATA in DUMMY_DATAS){
	console.log(DUMMY_DATA); // 0, 1, 2, 3
}

어떻게 보면 배열도 자바스크립트에서는 객체이기때문에 for in을 사용하면 배열의 key인 index가 출력됩니다. 그렇기 때문에 배열을 사용하려면 for in이 아닌 for of를 사용해야 합니다.

 

결론

'for in'과 'for of' 반복문은 각각 객체와 순회 가능한 객체를 처리하는데 사용됩니다. 'for in'은 객체의 속성을 순회하며 키와 값을 처리하는데 유용하고, 'for of'는 컬렉션의 요소들을 순회할 때 간편하게 사용할 수 있습니다. 올바른 상황에서 적절한 반복문을 선택하여 자바스크립트 코드를 더욱 효율적으로 작성할 수 있도록 합시다.