JavaScript(for in/for of)

forEach(Array 전용)

for in (Object 전용)

특징1. object 자료형에 저장된 자료들을 하나씩 출력하고 싶을때 사용

var products = { name : 'Kim', age : 30 };
for (var key in products) {
  console.log(key); // name, age
  console.log(오브젝트[key]); 'kim', 30
}

var products = [ {name1 : 'chair',price1 : 7000,}, 
                 {name2 : 'sofa', price : 5000,}]; 
or (var key in products) {
  console.log(key); // 0,1 
  console.log(오브젝트[key]); // {name1 : 'chair',price1 : 7000,},{name2 : 'sofa', price : 5000,}
}          

특징2. enumerable(셀 수 있는) 것들만 출력 가능

name 이라는 키값에 대한 숨은 정보 확인 코드

console.log( Object.getOwnPropertyDescriptor(오브젝트, 'name') ); 

{value: "Kim", writable: true, enumerable: true, configurable: true} 

특징3. 상속받은 상위 클래스(또는 생성자)의 prototype도 출력

class 부모 {
}
부모.prototype.name = 'Park'; //부모 클래스만 가지는 유전자 속성

var 오브젝트 = new 부모();

for (var key in 오브젝트) {
  console.log(오브젝트[key]);//상속받은 부모의 유전자 속성이 출력 (Park)
}

자신의 오브젝트 값만 출력하고 싶다면? hasOwnProperty 사용.
이 함수는 자신이 직접 가지는 Property가 있는지 확인하는 함수로, 조건문에 작성하여 true일 경우 그 값을 출력하게 한다.
아래의 경우, 오브젝트라는 상속 받은 객체를 출력해보면, age라는 값을 생성자함수로부터 상속 받고, 부모의 프로토타입인 name을 상속받는다고 되어있다. 이때 오브젝트는 age를 가지게 되지만, name을 가지게 되지는 않는다.(name은 온전한 부모의 유전자속성이기 때문)

따라서, 다음과 같은 코드에서는 자신이 갖고 있는 속성인 age속성만 출력된다.

class 부모 {
	constructor(){
    this.age = 30;
    }
}
부모.prototype.name = 'Park';
var 오브젝트 = new 부모();
for (var key in 오브젝트) {
  if (오브젝트.hasOwnProperty(key)) {
    console.log(오브젝트[key]); // 30
  }
}

for of(iterable 전용)

iterable은 '반복이 가능'하다는 뜻으로 String, Array, TypedArray, Map
Set 등이 for of문에 사용가능하다.

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/for...of