for... in

for ( variable in [object | array] ) {
    statement
}

Executes one or more statements for each property of an object, or each element of an array.

Iterates over the enumerable properties of an object, in arbitrary order. For each distinct property, statements can be executed.

(객체의 열거형 속성들을 모두 적절한 순서에 의해 반복하게 한다. 각 속성은 주어진 문장을 실행할 수 있다.)

The for...in statement iterates over all non-Symbol, enumerable properties of an object.

for ... in 루프는 열거 가능한 non-Symbol 속성을 반복합니다. Array 및 Object와 같은 built-in 생성자에서 만든 객체는 String의 indexOf() 메서드 또는 Object의 toString() 메서드와 같이 Object.prototype 및 String.prototype의 열거 할 수없는 속성을 상속받습니다. 루프는 객체 자체의 모든 열거 가능 속성과 객체가 생성자의 prototype(prototype 체인의 객체에 가까운 속성은 prototype의 속성보다 우선함)에서 상속되는 객체에 대해 반복됩니다.

삭제, 추가 또는 수정 속성

for ... in 루프는 임의의 순서로 객체의 속성을 반복합니다(적어도 크로스 브라우저 설정에서 반복의 질서 정연성에 의존 할 수없는 이유에 대한 자세한 내용은 delete 연산자를 참조하십시오).

한 반복에서 속성을 수정한 다음 나중에 방문한 경우 루프의 값은 나중에 해당 값이됩니다. 방문하기 전에 삭제된 속성은 나중에 방문하지 않습니다. 반복이 발생하는 객체에 추가된 속성은 방문하거나 반복에서 생략 될 수 있습니다.

일반적으로 현재 방문중인 속성 이외의 반복 중에 객체에서 속성을 추가, 수정 또는 제거하지 않는 것이 가장 좋습니다. 추가된 속성을 방문할지, 수정된 속성(현재 항목이 아닌)이 수정되기 전후에 방문되는지 여부 또는 삭제된 속성이 삭제되기 전에 방문되는지 여부는 보장되지 않습니다.

Array 반복 및 for ...in

주 : for ... in은 인덱스 순서가 중요한 Array를 반복하는데 사용하면 안됩니다.

Array 인덱스는 정수 이름을 가진 열거 가능한 속성이며 일반 개체 속성과 동일합니다. for ...in가 특정 순서로 인덱스를 리턴한다는 보장은 없습니다. for ... in 루프 문은 정수가 아닌 이름과 상속된 이름을 포함하여 열거 가능한 모든 속성을 반환합니다.

반복의 순서는 구현에 의존하기때문에, 배열을 반복 처리하면, 일관된 순서로 요소를 방문하지 않게 될 가능성이 있습니다. 따라서 액세스 순서가 중요한 배열을 반복 할 때는 숫자 인덱스(또는 Array.prototype.forEach() 또는 for ... of 루프)가 있는 for 루프를 사용하는 것이 좋습니다.

자신의 속성에 대해서만 반복

prototype이 아닌 객체 자체에 연결된 속성만 고려하려면 getOwnPropertyNames()를 사용하거나 hasOwnProperty() 검사(propertyIsEnumerable도 사용할 수 있음)를 수행하십시오. 또는 외부 코드 간섭이 없다는 것을 안다면 체크 메소드를 사용하여 built-in prototype을 확장 할 수 있습니다.

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

for (const prop in obj) {
  console.log(`obj.${prop} = ${obj[prop]}`);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

var triangle = {a: 1, b: 2, c: 3};

function ColoredTriangle() {
  this.color = 'red';
}

ColoredTriangle.prototype = triangle;

var obj = new ColoredTriangle();

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

// Output:
// "obj.color = red"