[바닐라 JS로 크롬 앱 만들기] # 2.6 Objects

Gata·2023년 11월 11일
post-thumbnail

설명이 필요하지 않은 데이터 리스트들은 array로,
설명이 필요한 정보가 담긴 데이터 리스트들은 object로!

variable과 array

variable의 단점

//variable
const playerName = "gata";
const playerPoints = 1212;
const playerHandsome = false;
const playerFat = "little bit";

각 variable을 기억해야 하고, 모든 variable의 이름, 즉 property 이름을 지어야 한다.

array의 단점

//array
const player = ["gata","1212","true", "little bit"];

1212, true, little bit이 무엇을 의미하는지 알려주고 있지 않다. 주석(//)으로 각각이 어떤걸 의미하는지 프로그래머에게 알려줄 수 있지만 그보다 더 좋은 방법이 필요 해 보인다.

objects

objects를 사용하면 데이터를 깔끔하게 정리할 수 있고 각 의미를 빠르게 유추할 수 있다.

// objects
const player = {
    name: "gata",
    points: 1212,
    pretty: true,
    fat: true
};
console.log(player);
console.log(player.name);
console.log(player.points);
console.log(player.pretty);
console.log(player.fat);

object 내의 요소 찾기

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

두 코드의 결과가 같다. 같은 역할을 하니까 둘 중에 아무거나 쓰면 된다.

object 업데이트 하기

// object 업데이트 하기
const player = {
    name: "gata",
    points: 1212,
    pretty: true,
    fat: true
};

player.fat = false;
console.log(player);

player.points = player.points + 1245;
console.log(player);

잠깐✋🏻

constant로 변수를 선언하면 수정이 안된다고 했는데, 위의 코드에서는 어떻게 player를 업데이트 할 수 있었던 걸까? 에러는 constant 전체를 하나의 값으로 퉁 치려고 할 때 발생한다.


const player = { //여기서 player는 objects다.
    name: "gata",
    points: 1212,
    pretty: true,
    fat: true
};
// constant 안의 내용을 업데이트 할 때는 아무 문제 없다.
player.fat = false;
console.log(player);

// 에러가 발생하는 경우.
player = false;
console.log(player);
//variable의 타입 자체를 바꾸려고 하는 경우에 에러가 생긴다.
//맨위의 첫 코드에서 player는 objects였고 여기서는 false로 인해 boolean가 된다.
//같은 이름의 vaeriable이 서로 다른 타입을 갖기 때문에 충돌이 생기고, 에러가 발생한다.

object 내에 요소 추가하기

const player = { //여기서 player는 objects다.
    name: "gata",
    points: 1212,
    pretty: true,
    fat: true
};
player.lastName = "Oh";
console.log(player);

object 내에 존재하지 않는 것을 만들 수 있고, 존재한다면 업데이트도 할 수 있다.

array 처럼 push를 안쓰고 그냥 추가할 수 있다.

profile
개발은 즐거워🪇

0개의 댓글