[JavaScript] Nested Objects

안녕하세요. 동기 여러분! 오늘은 중첩 객체(Nested Objects)에 대해 알아봅시다. 조금 복잡할 수 도 있지만 한번 알아 놓으면 두고두고 써먹을 수 있기 때문에 한번 빡세게 배워봅시다 갑시다!

 

Nested Objects

// JavaScript

let object1 = {
	key1 : value1
        key2 : {
    	   key21 : value21,
      	   key22 : value22,
    	   key23 : value23
    }
};

위 코드를 보면 object1에 키값이 두개가 들어가 있는데 key2에서 중괄호를 한번 더 써서 그 안에서 key21, key22, key23라는 키값을 또 만들어주고 그에 응하는 value값을 넣어줄 수 있습니다. 이게 바로 중첩 객체(Nested Objects)입니다. 

 

---

 

예제

디아블로2의 슴딘(스마이트를 주 스킬로 쓰는 팔리딘)의 주요 스텟과 스킬, 장비를 객체(Object)로 구현해보겠습니다.

let d2SmiterPaladin = {
  stats : {
    strength : '아이템 착용할 정도만',
    dexterity : '홀리 쉴드 켜고 블럭률 75%',
    vitality : '남는거 전부',
    energy : '안찍음'
  },
  skills : {
    'combat skills' : {
      smite : 20,
      'Holy Bolt' : 1,
      Charge : 1,
      'Blessed Hammer' : 1,
      'Holy Shield' : 20
    },
    'offensive auras' : {
      might : 1,
      'blessed aim' : 1,
      concentration : 1,
      fanaticism : 20
    },
    'defensive auras' : {
      defiance : 20,
      salvation : '나머지 모두'
    }
  },
  equipment : {
    '무기' : '마지막소원 (페이즈블레이드 작)',
    '갑옷' : '수수께끼',
    '머리' : '길리엄의 페이스 (움작)',
    '장갑' : '뱀파장',
    '벨트' : '유닉 미스릴 코일',
    '신발' : '고어 라이더 워부츠',
    '방패' : '세타작 망명',
    '아뮬' : '하이로드 또는 마라',
    '링' : '레이븐 프로스트랑 발카서스',
    '참' : {
      '애니참' : '20/20',
      '횃불' : '20/20',
      '맥어레스몰참' : '3맥 20어레 20피',
      '팔라공격스킬참' : '1스킬 45피',
      '팔라공격오라참' : '1스킬 45피'
    },
    '스왑무기' : '콜투',
    '스왑방패' : '세타작 스피릿'
  }
};

짠~ 디아블로2 슴딘 공부도 하고 완전 개꿀입니다. 

 

1. 스탯정보를 모두 알고 싶은 경우 -> 점 표기법(dot notation)을 활용해 구해줍니다.

console.log(d2SmiterPaladin.stats);

/* 출력 : 
{ strength: '아이템 착용할 정도만',
  dexterity: '홀리 쉴드 켜고 블럭률 75%',
  vitality: '남는거 전부',
  energy: '안찍음' } */

 

 

2. 스탯의 에너지(energy)만 알고 싶은 경우 -> 점 표기법(dot notation)을 활용해 구해줍니다.

console.log(d2SmiterPaladin.stats.energy);

// 출력 : 안찍음

 

 

3. 전투스킬의 홀리실드가 알고 싶은 경우 -> 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 활용해 구해줍니다.

console.log(d2SmiterPaladin.skills['combat skills']['Holy Shield']);

// 출력 : 20

 

 

4. 팔라공격스킬참을 알고 싶은 경우 -> 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 활용해 구해줍니다.

console.log(d2SmiterPaladin.equipment['참']['팔라공격스킬참']);

// 출력 : 1스킬 45피

 

 

5. 공격오라의 파나티시즘을 알고 싶은 경우 -> 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 번갈아 써주며 구해줍니다.

console.log(d2SmiterPaladin.skills['offensive auras'].fanaticism);

// 출력 : 20

 

6. 무기를 깊은 고뇌로 바꾸고 싶은 경우

d2SmiterPaladin.equipment['무기'] = '깊은고뇌 (페이즈블레이드 작)';

console.log(d2SmiterPaladin.equipment['무기']);

// 출력 : 깊은고뇌 (페이즈블레이드 작)

'깊은고뇌 (페이즈블레이드 작)'을 d2SmiterPaladin.equipment['무기']에 집어넣어 선언함으로써 수정도 가능합니다.

 

---

 

오늘의 느낌

예제로 많은 경우의 수를 구현하려 노력해 보았습니다. 지겨운 공부 게임과 연관하여 생각하니 너무 재밌고 시간가는줄 모르겠습니다. 허허허 개꿀