TIL | 객체 안의 객체 접근, 객체 안의 배열 접근

1. 객체 안의 객체 접근

객체 안의 객체는 중첩된 객체라고 한다. 영어로는 Nested Object이다. 중첩된 객체에 접근하는 방법은 객체를 접근하는 방법과 마찬가지로 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 사용하면된다.

예제) myStorage 객체의 속성에 접근하여 trunk 프로퍼티의 값 출력하기

let storageCar = 'car'
let storageOutside = 'outside'
let storageTrunk = 'trunk'

let myStorage = {
    "car": {
      "inside": {
        "glove box": "maps",
        "passenger seat": "crumbs"
       },
      "outside": {
        "trunk": "jack"
      }
    }
  }

// 점 표기법
console.log(myStorage.car.outside.trunk)
//jack

// 대괄호 표기법 1. 문자열로 접근
console.log(myStorage['car']['outside']['trunk']
//jack
            
// 대괄호 표기법 2. 변수로 접근
console.log(myStorage[storageCar][storageOutside][storageTrunk]
//jack        

어떤 표기법을 사용하는 것이 좋은가?

• 점 표기법의 장점: 사용하기 쉽다, 가독성이 좋다.

• 점 표기법의 단점: 식별자로 동작한다는 한계가 있다. (대소문자 구분, 숫자로 시작할 수 없음, 공백 허용 안함 등) 변수로 접근할 수 없다.

• 대괄호 표기법의 장점: 변수로 접근할 수 있다. 숫자, 공백이 있어도 상관 없다.

• 대괄호 표기법의 단점: 점 표기법 보다 복잡하다.

결론 적으로 기본적으로 빠르게 작성할 수 있는 점 표기법을 사용하되 상황에 따라 대괄호 표기법을 사용하는 것이 좋다.

2. 객체 안의 배열 접근

배열의 속성에 접근할 때 인덱스를 활용했다. 하지만 객체에는 순서가 없기 때문에 인덱스를 활용할 수 없다. 그렇다면 객체에 있는 배열에 접근할 수 있는 방법은 무엇이 있을까?

간단하다, 배열을 접근하는 방식과 객체를 접근하는 방식을 혼합해서 사용하면 된다.

예제1) accessArray 함수의 리턴 값이 "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;
}

console.log(accessArray())
// pine

코드리뷰👀✨

• 예제에서 myPlants 변수는 배열 안에 객체가 있는 형식으로 주어졌다.
• "pine"은 배열 myPlants의 [1]번 째 인덱스에 할당된 객체에 list라는 프로퍼티의 [1]번 째 value이다.
• 먼저 foundValue라는 변수를 선언하고
• let foundValue = myPlants[1] -> 배열 myPlants의 [1]번 째 인덱스에 먼저 접근한다.
• let foundValue = myPlants[1].list -> 점 표기법을 활용해 객체 안의 list 프로퍼티에 접근한다.
• let foundValue = myPlants[1].list[1] -> 리스트의 값이 배열로 되어 있기 때문에 인덱스로 접근한다.

위의 예제를 통해 객체를 접근하는 방식과 배열에 접근하는 방식을 혼합해서 사용할 수 있는 것을 확인할 수 있다.

예제2) getAnswer 함수가 아래의 객체에서 '샐러드' 라는 값을 출력하도록 하시오.

let myProfile = {
    name: '정세영',
    address: {
      email: 'geabal@gmail.com',
      home: '위워크'
    },
    'my favorite': {
      food: [{
      name: '샐러드',
      price: 3500
      }, 
      { name: '삼겹살',
        price: 15000
      }],
      hobby: '농구'
  }
};

function getAnswer() {
  let result = myProfile['my favorite'].food[0].name;
  
  return result;
};

console.log(getAnswer());
//샐러드