노마드코더 - 바닐라JS로 크롬 앱 만들기(object)

2.6강

 

Objects

 

만약 우리가 게임을 만든다고 할 때 플레이어에 대한 정보를 저장하고 싶으면 어떻게 할까?

const playerName = 'ju';
const playerPoints = 1212;
const playerHandsome = true;
const playerFat = 'little bit';

기존에 우리가 배웠던 내용으로는 위와 같이 만들 수밖에 없을 것이다.

하지만 위의 정보는 모두 player이라는 한 개체에 대해 설명하고 있다는 것을 알 수 있다.

 

 

그렇다면 우리가 익숙하게 보았던 형태인

player.name
player.points
player.handsome

위와 같은 형태로 불러낼 수 있게 만들어주는 것이 더 좋겠다는 생각이 든다!

그럼 한번 만들어 보자.

 

 

[array]

 

먼저 저번 시간에 배운 array로 만들 수 있지 않을까? 생각해본다.

const player = ['ju', 1212, true, 'little bit'];

이렇..게..? 

이건 옳지 않아 보인다. 왜냐하면 이 array를 보면

ju, 1212, true, little bit이 무엇을 의미하는지 알 수가 없기 때문이다.

 

 

{object}

 

그럼 이제 object를 만들어보자. 

const player = {
    name: "ju",
    points: 1212,
    handsome: true,
};

object에서는 ' = ' 을 사용하지 않는다. 대신 ' : ' 을 사용한다. 그리고 중괄호 { } 를 사용한다.

그리고 하나의 property를 쓴 다음에는 ' , ' 를 쓰는데 그건 뒤에 property가 더 올 수도 있기 때문이다.

 

 

object의 값은 아래와 같은 방법으로 불러낼 수 있다.

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

둘 다 같은 값을 불러온다.

 

 

object 수정하기

 

object를 수정하는 것은 쉽다.

const player = {
    name: "ju",
    points: 1212,
    handsome: true,
};

player.handsome = false;

이렇게 마지막 한 줄같이 써주면 되는데.............  여기서 의문이 생긴다!

분명 저번 시간에 const는 수정이 불가능하다고 했는데........?

 

그렇다. const는 수정이 불가능하다.

하지만 우리가 하는 것은 object 안의 무언가를 수정하는 것이라 가능한 것이다.

 

object 추가하기

const player = {
    name: "ju",
    points: 1212,
    handsome: true,
};

player.lastname = "potato";

추가하는 방법도 쉽다. 마지막 줄처럼 추가해주면 된다.

 

 

 

 

따라서 설명이 필요하지 않은 데이터 리스트들은 array로,
설명이 필요한 정보가 담긴 데이터 리스트들은 object로 만들어 주면 되겠다!

 

 

 

 

 

 

 

썸네일