[JavaScript] for in과 for of

for ...in 문

for ...in 문은 열거가능한 모든 속성을 반복한다. 이 때 상속된 속성도 같이 접근하게 된다. 여기서 두 가지의 특징이 나타난다.

첫 번째로는 상속된 속성에 접근 가능하다는 점과 두 번째로는 열거 가능한 속성을 반복한다는 점이다. 주로 객체의 속성에 접근할 때 사용한다. 

 

상속된 속성에 접근 가능

const javaScript = {
  creator: 'Brendan Eich',
  createAt: '1995.05',
  standardName: 'ECMAScript',
  currentVersion: 2024,
};

Object.prototype.nickName = 'tiger'; // 최상위 객체인 Object에 nickName이라는 프로퍼티 할당

 

위 코드에서 javaScript 객체의 속성은 4개이다. 하지만 for in 문을 이용해 javaScript를 출력한다면 어떻게 될까?

 

 

다음과 같은 결과가 나오게 된다. 여기서 nickName은 분명히 javaScript의 속성이 아닌데 출력이 되는 상황이 나타난다. 이는 nickName이 javaScript의 조상 즉, Object에 직접 주입했기 때문에 Object의 하위 객체인 javaScript에서도 출력이 되는 것이다. 

 

이를 막기 위해서 hasOwn(obj, key) 메서드를 사용한다. 위 메서드는 인자로 들어간 객체안에 해당 키가 있는지를 확인한다. 따라서 for ...in으로 전체 요소를 출력한 뒤 조건문을 이용해 키가 있다면 출력을 한다거나 이런식으로 사용이 가능하다. 

for (const key in javaScript) {
  if (Object.hasOwn(javaScript, key)) {
    console.log(key);
  }
}

 

1. 모든 속성을 반복함 (이 때 부모요소의 속성이 같이 나올 수 있음)

2. 객체가 가진 속성만을 확인 한 뒤 있다면 출력

 

열거 가능한 속성

enumerable : 열거 가능한

for ...in 문은 열거 가능한 속성에 접근이 가능하다. 모든 속성은 enumerable의 기본값이 true이기 때문에 for in을 사용했을 때 나올 것이다. 하지만 이미지와 같이 어두운 색상의 속성은 모두 열거 불가능한 속성이다. 

우리가 직접 속성을 할당할 때 열거 불가능하도록 만들기 위해서는 아래 코드를 사용할 수 있다.

Object.defineProperty(객체, 속성, {
	// 열거형이 아닌 속성 
})

// ex
Object.defineProperties(obj, {
  age: {
    value: 30,
    enumerable: true,	// 열거 가능하도록 변경
    writable: false,	// readOnly
    configurable: false,// 삭제 불가
  },
  email: {
    value: 'audwognl@naver.com',
  },
});

위와 같이 지정한 속성은 열거 불가능하게 생성된다. 위에서는 email속성을 위와 같이 설정했기 때문에 열거 불가능한 속성이 되고, for ...in 문에 나오지 않게 된다. 

 

 for ...of 문

for of문은 반복 가능한 속성에 접근 가능하다. 따라서 배열에 사용하기 유용하다. 이 때 객체에서도 for of 문을 사용하기 위해 객체를 배열로 바꾸는 등 여러 가지 방법으로 for of를 사용한다. 

 

Object.keys => 객체의 키만 모아 배열로 만들어줌

Object.values => 객체의 값들만 모아 배열로 만들어줌

Object.entries => 객체의 키, 값을 한 쌍의 배열로 총 2차배열을 만들어줌

 

위 메서드를 이용해 배열을 반환 받고 배열을 for of에 넣는 식으로 사용할 수 있다. 

 

 

iterable : 반복 가능한