JS - object(객체)

replit 공부하면서 헷갈렸던 객체에 대해 기본적인 정리

Object

배열은 데이터에 순서가 있다.
하지만 객체는 순서가 없는 데이터의 모음이다.
index로 접근하지 않고 키로 접근하기 때문이다.

기본 형태

var 객체이름 = {
property이름1: property값,
property이름2: property값
};

• property이름1 과 property이름2를 키(key)/프로퍼티 명,
  property값을 값(value)/프로퍼티 값이라하고
  이 둘을 합해서 프로퍼티라고 부른다.

• 객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다. 변수 선언할 때와의 차이
  띄어쓰기, 특수문자가 있으면 따옴표를 써줘야한다.

property 접근 방법

1. dot notation
   객체이름.프로퍼티이름

2. bracket
   객체이름[ "프로퍼티이름" ]
   -> 키 이름을 따옴표로 감싸서 작성해줘야한다.
   -> 띄어쓰기, 숫자로 된 키는 대괄호로 접근!

< 예제 >

let plan1 = {
  name: "Basic"
};

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

마침표(.)가 더 접근이 쉬울 것 같은데, 대괄호 표현은 언제 쓸까?

✔️ 대괄호 안에는 변수가 들어갈 수 있다.

< 예제 >

let plan1 = {
	name : "Basic"
};

let propertyName = "name";

console.log(plan1[propertyName]);

Object 사용

< 예제 >

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property";
console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
conosole.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);

• myObj 객체를 정의한 후에 property 값을 수정할 때

let name = "property1";
myObj[name] = ["hi", "hello"];
console.log(myObj);

• 프로퍼티 추가하는 방법

myObj.property4 = '추가됐다';

• property2 배열의 첫번째 요소로 접근하고 싶으면

console.log(myObj.property2[0]);

• 객체에 프로퍼티를 추가하거나 수정할 때 주의할 것

const mutableObj = {
  name: '객체'
};

mutableObj = {
  name: '수정'
}

✔️ 이 코드를 실행하면 오류가 난다. 왜냐하면 const 선언하면 재할당이 불가능하기 때문이다.

대신에

mutableObj.name = '수정';
mutableObj.type = 'Object 타입';

프로퍼티에 접근해서내용을 수정하거나 프로퍼티를 추가하는 것은 오류가 나지 않는다.

• 메서드

let methodObj = {
  do: function() {
    console.log('메서드 정의는 이렇게');
  }
}

methodObj.do(); //호출

• 객체는 reference로 저장된다

const hiObj = { 
  name: '안녕' 
};
const helloObj = {
  name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);

이 코드는 결과값이 false이다.
왜냐하면 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하지 않고
객체가 담긴 어느 메모리의 reference를 저장하기 때문이다.

따라서 객체를 담은 변수를 비교하면 false가 나온다.
하지만 객체 내부의 프로퍼티 값이 텍스트일 경우에는
텍스트를 비교하기 때문에 서로 같음/다름 여부를 판단할 수 있다.
console.log('객체값비교=>', hiObj.name === helloObj.name);