TIL#3 - 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법

📌객체에 접근하기 전에 우선 기본적으로 알아두어야할 것들이 있습니다.

구문

obj = {key:value}

객체는 위와 같이 key값과 value값을 가지고 있습니다. 이러한 객체내에는 여러가지 데이터를 한번에 담아서 보낼 수 있고 숫자, 문자열, 함수 등 데이터타입을 모두 담을 수 있습니다. 하지만 value값만을 단독으로 담을 수 없고 어떠한 데이터를 담더라도 key값을 넣어줘야 데이터를 담을 수 있습니다. 아래에 예시 몇가지를 들어서 보여드리겠습니다.

let obj_ex1 = {1, 2}	//expected output Error

obj_ex1) 키값이 없는 객체 내에 value만 단독으로 담을 수 없습니다.

let obj_ex2 = {
	name: "TaeJoon",
	30: "my age",
    first_name:["p","a","r","k"],
    func: function(value){
    	return value
    }
}
//function접근방법
obj_ex2.func(value);

obj_ex2) key값만 지정해 준다면 function, 배열 상관없이 데이터를 담을 수 있습니다.

그럼 이제 선언된 함수의 객체와 배열이 섞인 데이터에 접근하는 방법을 알아보도록 하겠습니다.

예제 구문

let myPlants = [
    {
      type: "flowers",
      list: [
        "rose",
        "tulip",
        "dandelion"
      ]
    },
    {
      type: "trees",
      list: [
        "fir",
        "pine",
        "birch"
      ],
      30: "my age"
    }
  ];

위와 같이 선언된 myPlants의 배열에 크게는 두가지 객체가 담겨져 있습니다.

객체의 접근법에는 Dot Notation과 Bracket Notation 두가지 방법이 있으며 두가지로 배열에 담긴 객체에 접근해 보도록 하겠습니다.

원하는 값이 "flowers"일때

myPlants[0].type //dot notation
myPlants[0]['type'] //bracket notation
//both of expected output: flowers

다음으로 배열내의 객체에 담긴 배열에 접근해 보겠습니다.

원하는 값이 list 배열의 tulip일때

myPlants[0].list[1] //dot notation
myPlants[0]['list'][1] //bracket notation
//both of expected output: tulip

위와 같이 두가지 접근방법으로 모두 접근 가능하지만 차이점은 있습니다. 만약 객체내에 key값이 숫자일경우 dot notation으로는 접근할 수 없지만 bracket notation으로는 접근할 수 있습니다.

ex)

myPlants[1].30 //dot notation expected output: Error
myPlants[1][30] || myPlants[1]['30']
//bracket notation expected output: "my age"

위와 같이 두가지 방법으로 복잡하게 섞인 배열과 객체 내부에 쉽게 접근할 수 있습니다.

✏️객체의 key값으로 숫자도 될 수 있습니다. 하지만 key값의 datatype은 string으로 변환되어 저장이 되기 때문에 해당 key값에 접근시에 bracket notation 대괄호 안에 숫자 or 문자로 모두 사용 가능합니다.