[NomadCoder] MMJS 5. Object

Q. 리스트에서 다양한 유형을 쓸 수 있는데 왜 굳이 Object를 써요?

 

Object의 의미

const playerName = "Ahnss";
const playerPoinsts = 12345;
const playerOnline = treu;
const playerState = "writing"

이런 객체를 하나 만들고, 그 객체를 '.(dot)' 형식으로 불러오고 싶다면?

player.name
player.points
player.online
player.state

일단 첫번째로 각각 var 지정 방법은 모든 변수명을 외우고 작성해야한다는 점에서 데이터 관리에 굉장히 부적합하다는 걸 알 수 있다.

그럼 array는 어떨까?

const player = ["Ahnss", 12345, true, "writing"];

문제점 : 각 요소의 의미가 뭔지 알 수 없다. (코드가 직관적이지 않다!)

* Q. 주석을 달면 되잖아요? <- 절레절레

 

자, 대신에 우리는 Object를 만들자.

 

Object 선언 및 초기화 방법

const player = {
    name: "Ahnss",
    point: 12345,
    online: true,
    state: "writing",
};

1) 중괄호 사용

2) property 요소마다 ',(콤마)'로 구분. 마지막 요소 작성 후에도 추가될 수 있으므로 콤마를 작성한다.

3) 요소명:(콜론) 요소내용

4) 중괄호 마침 후 ';(세미콜론)' 필수

 

이제 위에서 작성한

player.name
player.points
player.online
player.state

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

를 사용할 수 있다.

또한 이를 통해, console.log() 역시 console 내부의 log를 호출하는 의미라는 것도 알 수 있다.

 

정리하자면,

list는 모든 요소가 같은 의미를 지니고 있다.

반면에 object는 그게 뭔지 모를 property를 가지고 있기 때문에 확인할 여러 방법을 가지고 있다.

 

update 방법

 

player.online = false;

Q. 이 object는 constant 인데 어떻게 변경이 가능하죠?

player 라는 const object 변수 전체가 아닌 그 안의 요소만을 변경하는 것이기 때문에 가능하다.

player = false;

만약 위처럼 player 자체를 변경하려 한다면 에러가 발생한다.

 

Object에 Property 요소 추가 방법

player.lastName = "blueberry";

conlose.log(player);

lastName은 원래 없던 요소다. 그러니 업데이트 되지 않고 오류가 발생할 것 같지만!

브라우저를 새로고침 후 console을 보면,

{name: "Ahnss", points: 12345, online: false, state: "writing", lastName: "blueberry"}

자연스럽게 추가되어있는 요소를 확인할 수 있다.