JavaScript_for...of 반복문

🙋🏻‍♀️·2022년 4월 10일
0

✔️for...of 반복문

//기존에 우리가 배웠던 for문
let influencer = ['미미여고', '좋은희', '콩빈', '타코사마'] 

for ( let i = 0; i < influencer.length; i++) {
  console.log(influencer[i]);
}
//미미여고
좋은희
콩빈
타코사마

✍️변수 i를 만들어서 배열의 길이를 조건식으로 확인하고(부등호부분) 인덱스로 활용한 다음에
1씩 증가시켜주는 과정 거침.


🔹for...of문으로 바꿔보기

let influencer = ['미미여고', '좋은희', '콩빈', '타코사마'] 

for (let element of influencer) {
  console.log(element);
}
//
"미미여고"
"좋은희"
"콩빈"
"타코사마"

✍️이 배열에 길이만큼 반복하는데 반복할때마다 이 배열의 요소가 변수에 할당됨.
(let다음 element가 콘솔에 있는 element에 하나씩 할당.)


🔹for...in문으로 알아보기

(❗배열에는 사용하지 않을것을 권장함.객체에서 사용하길)

let influencer = ['미미여고', '좋은희', '콩빈', '타코사마'] 
for(let index in influencer) {
  console.log(influencer[index]);
}
//
"미미여고"
"좋은희"
"콩빈"
"타코사마"




📢실습과제

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

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

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

코드를 잘 작성했다면, 다음과 같은 결과가 출력되어야 합니다.
{ '이재식': 17, '이규하': 23 }

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

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

// votes 배열을 이용해서 voteCounter 객체를 정리하기⭐⭐⭐

  // 코드를 작성하세요.
for (let name of votes) {
 if ( name in voteCounter ){
   voteCounter[name] += 1;
 } else {
   voteCounter[name] = 1;
 }
}
}

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

✍️문제 풀이...

이 과제에서는 votes 에 있는 이름의 총 개수를 세야 합니다.

반복문 안의 조건문을 해석해보면,

if name in voteCounter, 즉 어떤 이름이 voteCounter 에 있으면 voteCounter[name] += 1 을 하라는 의미입니당.

그러므로 만약 이재식이라는 이름이 원래 하나 있었다면 {'이재식': 2} 가 될 것입니당.

그리고 else 문은 if name in voteCounter 에 해당하지 않는 나머지 경우니까, 어떤 이름이 voteCounter 에 없으면 실행될 것입니다.

없으면 voteCounter[name] = 1, 즉 이재식이라는 이름이 없다면 {'이재식': 1} 을 만들라는 이야기지용.

votes 의 첫번째 요소인 이재식을 예로 들어볼게용. 지금 voteCounter 는 비어 있는 상태입니다. 그렇다면 여기서 {'이재식': 0} 이 되는게 맞을까요? 아니면 {'이재식': 1}이 되는게 맞을까용?

이재식이라는 이름이 한번 count 되었으니 {'이재식': 1} 이 되는게 맞을 것입니당. 즉 처음 등장하는 이름이라면

{'이재식': 1} 과 같이 되야 하는 것이죵. 이걸 else 문에서 정의하고 있는 것입니다. if 문에서 name in voteCounter, 다시 말해 voteCounter 에 이름이 있는경우를 가정하므로 else 에서는 이름이 없는 경우를 가정하는 것이죵.

그리고 만약 이재식이라는 이름이 votes 에 있다면, 즉 name in voteCounter 라면 {'이재식': 1} 에서 value 값에 1을 더해 {'이재식': 2}를 만들어주는 것이구용.

0개의 댓글