for ... of 반복문

for...of 반복문

기본구조

for (변수 of 배열) {
  동작부분;
}

 

for 반목문

let influencer = ['small_tiger', 'big_rabbit', 'red_brown', 'yellow_shoes'];

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

 

-> for ... of 반복문으로 바꾸기

for (let element of influencer) {
  console.log(element);
}

/*
small_tiger
big_rabbit
red_brown
yellow_shoes
*/

 

-> for ... in 반복문으로 바꾸기

for (let index in influencer) {
  console.log(influencer[index]);
}
/*
small_tiger
big_rabbit
red_brown
yellow_shoes
*/

 

실습

태환이는 매년 학생회장 선거 때마다, 투표 집계 도우미 봉사를 하는데요. 작년까지는 표를 손수 세다가, 올해부터는 IT시대에 더 적합한 솔류션을 개발하려고 합니다.

 

자바스크립트 배열 votes에는 학생회 투표 결과가 저장되어 있습니다. 배열 votes의 정보를 토대로, 객체 voteCounter에 후보별 득표수를 정리하는 것이 목표입니다.

 

예를 들어서, votes가 ['장태환', '신성순', '신성순', '장태환', '장태환']라고 가정하면, voteCounter는 {'장태환': 3, '신성순': 2}가 되어야 하는 거죠.

 

// 투표 결과 리스트
let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

// 후보별 득표수 객체
let voteCounter = {};

// votes 배열을 이용해서 voteCounter 객체를 정리하기
for (let name of votes) {
  if (voteCounter[name]) {
    voteCounter[name]++;
  } else {
    voteCounter[name] = 1;
  }

}

// 후보별 득표수 출력
console.log(voteCounter);

 

실습 결과

{ '이재식': 17, '이규하': 23 }