JavaScript Katana

JavaScript for…in 문 설명: 구문, 주의점 및 모범 사례

JavaScript 입문·기초
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. 소개｜for…in 문이 해결할 수 있는 문제는 무엇인가요?

JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. 그 많은 기능 중 반복 처리는 데이터를 반복적으로 다루는 데 필수적입니다.

특히, for…in 문은 객체의 속성을 순회할 때 유용합니다.

이 글의 목적

이 글에서는 다음 항목들을 자세히 설명합니다:

  • JavaScript for…in 문의 기본 문법 및 사용법
  • 배열과 함께 사용할 때 주의해야 할 점
  • for…of 및 forEach와 같은 다른 반복 구조와의 차이점
  • 흔히 발생하는 오류와 해결 방법

이 글을 통해 배울 내용

  • 객체 속성과 배열 요소를 효율적으로 처리하는 방법
  • for…in 문을 안전하게 사용하기 위한 주의사항 및 패턴
  • 실용적인 코드 예제와 성능 비교

이 글은 초급부터 중급 JavaScript 개발자까지 실제 프로젝트에 적용할 수 있는 실무 지식을 습득하도록 구성되었습니다.

그럼 다음 섹션에서 for…in 문의 기본 개념을 자세히 살펴보겠습니다.

2. JavaScript for…in 문이란? [Basic Explanation]

JavaScript에서 for…in 문은 객체의 속성을 순회하는 데 사용됩니다. 이 문법은 객체에 특히 적합하며, 각 속성 이름(키)을 하나씩 처리할 수 있게 해줍니다.

기본 문법

아래는 for…in 문의 기본 문법입니다.

for (variable in object) {
  // 반복 처리
}

매개변수 설명:

  • variable : 현재 속성 이름(키)을 저장합니다.
  • object : 순회하려는 객체입니다.

예시: 객체 속성 열거하기

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

출력:

name: Taro
age: 25
city: Tokyo

중요한 참고 사항: 열거된 속성의 순서

for…in 문을 사용할 경우 속성의 순서는 보장되지 않습니다. JavaScript 사양에 따르면, 키가 문자열일 때 반드시 추가된 순서대로 처리되지 않을 수 있습니다. 엄격한 순서가 필요하다면 Object.keys()와 같은 다른 방법을 사용해야 합니다.

주요 특징

  1. 객체 키에 쉽게 접근: 객체에서 동적으로 속성 이름을 가져와야 할 때 유용합니다.
  2. 열거 가능한 속성만 포함: enumerable: false인 비열거 속성은 제외됩니다.
  3. 프로토타입에서 상속된 속성도 열거: 이는 다음 섹션에서 자세히 설명할 문제를 일으킬 수 있습니다.

3. 배열과 for…in 문｜주의해야 할 중요한 포인트

JavaScript의 for…in 문은 객체 속성을 열거하도록 설계되었지만, 배열에도 사용할 수 있습니다. 그러나 배열에 적용할 경우 몇 가지 중요한 주의사항이 있습니다. 이 섹션에서는 동작 방식과 잠재적인 함정들을 자세히 설명합니다.

배열에 대한 기본 동작

다음 예제를 살펴보세요.

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

출력:

0 Apple  
1 Banana  
2 Orange

주의 1: 프로토타입 속성이 열거될 수 있음

Array.prototype.newMethod = function () {
  return "New method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

출력:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

해결 방법:

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

주의 2: 순서가 보장되지 않음

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

출력:

1 Banana  
5 Orange  
10 Apple

주의 3: 인덱스가 문자열로 처리됩니다

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

해결책:

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

요약

  • for…in 문은 배열보다 객체에 더 적합합니다.
  • 순서나 숫자 인덱스가 중요할 때는 for…of 또는 표준 for 루프를 권장합니다.

4. for…in과 for…of 문 차이점 [With Comparison Table]

JavaScript에서 for…in과 for…of 문은 모두 반복에 사용되지만, 목적과 동작이 크게 다릅니다.

기본 구문 비교

for…in:

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // Retrieves keys
}

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

비교 표

Itemfor…infor…of
TargetObjects and arraysArrays and iterable objects
OutputProperty names (keys)Actual values
Prototype enumerationMay be enumeratedNot enumerated
Order guaranteeNot guaranteedGuaranteed

실용 예제｜배열 처리 차이점

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

요약

  • for…in: 객체 키를 처리하는 데 가장 적합합니다.
  • for…of: 배열 및 반복 가능한 객체에 이상적입니다.

5. 실용 예제: for…in 문의 고급 사용법 및 모범 사례

이 섹션에서는 JavaScript for…in 문을 활용한 고급 예제와 실제 개발에 유용한 모범 사례를 소개합니다.

1. 예제 1｜객체 속성 필터링

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

출력:

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. 예제 2｜중첩 객체 처리

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

출력:

name: Sato
age: 28
city: Osaka

3. 모범 사례｜프로토타입 속성 제외

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

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

출력:

a: 1
b: 2

