for of

• 반복 가능한 객체에서 사용할 수 있는 반복문

• 배열같은 순환이 필요한 요소를 일반 for 문보다 실용적으로 작동하는 반복문입니다.

• IE 환경에선 지원하지 않으므로, 사용전에 지원하는 브라우저를 확인 하세요.

let array = ['apple', 'banana', 'kiwi', 'blueberry', 'orange']

for(let sub of array) {	// array 배열안에 있는 요소를, sub 라는 변수가 출력하게 됩니다.
 	console.log(sub);	// 'apple', 'banana', 'kiwi', 'blueberry', 'orange'
}


/* 
for of 대신 일반 for문을 사용하면 아래처럼 가독성이 좋지않게 작성했을 것 입니다.

for(let i = 0; i<array.length; i++){
	console.log(array[i]);	
}
*/

1.1 2중 배열에서 사용하는 경우

let array = [
  ['apple', 'banana', 'kiwi', 'blueberry', 'orange'],
  ['사과', '바나나', '키위', '블루베리', '오렌지']
];

for (let sub of array) {	
  for (let sub2 of sub ){	// sub에 있는 모든 요소를 각각 출력합니다.
    console.log(sub2);
  }
}

/* 
apple
banana
kiwi
...~ 생략
키위
블루베리
오렌지
*/

1.2 문자열에서 사용

for(let string of 'hello word'){
	console.log(string);
}

/* 
h
e
l
l
o
 
w
o
r
d
*/

1.3 객체에서는 사용 할 수 없다.

let obj = {
  name : '철수',
  age : 24,
  area : 'seoul'
}

for(let sub of obj){
  console.log(sub);	// 출력되지 않음
}

객체는 왜 안되나요?

• 객체는 맞지만, 반복 가능한 객체가 아니기 때문에 for..of 반복문에서 사용할 수 없다.

• 객체에서 반복문을 사용하려면 for..in 반복문을 사용해서 요소를 출력할 수 있다.

2.1 for..in 반복문

const testScore = {
  '철수' : 72,
  '영희': 80,
  '맹구': 0,
  '짱아': 99,
  '짱구': 100
}

for (let print in testScore) {
  console.log(`${print} score : ${testScore[print]}`);
}

/*
철수 score : 72
영희 score : 80
맹구 score : 0
짱아 score : 99
짱구 score : 100

for..in 반복문으로는 객체를 순환할 수 있다.
*?

2.2 Object.keys

• 객체를 순환할 수 있는 메서드.

• 객체에 대한 키를 가져와서 배열로 출력한다.

const testScore = {
  '철수' : 72,
  '영희': 80,
  '맹구': 0,
  '짱아': 99,
  '짱구': 100
}

console.log(Object.keys(testScore));

/* 
[ '철수', '영희', '맹구', '짱아', '짱구' ]

객체에 대한 키가 배열로 출력됩니다.
*/

2.3 Object.values

• 객체를 순환하는 메서드.

• 객체에 키에 대한 값을 가져와서 배열로 출력한다.

const testScore = {
  '철수' : 72,
  '영희': 80,
  '맹구': 0,
  '짱아': 99,
  '짱구': 100
}

console.log(Object.values(testScore));

/* 
[ 72, 80, 0, 99, 100 ]

객체에 대한 키가 배열로 출력됩니다.
*/

2.4 entries

• 객체를 순환하는 메서드.

• 키와 쌍으로된 객체를 배열로 출력합니다.

const testScore = {
  '철수' : 72,
  '영희': 80,
  '맹구': 0,
  '짱아': 99,
  '짱구': 100
}

console.log(Object.entries(testScore));


/*
[
  [ '철수', 72 ],
  [ '영희', 80 ],
  [ '맹구', 0 ],
  [ '짱아', 99 ],
  [ '짱구', 100 ]
]

객체에 대한 키와 값을 매핑해서 배열로 만들어 출력한다.
*/

⭐ Object.Method()

해당 메서드들은 객체에 대한 배열을 생성하는 메서드입니다.

2.5 Object 메서드를 이용해서 객채에 for..of 반복문 사용하기

/* (1) 객체에 대한 총합 구하기 */

const testScore = {
  '철수' : 72,
  '영희': 80,
  '맹구': 0,
  '짱아': 99,
  '짱구': 100
}

let sum = 0;
for(let key of Object.values(testScore)){
 	sum += key; 
}

console.log(sum);	// 결과 : 351

/*
Object 메서드는 객체에 대한 배열을 생성해주기 때문에, for..of 반복문을 사용할 수 있습니다.

key 변수는 testScore 객체에 대한 값만을 저장하기에 sum 변수에 반복문이 돌아갈 때 마다 key 값을
더해주면 객체 값에 대한 총 값이 출력 됩니다.
*/


/* (2) 객체에 대한 평균 구하기 - 위에 변수 그대로 사용해서 진행 */

let sum = 0;

for(let key of Object.values(testScore)) {
  sum += key;
}

console.log(sum/Object.keys(testScore).length);	// 결과 70.2


/* 
Object 메서드는 객체를 배열로 생성하기에, length 메서드를 사용해서 배열의 길이를 확인할 수 있다.
객체에 총합을 / 배열의 길이로 나누면, 평균이 구해집니다. 

351 / 5 = 70.2
*/