[노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2.6

#2.6 Objects

 

개념

예를 들어 게임 안에서 플레이어(캐릭터)를 만들고 있다고 가정했을 때, 아래의 코드는 비효율적임.

/*비효율적인 코드*/
const playerName = "nico";
const playerPoints = 121212;
const playerHandsome = true;
const playerFat = "little bit";

 

fat, handsome, point, name 특성들이 하나의 개체(entity)인 player에 대해서 설명하고 있음.
따라서 이들을 그룹화할 필요가 있음. 

지난 시간에 배운 Array 방식으로 그룹화하기엔,

"nico", 121212, true, "little bit"이 각각 어떤 속성의 값인지 알 수 없어서 적절하지 않음.

/* 적절하지 않은 그룹화 */
const player = ["nico", 121212, true, "little bit"];

 

그래서 Object를 사용해야 함. 
Object를 만들기 위해서는 { } 기호를 사용하면 됨.

const player = {
	name: "nico",
    points: 10,
    fat: true,
};

console.log(player);
console.log(player.name);

결과값

 

---

 

Object 속성값에 접근하기

(player의 name에 접근하기)

console.log(player.name);

 

console.log(player["name"]);

 

같은 결과값

 

---

 

Object 안을 업데이트하기

console.log(player);
player.fat = false; // object 안을 업데이트
console.log(player);

결과값 비교

 

상수(const)를 어떻게 수정한 것인가?

이것은 const로 선언된 Object 안의 무언가를 수정한 것이기 때문에 가능한 것.

const로 선언된 Object는 아직도 동일함. 상수(const) 전체를 하나의 값으로서 업데이트 하는 것이 불가능.

/* 에러 코드 */
console.log(player);
player = false; // 업데이트
console.log(player);

결과값 - 에러 발생

 

---

 

 

Object에 속성 추가하기

console.log(player);
player.lastName = "potato"; // 속성 추가
console.log(player);

결과값