[JavaScript] [for ... of] VS [for ... in]

falsovsveritas·2025년 1월 13일
JavaScriptfor loopiteration객체순회반복문배열순회

JavaScript

목록 보기
2/4

for...of와 for...in은 자바스크립트에서 반복(iteration)에 사용되지만, 사용 목적과 동작 방식이 다릅니다. 아래에서 그 차이를 자세히 살펴보겠습니다.

1. for...of

용도:

  • 반복 가능한(iterable) 객체를 순회합니다.
  • 주로 배열, 문자열, Set, Map 등의 요소를 직접 가져오는 데 사용됩니다.

특징:

  • 값(value)를 직접 반환합니다.
  • 반복 대상이 배열, 문자열, Set, Map 등과 같은 iterable 객체여야 합니다.

동작 방식:

  1. 자동으로 순회:
    for...of는 반복 가능한 객체의 iterator를 사용하여 요소를 하나씩 가져옵니다.
  2. 종료 조건:
    반복 가능한 객체의 끝에 도달하면 자동으로 종료됩니다. 별도로 종료 조건을 설정할 필요가 없습니다.

=> for...of는 반복 횟수를 별도로 지정하지 않아도, 순회 가능한 객체의 모든 요소를 자동으로 처리하며, 자동 종료되기 때문에 사용이 간편합니다. 🙂

예제

배열 순회

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

for (const num of arr) {
    console.log(num); // 1, 2, 3, 4, 5 출력
}

문자열 순회

const str = "hello";

for (const char of str) {
    console.log(char); // h, e, l, l, o 출력
}

Set 순회

const mySet = new Set([10, 20, 30]);

for (const value of mySet) {
    console.log(value); // 10, 20, 30 출력
}

Map 순회

const myMap = new Map([
    ["a", 1],
    ["b", 2],
    ["c", 3]
]);

for (const [key, value] of myMap) {
    console.log(key, value); // a 1, b 2, c 3 출력
}

for...of에서 반복 횟수 조정

  • 만약 반복을 중간에 멈추고 싶다면 break를 사용하면 됩니다.
  • 특정 조건에서 건너뛰고 싶다면 continue를 사용하세요.

반복 중단 (break)

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

for (const num of arr) {
    if (num === 3) break;
    console.log(num); // 1, 2 출력
}

특정 조건 건너뛰기 (continue)

for (const num of arr) {
    if (num % 2 === 0) continue;
    console.log(num); // 1, 3, 5 출력
}

사용 가능한 객체:

  • 배열 (Array)
  • 문자열 (String)
  • Set
  • Map
  • DOM 컬렉션 (예: NodeList)
  • arguments 객체

2. for...in

용도:

  • 객체의 속성(property)을 순회합니다.
  • 객체의 키(key) 또는 배열의 인덱스(index)를 가져오는 데 사용됩니다.

특징:

  • 키(key)를 반환합니다.
  • 객체의 열거 가능한(enumerable) 속성을 순회합니다.
  • 배열에서도 사용 가능하지만, 인덱스(index)를 반환하므로 값이 아닌 인덱스를 이용해 값을 얻어야 합니다.

for...in 문도 별도로 반복 횟수를 지정하지 않아도 됩니다.
for...in은 반복 대상 객체의 열거 가능한(enumerable) 속성(키 또는 인덱스)을 자동으로 순회하며, 대상 객체의 속성이 모두 처리되면 반복을 종료합니다.

동작 방식:

  1. 반복 대상:
    • 순회 대상 객체의 모든 열거 가능한 속성 키를 순서대로 가져옵니다.
  2. 자동 종료:
    • 객체의 모든 열거 가능한 속성을 순회하면 반복을 종료합니다.
  3. 열거 가능(enumerable):
    • 기본적으로 객체에 직접 정의된 속성만 포함됩니다.
    • 비열거 가능(non-enumerable) 속성이나 상속된 속성은 순회 대상에서 제외됩니다.

=> for...in은 반복 횟수를 명시하지 않아도 대상 객체의 열거 가능한 속성 키의 개수에 따라 자동으로 결정됩니다. 😊

예제 1: 객체의 속성 순회

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

for (const key in obj) {
    console.log(key); // 출력: a, b, c
}
  • for...in은 객체 obj의 키인 "a", "b", "c"를 자동으로 반복합니다.
  • 키를 가져오는 횟수는 객체의 속성 개수에 따라 결정됩니다.

예제 2: 배열 순회

