[JS] for in 문 & for of 문, 반복문

 

 

💡 for in : 객체 안에 프로퍼티들을 가지고 하나씩 반복적인 동작을 수행할 때 사용

❌ 배열에선 사용 ❌

for(변수 in 객체) {
  동작부분;
}

let aoto = {
  name: "yae",
  age: 20,
  isVeryNice: true,
};

for (let item in aoto) { // item : 프로퍼티 네임, aoto :실행할 객체
  console.log(item); // 프로퍼티 네임을 가져옴
  console.log(aoto[item]); // 프로퍼티 값을 가져옴
}

// name
// yae
// age
// 20
// isVeryNice
// true

 

❗️ 주의) 객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고,

나머지 프로퍼티들은 추가한 순서대로 정렬한다!

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초',
};

for (let key in myObject) {
  console.log(myObject[key]);
}

// 자바스크립트 프로그래밍 기초
// 알고리즘의 정석
// 컴퓨터 개론

 

➕ 정수형 프로퍼티 네임

따옴표로 감싸거나 감싸지 않아도 자동 정렬이 되고, 콘솔로만 찍어도 정렬이 되어 있다.

일반적으로 잘 사용하지 않는다.

let myObject = {
  3: '정수3',
  name: 'aoto',
  1: '정수1',
  birthDay: '2018.8.28',
  2: '정수2',
};

for (let key in myObject) {
  console.log(key);
}

// 1
// 2
// 3
// name
// birthDay

console.log(myObject)
// {1: "정수1", 2: "정수2", 3: "정수3", name: "aoto", birthDay: "2018.8.28"}

 

➕ 숫자형(양수) 프로퍼티 네임

이런 숫자(양수)로도 key 설정 가능!

하지만 문자열로 형 변환이 되고, 대괄호 표기법으로만 접근 가능

let myObject = {
  800: '정수',
  1.5: '소수',
};

for (let key in myObject) {
  console.log(`${key}의 자료형은 ${typeof key}입니다.`);
}

// 800의 자료형은 string입니다.
// 1.5의 자료형은 string입니다.

console.log(myObject['800']);
console.log(myObject['1.5']);
console.log(myObject.800); // Error!
console.log(myObject.1.5); // Error!

 

 

➕ 활용 ~

aoto와 yae의 총 점수가 60점이 넘으면 합격, 넘지 않으면 불합격 반환!

let aotoScore = {
	'국어': 60,
	'수학': 80,
};

let yaeScore = {
	'국어': 40,
	'수학': 10,
};

function passChecker(scoreObject) {
  let score = 0;

  for(let key in scoreObject){
    score += scoreObject[key]
  }
  
  if(score >= 60) {
    console.log("축하합니다! 합격입니다!")
  } else {
    console.log("아쉽지만 불합격입니다..")
  }
}

passChecker(aotoScore);
passChecker(yaeScore);

// 축하합니다! 합격입니다!
// 아쉽지만 불합격입니다..

 

💡 for of : 배열 안에 요소들을 가지고 하나씩 반복적인 동작을 수행할 때 사용

⭕️ 배열에서 사용 ⭕️

for(변수 in 객체) {
  동작부분;
}

let name = ["aoto", "yae"]

for(let element of name) { // element : 배열의 요소, name : 배열
  console.log(element)
}

// "aoto"
// "yae"

 

➕ 활용 ~

투표 결과 리스트인 배열 votes 를 토대로, 객체 voteCounter 에 후보별 득표수를 정리해보자!

voteCounter 가 처음엔 빈 객체이기 때문에 두 가지 경우를 고려해야 한다.

1. voteCounter[name] 프로퍼티가 없는 경우

2. voteCounter[name] 프로퍼티가 있는 경우

 

없다면 새 프로퍼티를 만들고, 있다면 1씩 증가시켜준다.

let votes = [
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이재식', '이재식', '이규하', '이규하', '이재식',
  '이규하', '이규하', '이규하', '이규하', '이재식',
  '이재식', '이규하', '이재식', '이재식', '이재식',
  '이재식', '이재식', '이규하', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이규하', '이재식', '이규하', '이규하',
  '이규하', '이재식', '이재식', '이재식', '이규하',
];

let voteCounter = {};

for (let name of votes) {
  if (name in voteCounter) {
    voteCounter[name]+= 1; // 프로퍼티가 있는 경우
  } else {
    voteCounter[name] = 1; // 프로퍼티가 없는 경우
  }
}

console.log(voteCounter); // { '이재식': 17, '이규하': 23 }