[JavaScript] 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

이 스터디 코드에 접근하기 위해서는 Replit에서 풀었던 문제로 예시 들었다.

객체란(Object)?

 let myDog = {
    name: 'jang-gun',
    legs: 4,
    tails: 1
  }

 

< 객체에 접근하는 방법은 >

특정한 property에 key를 이용해서 value에 접근하는 것이다.

 

객체 속성 접근 [ Dot Notation ]  -> .  이용하기

function dotNotation() {
  // 아래의 코드는 수정하지 마세요.
  let testObj = {
    "hat": "ballcap",
    "shirt": "jersey",
    "shoes": "cleats"
  };

  // 아래의 코드를 수정해주세요.
  let hatValue = testObj;
  let shirtValue = testObj;
  
  hatValue = testObj.hat; // .hat 접근
  shirtValue = testObj.shirt; // .hat 접근
  
  // 아래의 코드는 수정하지 마세요.
  return hatValue + ' ' + shirtValue;
}

-> 변수 hatValue의 값으로 "hat" property의 value값을 할당한 것.

-> 변수 shirtValue의 값으로 "shirt" property의 value값을 할당한 것.

 

 

객체 속성 접근 [ Bracket Notaion ] -> [ ] 대괄호 이용하기

function bracketNotation() {
  // 아래의 코드는 수정하지 마세요.
  let testObj = {
    "an entree": "hamburger",
    "my side": "veggies",
    "the drink": "water"
  };

  // 아래의 코드를 수정해주세요.
  let entreeValue = testObj;
  let drinkValue = testObj;

  entreeValue = testObj['an entree']  // ['an entree'] 추가
  drinkValue = testObj['the drink']  // ['the drink'] 추가
  
  // 아래의 코드는 수정하지 마세요.
  return entreeValue + ' ' + drinkValue;
}

-> 변수 entreeValue의 값으로 "an entree" property의 value값을 할당한 것

-> 변수 drinkValue의 값으로 "the drink" property의 value값을 할당한 것.

여기까지는 쉽다. 객체 안의 여러 코드들이 들어있는 가운데 어떻게 접근해야 할까?

 

객체 안의 객체 접근

myStorage 객체의 속성에 접근하여 glove box 프로퍼티의 값을 변수 gloveBoxContents에 대입하는 문제!

function accessObject() {
  // 아래의 코드를 수정하지마세요.
  let myStorage = {
    "car": {
      "inside": {
        "glove box": "maps",
        "passenger seat": "crumbs"
       },
      "outside": {
        "trunk": "jack"
      }
    }
  };
  
  // 아래의 코드를 수정해주세요.
  let gloveBoxContents = myStorage.car.inside["glove box"]
  // 아래의 코드를 수정하지마세요.
  return gloveBoxContents;
}

 

일단, myStorage 객체 안의 car라는 key값이 있고, car 안의 "inside"와 "outside"로 나뉘어져 있는 걸 볼 수 있다. "glove box"라는 key값은 inside안의 있으므로, 

우리가 찾아야 하는 건 gloveBoxContents = myStorage.car.inside["glove box"] 라고 적을 수 있다.

 

객체 안의 배열 접근

함수의 리턴값이 "pine" 이 될 수 있도록 해주세요.

function accessArray() {
  //아래의 코드는 수정하지마세요.
  let myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ]
    }
  ];
  
  // 아래에 코드를 작성해주세요.
  let foundValue = myPlants[1].list[1]
  // 아래의 코드를 수정하지마세요.
  return foundValue;
}

우리가 찾아야 하는 "pine"은 일단 myPlants 객체 안에 type: "flowers"와 type: "trees" 중에 2번째 속한 곳으로 들어가야 하기 때문에 myPlants[1]이 나올 수 있는 것이고,

그 상태에서 key값이 type이 아닌 list객체를 찾되, list안의 2번째 속하는 것이 "pine"이므로 myPlants[1].list[1] 라고 적을 수 있다.

 

이처럼, 배열의 모양이나 객체 안의 무엇이 있는지 잘 살펴본다면 접근할 수 있을 것이다.!!!