📍 객체 'object'

참조형 데이터 타입의 한 종류
여러 종류의 데이터를 중괄호 { } 안에 묶음으로 관리하나 객체를 불렀을 때, 순서대로 값이 나오지 않는다
객체는 관련 데이터를 정리하고 연결을 위해 사용, 저장하기 위한 구조로 코드의 유지보수가 용이

	let obj = { key: value, key1:value2 }

' obj ' 이라는 객체에는 ' key '와 ' key '에 해당하는 데이터인 ' value '가 있다.
' key '와 ' value ' 쌍으로 구성되어 프로퍼티 (' property ') 라고 한다.
' key '를 이용해서 ' value ' 에 접근한다.
'중괄호 { } 를 이용해 객체를 선언하는 것이 '객체 리터럴 (object literal) 이라고 한다.

📌 객체의 프로퍼티 'property'

객체의 property로써 또 다른 객체, 배열, 숫자, 문자 다 들어 갈 수 있다
콜론(:)을 기준으로 왼쪽에는 key, 오른쪽에는 값(value)

	let myself = {
    name: 'Emily', // 문자열
    food: { favorite: 'pork belly',
 	    dislike: 'cilantro'}, // 또 다른 객체
    color: ['red','yellow'], // 배열
     lipstick : 3 // 숫자
    }

📌 객체 접근

객체의 데이터 'value'에 접근하려면 'key'를 이용하여 접근한다. 접근하는 방식은 2가지!

🔎 DOT NOTATION

점을 이용해서 접근

객체이름.key

	let myself = {
    name: 'Emily', // 문자열
    food: { favorite: 'pork belly',
 	    dislike: 'cilantro'}, // 또 다른 객체
    color: ['red','yellow'], // 배열
     lipstick : 3 // 숫자
    }
	console.log(myself.name) // 'Emily'
	console.log(myself.food) // {favorite:"pork belly",dislike:"cilantro"}

🔎 BRACKET NOTATION

대괄호를 이용해서 접근

객체이름[key]

	let myself = {
    name: 'Emily', // 문자열
    food: { favorite: 'pork belly',
 	    dislike: 'cilantro'}, // 또 다른 객체
    color: ['red','yellow'], // 배열
     lipstick : 3 // 숫자
    }
	console.log(myself['color']) // ["red","yellow"]
	console.log(myself['lipstick']) // 3

🛎 bracket으로 value에 접근 할 때, 대괄호에 ''를 사용한 이유는 key가 string이기 때문이다.!

💡 Dot 과 Bracket 다른점

점을 이용한 'DOT Notation' 접근 방식은 숫자로 된 'key'나 띄어쓰기로 된 key에 접근이 불가능하다.
또한, 'key'에 변수가 포함되어 있으면 접근 불가능

DOT Notation으로 접근했을 경우,

1. 숫자로된 key에 접근

	let foodscore = {
    1:"worst",
    3:"normal",
    5:"best"}
    console.log(foodscore.1) // SyntaxError

---

2. 띄어쓰기가 있는 key에 접근

	let foodType = {
    'korean food':"recommend",
    'japanese food': "great",
    'italian food': "best" }
    console.log(foodType.korean food) // SyntaxError
	console.log(foodType.'korean food') // SyntaxError

💡💡Dot notation은 숫자나 띄어쓰기가 있는 'key'에는 접근이 불가능 하기 때문에 오류.

---

🛎 변수를 통해 key에 접근 시에는 ?

	let foodType = {
    'korean food':"recommend",
    'japanese food': "great",
    'italian food': "best" }
    
    let likeType = ['korean food']
    
	console.log(foodType.likeType)
  // undefined ; Dot 방식으로는'undefined'

	console.log(foodType[likeType])
 // "recommend" ; likeType 변수에 담긴 'korean food' 키의 값이 출력

💡💡객체에 없는 'key' 를 호출 했을 때 에러가 나지 않고,
값은 undefind로 출력된다. 객체에 있는 'key'를 호출 했을 때는 'value'가 출력

🛎 함수 안에서 변수를 통해 key에 접근

	function food() {
	let foodType = {
  'korean food':"recommend",
  'japanese food': "great",
  'italian food': "best" }

  let like = foodType.favorite = "italian food"
    //like 변수에 Dot을 이용하여 foodType 객체에 favorite 프로퍼티 추가
  let myType = foodType[like];
    // Dot은 변수가 포함된 키에 접근을 하지 못하기 때문에 Bracket을 이용하여 myTypedp like 변수에 접근
    return myType
  }
	console.log(food()) //"best";

' foodType ' 객체 안에서 추가된 프로퍼티 ' favorite ' 의 value 가 'italian food'이고,
' italian food ' value 가 ' italian food ' key 에 접근하여 ' best ' value 을 불러 온 것이다.

---

✓ 객체 안의 객체 접근

DOT 사용시	객체이름.키값.키값
Bracket 사용시	객체이름 [키값][키값]

	let color = {
      red:"빨강",
      blue:{ lightblue: "연파랑",
             darkblue: "진파랑" },
      yellow:"노랑"
    	}
    console.log(color.blue.lightblue) // "연파랑"
    console.log(color['blue']['lightblue']) // "진파랑"

✓ 객체 안의 배열 접근

DOT 사용시	객체이름.키값[indext]
Bracket 사용시	객체이름 [키값][index][index]

	let family = {
      cousin: ['이모','고모','삼촌','친척동생'],
      myFamily: ['엄마','아빠','동생',['할머니','할아버지']]
    }
    console.log(family.cousin[2]) // "삼촌"
    console.log(family.myFamily[3][1]) // "할아버지"
    console.log(family['myFamily'][3][0]) // "할머니"

📌 객체 추가