요약

  • 객체 필터링 및 중첩 객체 처리에 대한 효과적인 사용 사례를 소개했습니다.
  • 프로토타입 상속으로 인한 문제를 방지하려면 hasOwnProperty()를 사용하세요.

6. for…in 문에서 흔히 발생하는 오류와 해결 방법 [Beginner-Friendly]

1. 오류 예제 1｜프로토타입 속성이 열거됩니다

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

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

출력:

a 1
b 2
c 3

해결책:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. 오류 예제 2｜배열에 for…in 사용

const arr = [10, 20, 30];
Array.prototype.extra = "Additional data";

for (const index in arr) {
  console.log(index, arr[index]);
}

출력:

0 10
1 20
2 30
extra undefined

해결책:

for (const value of arr) {
  console.log(value);
}

3. 오류 예제 3｜undefined 값 처리

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

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

해결책:

for (const key in obj) {
  const value = obj[key] ?? "Default value";
  console.log(key, value);
}

요약

  • 프로토타입 속성 문제: hasOwnProperty() 사용.
  • 배열 처리: for…of 또는 forEach 선호.
  • undefined 값 처리: 기본값 할당.

7. for…in 문과 대안 접근 방식의 성능 테스트

1. 성능 비교

for…in:

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys():

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. 비교 결과 예시

for...in: 0.015ms
Object.keys: 0.005ms

3. 권장 접근 방식

  • 객체 처리: Object.keys() 권장.
  • 배열 처리: for…of 또는 forEach가 더 빠르고 안전함.

요약

  • for…in 문은 편리하지만, 성능과 안전 요구사항에 따라 적절한 구문을 선택해야 합니다.

8. 요약｜for…in 문 이해와 다음 단계

1. 이 기사의 주요 요점

  1. for…in 문의 기본 구문과 목적:
  • 객체의 속성 이름을 반복하는 데 사용.
  • 배열이 아닌 객체 키 처리에 특화됨.
  1. 배열과 함께 사용할 때 중요한 고려사항:
  • 순서가 보장되지 않으며, 프로토타입 체인 속성이 열거될 수 있음.
  • 배열 처리의 경우 for…of 또는 forEach() 권장.
  1. for…in과 for…of의 차이:
  • for…in: 속성 이름(키) 열거.
  • for…of: 배열과 반복 가능한 객체의 값을 직접 처리.
  1. 고급 사용법과 모범 사례:
  • 재귀를 사용한 중첩 객체 처리.
  • hasOwnProperty() 를 사용한 프로토타입 상속 제외.
  • Object.keys() 및 Object.entries() 같은 대안을 통한 성능과 안전성 향상.
  1. 성능 최적화:
  • Object.keys() + forEach() 는 순서를 보장하고 더 나은 성능을 제공하므로 for…in의 대안으로 권장됨.

2. 자주 묻는 질문에 대한 답변

Q1. for…in 문을 피해야 할까요?

  • A: 객체 속성 열거에는 적합하지만, 배열이나 성능이 중요한 작업의 경우 for…of 또는 Object.keys() 같은 다른 접근 방식이 더 안전하고 효율적입니다.

Q2. 프로토타입 속성 열거 문제는 항상 발생하나요?

  • A: 네. 사양에 따라 프로토타입에서 상속된 속성이 포함됩니다. 이를 피하려면 hasOwnProperty() 를 사용해야 합니다.

Q3. 배열과 객체에 따라 최적의 루프는 무엇인가요?

  • A:
  • 객체: for…in 또는 Object.keys() 사용.
  • 배열: for…of 또는 forEach() 사용.

3. 다음 단계｜더 공부할 주제

  1. 반복 가능 객체와 반복자:
  • Map, Set, WeakMap, WeakSet 같은 데이터 구조와 이를 처리하는 루프 구성.
  1. 고차 함수를 사용한 데이터 조작:
  • map(), filter(), reduce() 의 사용법과 실전 예시.
  1. 고급 객체 및 배열 기법:
  • Object.values() 및 Object.entries() 를 사용한 데이터 처리.
  1. 현대 JavaScript 기능:
  • 스프레드 연산자와 구조 분해 같은 ES6+ 기능의 간결한 구문.
  1. Promise / Async / Await를 사용한 비동기 처리:
  • 데이터 가져오기와 동적 객체 조작을 포함한 실시간 처리에 이러한 개념 적용.

4. 결론｜JavaScript 루프 처리 마스터하기

이 기사는 JavaScript for…in 문에 초점을 맞춰 기본 사용법부터 고급 예시, 함정, 대안 접근 방식까지 다루었습니다.

가장 중요한 포인트:

  • for…in 문은 객체 속성을 열거하는 데 적합하지만, 배열 처리나 성능이 중요한 상황에서는 대체 접근 방식을 선택해야 합니다.
  • 오류와 예상치 못한 동작을 방지하려면 코드를 작성할 때 항상 모범 사례와 안전 조치를 따르는 것이 필수적입니다.

다음 단계로 나아가세요!
이 기사에서 소개된 대체 접근 방식과 고차 함수에 대한 이해를 심화시켜 JavaScript 실력을 한 단계 끌어올리세요.

広告