[JavaScript] Looping Through Objects

안녕하세요. 동기 여러분! 오늘은 객체(Object)에서 반복문을 뽑아오는 방법에 대해 알아봅시다. 쓰임이 참 많은 친구이기 때문에 제대로 알아봅시다.

 

Looping Through Objects

우리가 걸어놓은 조건을 통해 반복문은 계속 실행이 되는데 이걸 배열(Array)에서 쓰는 방법을 알아봤었습니다.

혹시 기억이 안 나 시는 분은 이쪽으로 -> https://dongi-coding.tistory.com/37

[JavaScript] Looping through Arrays

배열(Arrays)에서는 인덱스 번호가 있었기 때문에 아주 손쉽게(상위 링크 포스팅 내용이 짧다는 게 쉬운 것을 증명함) 반복문을 만들 수가 있었습니다. 하지만 객체(Object)에서 Key와 Value는 인덱스로 정리되어 있지 않습니다. 그럼에도 불구하곸ㅋ for... in 반복문으로 몇 가지만 다르게 넣어주면 배열에서 쓴 반복문처럼 쉽게 사용할 수 있습니다.

 

---

 

생김새

// JavaScript

let kimbabs = {
    tunaKimbab : {
        ingredient : '김, 밥, 참치, 마요네즈, 깻잎, 계란, 단무지'
    },
    ordinaryKimbab : {
        ingredient : '김, 밥, 햄, 당근, 계란, 우엉, 단무지'
    }
};

for (let kimbab in kimbabs) {
	console.log(`${kimbab}에는 ${kimbabs[kimbab].ingredient}가 들어갑니다.`);
};

/* 출력 :tunaKimbab에는 김, 밥, 참치, 마요네즈, 깻잎, 계란, 단무지가 들어갑니다.
ordinaryKimbab에는 김, 밥, 햄, 당근, 계란, 우엉, 단무지가 들어갑니다. */

kimbabs이란 객체에 2개의 프로퍼티가 있는데 (tunaKimbab과 ordinaryKimbab) 그들의 벨류(value) 값이 ingerdient로 들어가고 다시 ingredient의 value값으로 '김, 밥, 참치, 마요네즈, 깻잎, 계란, 단무지'와 '김, 밥, 햄, 당근, 계란, 우엉, 단무지'가 들어가 있습니다.

 

반목 문 for... in을 사용하여 for (let kimbab in kimbabs) 적어주는데 이는 kimbabs라는 객체 안에 있는 value(kimbab)를 반복하겠다' 고로 tunaKimbab과 ordinaryKimbab을 차례대로 빼오겠다는 소리입니다.

 

그리하여 반복문 중괄호 안에 내가 원하는 조건을 적어주는데 '~에는 ~가 들어갑니다'라고 표현하기 위해 `${kimbab}으로 tunaKimbab과 ordinaryKimbab을 당겨오고, 여기서 중요합니다. ${kimbabs[kimbab].ingredient}를 적어주는데 for문에서 선언한 kimbab이라는 변수(variable)는 대괄호 표기법(bracket notation)을 사용하여 적어주어야 합니다.

 

---

예제

디아블로 2의 각 대악마에 대해 객체를 만들고 출력을 해보는 시간을 가져보겠습니다.

 

아래의 내용은 디아블로2 나무 위키를 참조하였습니다.
링크 : https://namu.wiki/w/%EC%95%88%EB%8B%A4%EB%A6%AC%EC%97%98

let diablo2 = {
  greatEvils : {
    '안다리엘' : {
      '이명' : '고뇌의 여제',
      '종족' : '악마',
      '성별' : '여성',
      '소속' : '불타는 지옥, 고뇌의 군대',
      '직위' : '소악마',
      '관계' : '두리엘(남매)',
      '특징' : '옷차림이 ...'
    },
    '두리엘' : {
      '이명' : '고통의 군주, 구더기 왕',
      '종족' : '악마',
      '성별' : '남성',
      '소속' : '불타는 지옥, 고통의 군대',
      '직위' : '소악마',
      '관계' : '안다리엘(남매)',
      '특징' : '잡기 어려운데 템을 잘안줌'
    },
    '메피스토' : {
      '이명' : '증오의 군주, 대악마',
      '종족' : '악마',
      '성별' : '남성',
      '소속' : '불타는 지옥, 증오의 군대',
      '직위' : '대악마',
      '관계' : '바알, 디아블로의 맞형, 벨리알(제자), 릴리트(딸, 디아블로 4의 스토리의 핵심), 라트마(외손자)',
      '특징' : '잡기 쉬운데 템을 잘줌'
    },
    '디아블로' : {
      '본명' : '알 디아볼로스',
      '이명' : '공포의 군주, 대악마',
      '종족' : '악마',
      '성별' : '남성',
      '소속' : '불타는 지옥, 공포의 군대',
      '직위' : '대악마',
      '관계' : '메스스토의 동생, 바알의 동생',
      '특징' : '스토리상 가장 강해야하는 악마지만 나의 햄딘 앞에선... 네팔렘 만세'
    },
    '바알' : {
      '본명' : '토르바알로스',
      '이명' : '파괴의 군주, 대악마',
      '종족' : '악마',
      '성별' : '남성',
      '소속' : '불타는 지옥, 파괴의 군대',
      '직위' : '대악마',
      '관계' : '디아블로의 형, 메피스토의 동생',
      '특징' : '거만하게 웃는 소리에 비해 너무 약함, 잡으러가는 길에 자폭해골이랑 전기지이잉이 더 무서움'
    }
  }
};

 

1. 각 악마의 특징에 대해 뽑아보도록 하겠습니다.

// JavaScript

for (let evil in diablo2.greatEvils) {
  console.log(`${evil}의 특징은 ${diablo2.greatEvils[evil]['특징']}`)
};

/* 출력 : 안다리엘의 특징은 옷차림이 ...
두리엘의 특징은 잡기 어려운데 템을 잘안줌
메피스토의 특징은 잡기 쉬운데 템을 잘줌
디아블로의 특징은 스토리상 가장 강해야하는 악마지만 나의 햄딘 앞에선... 네팔렘 만세
바알의 특징은 거만하게 웃는 소리에 비해 너무 약함, 잡으러가는 길에 자폭해골이랑 전기지이잉이 더 무서움 */

 

2. 각 악마의 본명에 대해 뽑아보도록 하겠습니다.

// JavaScript

for (let evil in diablo2.greatEvils) {
  console.log(`${evil}의 본명은 ${diablo2.greatEvils[evil]['본명']}`)
};

/* 출력 : 안다리엘의 본명은 undefined
두리엘의 본명은 undefined
메피스토의 본명은 undefined
디아블로의 본명은 알 디아볼로스
바알의 본명은 토르바알로스 */

값이 없을 때는 undefined로 나오는 것을 확인할 수 있습니다.

 

---

오늘의 느낌

이게 하다가 보니까 파이썬을 크롤링을 배우던 시절이 생각이 나네요. 허허허