JavsScript 기초 : 객체 3. for~ in 반복문

 

3. for ~ in 반복문

 

for in 반복문은 객체 안에 있는 프로퍼티들을 가지고 반복적인 동작을 수행할 때 사용한다.

 

 

객체의 프로퍼티 네임을 가져오는 반복이기 때문에

일반적인 for문으로는 대체할 수 없다!

 

어떻게 쓰는지 보자!

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

이처럼 특정한 변수를 만들고 반복할 객체를 넣어준다.

그럼

객체의 프로퍼티 네임이 변수에 할당되고 객체의 프로퍼티 개수만큼 반복하여 동작한다.

 

 

3-1. for ~ in 반복문 기초 

 

아주 간단한 예시를 보자.

joSW라는 객체를 만들고 for in 문으로 반복하는 코드이다.

//for in 
let joSW = {
  name: 'yunju',
  bornYear: 2020,
  isVerynice: true,
  bestCourse: 'JavaScript'
}

for (let example in joSW) {
  console.log(example);
}

example라는 변수를 만들었고 in joSW라고 했으니까 

joSW객체의 프로퍼티 개수만큼 반복을 한다.

이 때 example라는 변수에 joSW의 프로퍼티 네임이 

차례대로 전달되는 방식이다.

 

즉

example은 각 프로퍼티 네임이 된다!!

 

(순서에 대한 부분은 아래에서 따로 정리해보자!)

 

그래서 

example을 그대로 출력해보면

각 프로퍼티 네임이 순서대로 출력된다.

 

 

 

 

대괄호 표기법을 활용해서 프로퍼티 값에도 접근할 수 있다. 

//for in 
let joSW = {
  name: 'yunju',
  bornYear: 2020,
  isVerynice: true,
  bestCourse: 'JavaScript'
}

for (let example in joSW) {
  console.log(joSW[example]);       //대괄호로 프로퍼티값에 접근
}

이렇게 

joSW[example] 이라고 입력하였더니

객체의 프로퍼티 값이 쭉 출력된다. 

 

 

3-2. for ~ in 반복문에서 객체 프로퍼티 정렬 순서

 

객체의 프로퍼티 네임으로는 주로 문자가 사용되는데

숫자형이 사용될 수도 있다. 

숫자형을

숫자형(양수), 정수형으로 나눠서 살펴보자. 

 

 

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

myObject라는 변수 이름을 지어주고

300과 1.2라는 프로퍼티 네임을 지어주었다. 

//프로퍼티 네임에 숫자형(양수)를 작성해서 사용한 경우

let myObject = {
  300: '정수',
  1.2: '소수'
};

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

프로퍼티 네임이 숫자형이지만

실제로 사용될때는 문자열로 형 변환이 되어 사용된다. 

이 때 프로퍼티 네임의 자료형을 확인해 보면 

모두 string이다. 

 

이 코드를 실행하면 

300의 자료형은 string입니다.

1.2의 자료형은 string입니다.

 

가 나온다. 

 

또한 프로퍼티 값에 접근할 때에는 점표기법으로 하면

에러가 난다!!!

 

//프로퍼티 네임에 숫자형(양수)를 작성해서 사용한 경우

let myObject = {
  300: '정수',
  1.2: '소수'
};

//프로퍼티 값에 접근할 때는 대괄호표기법을 사용! 점표기법 쓰면 에러난다!
console.log(myObject['300']);
console.log(myObject['1.2']);
console.log(myObject.300) // Error!
console.log(myObject.1.2) // Error!

따라서 대괄호 표기법을 사용해야 한다. 

프로퍼티 값을 실행하면

 

정수

소수

 

점표기법은 에러가 나서 출력이 안된다. 

 

가 나온다.

 

 

2) 정수형 프로퍼티 네임

 

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

나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다.

 

예시를 살펴보자. 

//정수형 프로퍼티 네임 정렬 순서 : '4','3','2'라고 문자열로 써도 결과는 같음!
let myObject = {
  4: '정수4',
  name: 'number',
  3: '정수3',
  birthDay: '2020.9.9',
  2: '정수2'
};

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

이 코드를 실행하면 이렇게 프로퍼티 네임 중 숫자가 오름차순으로 정렬되어 나온다. 

나머지는 추가한 순서대로 정렬된다. 

 

myObject를 콘솔에 출력만해도 정수형 퍼로퍼티에 한해 오름차순 정렬

나머지는 추가한 순서대로 정렬이 된다!!

 

물론 정수형 프로퍼티 네임에 따옴표를 붙여 문자열처럼 만들어도

정렬방식은 같다!!

 

자동으로 오름차순 정렬이 되기 때문에 정수형 프로퍼티는 잘 사용되지 않는다!!!

 

그냥 사용하지 않는걸로....

 

넘 복잡하다. 어쨌든 오름차순 정렬이라는 것!

 

 

 

3-3. for...in문 예시 살펴보기

 

hj의 시험 점수가 hjScore라는 변수에 객체로 묶여 있다.

yj의 시험 점수도 yjScore라는 변수에 객체로 묶여 있다. 

시험 성적을 모두 더해서 총 합이 100점 이상이면 합격이나 아니면 불합격이다.

 

passChecker라는 함수를 만들었고 파라미터로는 scoreObject를 받는다.

이 함수 내부에 for in 문과 if문을 이용해서 코드를 짠다.

//학생들의 시험 성적을 모두 더해 총 합이 100점 이상이면 합격, 아니면 불합격

let hjScore = {
  '수학': 40,
  '과학': 30,
  '국어': 15,
  '영어': 20,
  '사회': 50
};

let yjScore = {
  '수학': 12,
  '과학': 5,
  '국어': 20,
  '영어': 20,
  '사회': 20
};

//scoreObject라는 함수를 만들어보자. totalScore라는 변수 만드는게 핵심
function passChecker(scoreObject) {
  let totalScore = 0;
//for in문 활용
  for (let subject in scoreObject) {
    totalScore += scoreObject[subject];
  }
//if문 활용
  if (totalScore >= 60) {
    console.log('축하합니다! 합격입니다!');
  } else {
    console.log('아쉽지만 불합격이네요.');       
  }
}

passChecker(hjScore);
passChecker(yjScore);

마지막에 함수를 실행시키면 어떤 결과가 나올까?

축하합니다! 합격입니다!

축하합니다! 합격입니다!

 

둘 다 합격이다~! 

 

for in문이 실제로 유용하게 사용되는 것을 보여준다. 

 

하지만 어렵다.ㅠㅠ

 

이 코드에서의 핵심은 funcion passChecker를 만드는 것인데

그 중에서도

1) 파라미터 scoreObject로 프로퍼티 네임들을 받는다는 것!

2) function안에서 totalScore라는 변수를 만들어서

3) totalScore값이 scoreObject[subject]의 누적이 되게 하는 것! 

 

이 3개이다. 

 

function passChecker(scoreObject) {    let totalScore = 0;    for (let subject in scoreObject) {      totalScore += scoreObject[subject];    }

 

코드부분에서는 이 부분이 핵심...

 

넘나 어려운것...

 

for in문은 파라미터 네임을 변수로 받는 다는 것을 기억하자!!!

 

 

 

다음 글에서는 Date객체에 대해 알아보자!