TIL 10. object - 객체

🔥study keyword

객체의 값을 추가,수정, 삭제하는 방법에 대해서 알아보자,,,,

📌 객체를 왜 사용하는 걸까?

객체는 영어로 object라고 표현하며, key값과 value값으로 이루어져 있고, 배열과 다르게 순서는 중요하지 않다.

let person1 = ['홍길동', 'B형', 'ESTP', '카라멜마끼야또'];

let person2 = ['박철웅', 'A형', 'ISTP', '아메리카노'];

⇒ 두개의 배열에는 사람마다의 정보가 담겨있다. 우리가 원하는 정보를 얻기 위해서는 배열의 index번호를 기억해야하는데, 만약에 50명, 100명, 200명이라면 그 index번호를 기억하기 힘들기 때문에 객체를 사용하여 보다 편하게 할 수 있다.

📌 객체 만들기

객체를 만들때에는 { } 안에 key와 value를 쌍으로 묶어서 만들어준다. *key값이 여러개일 경우에는 ( ,)로 구분한다.

// key와 value를 사용해서 객체를 만들어보았다.
let person1 = {
	name: '홍길동',
	bloodType: 'B형',
	mbti: 'ESTP',
	favoriteCoffee: '카라멜마끼야또'
}

⇒ 객체를 만드는 여러가지 방법 중에 위와 같이 { }를 사용해서 만드는 방식을 Object Literal이라고 한다.

• 객체로 표현하면 배열과 다르게 순서가 없기 때문에 index number을 기억하지 않아도 된다.
• 원하는 정보의 key값만 알면 정보에 접근할 수 있다.

📌 객체의 속성 읽기

객체 속성 값을 읽는 방법에는 두가지가 있습니다.

• 점 표기법 ( (.) dot notation )

function dotNotaition() {
let testObj = {
	"hat": "ballcap",
	"shirt": "jersey",
	"shoes": "cleats"
};
	let hatValue = testObj.hat;  //dot notation 
	let shirtvalue = testObj.shirt;  //dot notaiton
	return hatvalue + ' ' + shirtValue;
}

• 대괄호 표기법 ( ([ ]) bracket notation )

function bracketNotaiton() {
	let testObj = {
		"an entree": "hamburger",
		"my side": "veggies",
		"the drink": "water"
};
	let entreeValue = testObj["an entree"];  //bracket notation
	let drinkValue = testObj["the drink"];   //bracket notation
	return entreeValue + ' ' + drinkValue;
}

📌 변수를 사용한 객체 속성 접근

function objectVariavles() {
	let testObj = {
		12: "Namath",
		16: "Montana",
		19: "Unitas"
};
	let playerNumber = 16;    //변수 playerNumber에 16 값을 할당,
	let player = testObj[16];  //대괄호를 사용해서 testObj의 playerNumber에 접근하여 변수값으로 해당 번호의 선수를 선택함
	return player;
}

📌 객체의 값 수정

⇒ 객체에서 이미 존재하는 값을 수정하는것은 가능!!

function updateObject() {
	let myDog = {
		"name": "Cello",
		"legs": 4,
		"age": 6,
	};
	myDog["name"] = "Happy Cello";   //bracket notation을 사용해서 수정
	myDog.name = "Happy Cello";      //dot notation을 사용해서 수정
	return myDog;
}

📌 객체의 속성 값 추가

⇒ 객체에서는 속성 값을 추가 할 수 있다!!

• dot notation ⇒ 속성의 이름을 알고 있을 때 사용된다.
• bracket notation ⇒ 속성의 이름이 동적으로 결정될 때 사용된다.

function addProperty() {
	"name": "Happy Cello",
	"legs": 4,
	"age": 6
};
	myDog["bark"] = "woof";   //객체에 속성 값 추가
	return myDog;
}

📌 객체의 속성 삭제

⇒ 프로퍼티 및 메소드를 제거하는 방법 (delete 키워드를 사용)

function deletProperty() {
	let myDog = {
		"names": "Cello",
		"legs": 4,
		"tails": 1,
		"bark": "woof"
};
	delete myDog.bark;   //delete를 사용해서 객체의 값을 삭제
	return myDog;
}

let myStorage = {
    "car": {
      "inside": {
        "glove box": "maps",
        "passenger seat": "crumbs"
       },
      "outside": {
        "trunk": "jack"
      }
    }
  };
	let gloveBoxContents = myStorage["car"],["inside"],["glove Box"];
	return gloveBoxContents;
}

📌 객체 안의 배열 접근

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