객체를 추가할 때는 문자열인 경우 꼭 "" 문자열 표시를 해주어야 한다

	let workout = {
	exercise : '수영',
   	time : '7:00 AM'}
    
   workout.teacher = 'No'
   console.log(workout) // {exercise:"수영", teacher:"No", time:"7:00 AM"}

📌 객체 수정

객체이름에 수정하려는 value의 key를 가져와서 수정 값을 기입

	let zoo = {
    	elephant:50,
    	lion:30,
    	sparrow:24,
      	giraffe:45
    };
    zoo.sparrow = 20; // Dot 방식
    zoo['sparrow'] = 20; // Bracket 방식
	console.log(zoo) // {elephant:50, giraffe:45, lion:30, sparrow:20}

📌 객체 삭제 'delete'연산자

객체를 삭제할 때는 delete 라는 연산자를 사용

	let shoppingCart = {
	참치 : '고추참치',
   	달걀 : '30구',
	시금치 : '1단',
	소세지 : 1,
	햄 : '스팸',
	토마토 : 5}
    
   delete shoppingCart.sausage // Dot 방식
   delete shoppingCart['sausage'] // Bracket 방식
   console.log(shoppingCart) // {달걀:"30구", 시금치:"1단",참치:"고추참치",토마토:5,햄:스팸}

📌 객체의 프로퍼티 존재여부 'in'연산자

존재하지 않은 프로터피에 대해 undefined가 나온다. 이 점을 활용해 프로퍼티 존재여부 확인 가능

"Key" in 객체

 let deskItem = {
 냉장고:"음식저장고",
 옷장:"옷저장고"
 }
 console.log("냉장고" in deskItem); // true ; 해당 key가 객체에 존재함으로 true 값 반환
 console.log("화장대" in deskItem); // false ; 해당 key가 객체에 없음으로 false 값 반환

📌 For in (배열/객체)

객체 안의 key 값을 알 수 있다.
반복문에서 이미 언급한 내용이지만 다시 한번 복습!

객체의 for in 반복문

let score = {
	math: 20,
  	music: 30,
  	english:10
}

for (key in score){
  console.log(key)
} // math, music, english ; score 객체 안의 키를 모두 가져온다.

for (key in score){
   console.log(score[key])
} // 20,30,10 ; score 객체의 키의 값을 가져온다.

배열의 for in 반복문

	let arr = ['가','나','다'];

    for (let name in arr){
    	console.log(name)
    } // 0,1,2 arr 배열의 인덱스 값을 가져온다.

	for (let name in arr){
    	console.log(arr[name])
    } // 가,나,다  배열의 값을 가져온다.

📌 객체의 value (함수)는 객체지향 프로그램

객체에는 key 와 value 가 한 쌍으로 묶인 프로퍼티가 있는데, value 안에 또 다른 객체, 배열, 숫자 등등 들어 갈 수 있는다.
여기서 value 안에 "함수"도 들어갈 수가 있다. 이러한 것을 객체 지향 프로그램이라고 한다

객체 지향 프로그램이란, 서로가 연관되어 있는 데이터와 처리(기능)을 하나의 객체 안에 그룹핑 한 프로그램

	let foodScore = {
      삼겹살 : 100,
      오징어볶음 : 90,
      매운갈비찜 : 95,
      곱창볶음 : 150,
      한국음식 : function (){
      console.log('맛있어요')}
    }
    foodScore['한국음식'](); // 맛있어요

🛎 this 란?

fucntion을 소유하고 있는 객체를 가리키고 있는 정해진 변수

	let foodScore = {
      삼겹살 : 100,
      오징어볶음 : 90,
      매운갈비찜 : 95,
      곱창볶음 : 150,
      한국음식 : function (){
      console.log(this.오징어볶음)}
    }
    foodScore['한국음식'](); // 90
/*  '한국음식'이라는 키 값에 있는 함수에 'this'는 'foodSCore' 객체를 가리키고,
   객체 안에 있는 '오징어볶음' 키의 값을 호출하여 '90' 이라는 value가 나온 것이다. */

'this' 를 사용하는 이유는 객체의 이름을 수정해야하는 경우, 객체이름을 일일히 수정할 필요 없기 때문이다.

응용

let foodScore = {
      collection: {삼겹살 : 100,
      오징어볶음 : 90,
      매운갈비찜 : 95} ,
      한국음식 : function (){
      for (key in this.collection){
      console.log(key, this.collection[key])
      }}
    }
    foodScore.한국음식(); // 삼겹살 100, 오징어볶음 90, 매운갈비찜 95

---

🔎 배열과 객체.

배열과 같은 점.
여러 종류의 데이터를 묶음으로 관리하고 다양한 기능이 있다.

배열과 다른 점.
배열은 대괄호 [ ] 를 사용하지만 객체는 중괄호 { } 를 사용
배열은 순서가 있는 값으로 인덱스를 통해 값을 호출 할 수 있고, 배열의 값이 순서대로 출력.
그러나 객체는 순서에 상관없이 값이 출력되고, 따라서 인덱스 값이 없다.

---

🔎 배열이 있는데 왜 객체를 사용하는가?

둘 다 데이터를 한 곳에 담아두는 컨테이너 역할을 하지만
배열 내의 요소는 인덱스를 통해 호출되지만, 만약 수많은 데이터들이 있어 인덱스를 모르는 상태라면,
원하는 요소에 접근하기 위해서는 컴퓨터가 배열의 모든 요소를 순회해야 한다.
그러나 객체는 불특정 데이터의 관련정보를 정리하여 연결하는데에 용이하고, 키를 통해 원하는 데이터를 찾는데에도 쉽다.
데이터가 많아지면 코드도 복잡해지는데 객체를 활용함으로써 코드의 유지보수가 수월하다.

---

객체참조링크