JavaScript 기초 : 배열 4. for ...of 반복문

4. for ... of 반복문 

 

for ...of를 정리하기 전 먼저 예시를 가져왔다. 

 

for of 를 어떻게 쓰는지 보고 for of에 대해 정리해보자.

 

투표 집계 도우미 프로그램이다. 

 

여기서 voteCounter는 후보별 득표수를 알려주는 객체로 만들것이다. 

for of 문을 사용해서

이름이 votes배열에 있는 경우 이름을 나열해 줄거다. 

이 때 이름이 voteCounter 객체에 있다면 

coteCounter[name], 즉 프로퍼티 값을 1 증가시킬거고 

이름이 voteCounter 객체에 없다면

voteCounter[name] 프로퍼티 값은 그대로 1이다.  

// 투표 결과 리스트
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);

결과가 어떻게 나오는지 보자! 

 

 

4-1. for ...of 정리

 

for of의 구조는 for in 문과 비슷하다.

변수를 선언한 다음 of 를 쓰주고 배열을 써주면 된다. 

 

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

이 구조인데 

 

for in 의 경우에는 

변수에 프로퍼티가 들어가지만 

 

 

for of 의 경우에는 

변수에 배열의 요소가 할당이 된다. 

 

 

기존의 for반복문을 사용할 때는 변수 i를 만들어서 배열의 길이를 조건식으로 확인하고 i를 늘려주며 요소들을 출력했는데

 

for of 를 사용하면 이런 번거로운 과정이 필요없다. 

 

변수에 

배열의 요소가 변수에 하나씩 할당된다

라는 것을 머리 속에 확 넣으면 헷갈리지 않는다.

//for ... of
let members = ['유재석', '김종국', '지석진', '하하', '송지효'];

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

 

이처럼 배열의 각 요소를 대상으로 반복적인 작업을 수행할 때에는 for of 문을 활용하는 것이 좋다. 

 

 

배열에 for in문을 사용하는 것도 가능하긴 하나

//for ... of
let members = ['유재석', '김종국', '지석진', '하하', '송지효'];

for (let index in members) {
  console.log(members[index]);
}

"특별한 환경에서는 배열의 메서드나 배열의 length Property같은게 할당되는 경우가 있어

사용하지 말 것을 권장합니다."

 

for in 문이 배열보다는 일반적인 객체에 적합하게 설계된 반복문이라 배열에 쓸 경우 효율성도 떨어집니다.

 

라고 코드잇에서 말해주었다.

 

흠냐 어려움...