[JavaScript] for...in vs for...of

for in

- 객체의 속성들을 반복적으로 열거하는데 사용한다.

- 주로 특정 값을 가진 키를 구현할 때 사용한다.

- 배열이 아닌 객체의 반복문이므로 일관된 순서로 요소를 방문하지 않을 수 있으니 순서가 중요한 반복문을 구현할 경우 for...of나 forEach()문을 권장한다.

 

 

 

for in의 구문

for (const 변수 in 반복할 객체) {
실행문
}

- 변수는 반복할 때마다 다른 이름을 지정한다.

- 객체는 열거형 속성을 가진 반복을 수행할 객체를 지정한다.

 

 

 

ex

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

for (const i in obj) {
  console.log(i + ':' + obj[i]);
}

/*
a:1
b:2
c:3
*/

 

 

 

ex. 학점 계산하기

const getExamResult = (scores, requiredClasses) => {
  const result = {}
  const list = {
    "A+":4.5,
    "A":4,
    "B+":3.5,
    "B":3,
    "C+":2.5,
    "C":2,
    "D+":1.5,
    "D":1,
    "F":0    
  }
  
  for(let key in scores){
    result[key] = list[scores[key]];          //class 일치하는지 반복
  }
  
  const keys = Object.keys(result)            //keys = property name만 반환한 배열 
  for(let i in requiredClasses){
    if(!keys.includes(requiredClasses[i])){   //Array.includes()로 keys배열이 requiredClasses 요소를 !포함 
      result[requiredClasses[i]] = 0;         //포함하지 않는 건 0 반환
    }
  }
  
  return result;
}

  const scores = {
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+',
}

const requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

console.log(getExamResult(scores, requiredClasses));


/*
{
  '생활속의회계': 2,
  '논리적글쓰기': 3,
  '독일문화의이해': 3.5,
  '기초수학': 1.5,
  '영어회화': 2.5,
  '인지발달심리학': 4.5,
  '공학수학': 0,
  '컴퓨터과학개론': 0
}
*/

 

 

 

 

for of

객체의 value값을 반복적으로 열거하는데 사용한다.

const array = [1, 2, 3, 4, 5]
for (value of array) {
   console.log(value);
}

/*
1
2
3
4
5
*/

 

 

 

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