const array = [10, 20, 30];

for (const index in array) {
    console.log(index, array[index]);
    // 출력: 0 10, 1 20, 2 30
}
  • 배열에서 for...in은 인덱스(index)를 순회합니다.
  • 인덱스 개수만큼 반복이 실행됩니다.

for...in에서 반복 횟수 조정

  • break: 반복을 중단하고, for...in 루프를 즉시 종료합니다.
  • continue: 현재 반복을 건너뛰고, 다음 반복으로 넘어갑니다.

break 사용

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

for (const key in obj) {
    if (key === 'b') break; // 'b'를 만나면 루프 종료
    console.log(key, obj[key]);
    // 출력: a 1
}

continue 사용

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

for (const key in obj) {
    if (key === 'b') continue; // 'b'를 건너뛰고 다음 반복으로 넘어감
    console.log(key, obj[key]);
    // 출력: a 1
    // 출력: c 3
}

참고: 배열에서도 동일하게 적용

for...in이 배열의 인덱스를 순회할 때도 break와 continue를 사용할 수 있습니다.

배열에서 break

const arr = [10, 20, 30];

for (const index in arr) {
    if (index == 1) break; // 인덱스 1에서 종료
    console.log(index, arr[index]);
    // 출력: 0 10
}

배열에서 continue

const arr = [10, 20, 30];

for (const index in arr) {
    if (index == 1) continue; // 인덱스 1을 건너뛰기
    console.log(index, arr[index]);
    // 출력: 0 10
    // 출력: 2 30
}

예제:

객체 순회:
const obj = { a: 1, b: 2, c: 3 };

// for...in으로 객체 순회
for (const key in obj) {
    console.log(key, obj[key]);
    // 출력: a 1, b 2, c 3
}
배열 순회:
const array = [10, 20, 30];

// for...in으로 배열 순회
for (const index in array) {
    console.log(index, array[index]);
    // 출력: 0 10, 1 20, 2 30
}

for...of와 for...in 비교

특성for...offor...in
반환 값값 (배열의 요소, 문자열의 문자 등)키 (객체의 속성, 배열의 인덱스)
대상반복 가능한 객체 (iterable)열거 가능한 객체 (enumerable)
주요 사용 대상배열, 문자열, Set, Map 등객체 속성 순회
사용 목적요소를 직접 가져오는 작업키/인덱스를 순회하는 작업
순회 속성배열, 문자열 등에서 적합객체 속성 순회에 적합

주의 사항

  1. for...in 사용 시 상속된 속성 포함 가능:

    • 객체의 프로토타입 체인에서 상속된 열거 가능한 속성도 포함될 수 있습니다.
    • 예기치 않은 속성이 포함되지 않게 하려면 hasOwnProperty로 필터링하세요.
    const obj = { a: 1 };
Object.prototype.b = 2;

for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key); // 출력: a
    }
}

  2. 배열에 for...in 사용 시 주의:

    • 배열에서 for...in은 인덱스를 반환하므로, 배열을 순회하는 데는 권장되지 않습니다.
    • 배열에 추가된 커스텀 속성도 포함될 수 있으므로 예기치 않은 동작이 발생할 수 있습니다.
    • 따라서 배열 순회에는 for...of나 forEach를 사용하는 것이 더 적합합니다.
    const array = [10, 20, 30];
array.customProperty = "hello";

for (const index in array) {
    console.log(index, array[index]);
    // 출력: 0 10, 1 20, 2 30, customProperty hello
}

  3. 객체에 for...of 사용 불가:

    • 객체는 iterable이 아니기 때문에 for...of를 직접 사용할 수 없습니다.
    • 객체를 순회하려면 Object.keys, Object.values, 또는 Object.entries와 함께 사용하세요.
    const obj = { a: 1, b: 2, c: 3 };

for (const key of Object.keys(obj)) {
    console.log(key, obj[key]);
    // 출력: a 1, b 2, c 3
}

요약

  • for...of: 값을 가져오고 싶을 때 사용 (배열, 문자열, Set, Map 등).
  • for...in: 객체의 속성 키나 배열의 인덱스를 가져올 때 사용.

배열 순회에는 for...of를, 객체 속성 순회에는 for...in을 사용하는 것이 적합합니다! 😊

profile
falsovsveritas
이전 포스트

[JavaScript] 함수를 키-값 구조로 사용하기

다음 포스트

[JavaScript] [includes] vs [has]

0개의 댓글