객체 속성 다루기 # 접근방법, 객체 속성 추가, 삭제, 객체의 특성 : 얕은 복사

객체

키와 값으로 구성된 속성의 집합

const person= {}; // 빈객체
const person= { 키 : 값으로 구성된 속성 나열 };

객체 각각의 속성에 접근하는 방법

1. 마침표 연산자 접근 방법

객체가담긴변수이름.키

const person = {
  name: 'ellie',
  age: 20,
  isAdult: true,
  "phone number" : "010-1234-5678",
};

console.log(person.name); // ellie

2. 대괄호 연산자 접근 방법

객체가담긴변수이름['키']

const person = {
  name: 'ellie',
  age: 20,
  isAdult: true,
  "phone number" : "010-1234-5678",
};

console.log(person["name"]); // ellie

하지만 키 이름에 공백이 있을 경우, 무조건 대괄호 연산자 방법으로 객체 속성을 출력해야한다.

---

객체 속성 값 변경

객체가담긴변수이름.속성이름으로 변경하고자 하는 데이터에 접근해 다른 값 할당(재할당)

const person = {
  name: 'ellie',
  age: 20,
  isAdult: true,
  "phone number" : "010-1234-5678",
};

// 재할당 하기
person.name = 'coding';
console.log(person.name); // coding

객체 속성 동적 추가

변수이름.추가하고싶은속성이름 = 값

const person = {
  name: 'ellie',
  age: 20,
  isAdult: true,
  "phone number" : "010-1234-5678",
};

// 추가
person.number = 1782
console.log(person); 
/* 
{
  name: 'ellie',
  age: 20,
  isAdult: true,
  'phone number': '010-1234-5678',
  number: 1782
}
*/

개체 속성 동적 삭제

delete 키워드 사용

const person = {
  name: 'ellie',
  age: 20,
  isAdult: true,
  "phone number" : "010-1234-5678",
};

// 삭제
delete person.isAdult;
console.log(person); // { name: 'ellie', age: 20, 'phone number': '010-1234-5678' }

---

자바스크립트의 자료형은 크게 기본자료형과 참조자료형으로 구분함

객체는 참조 자료형

참조 자료형의 데이터 관리 : 얕은 복사

참조 자료형 ex. 객체

데이터를 복사했을 때 한 쪽 데이터가 변경되면 다른 쪽 데이터도 변경되어 서로 영향을 받는 것

같은 주소 값을 공유하는 변수는 주소 값의 데이터가 변경되면 동시에 값 변경됨

const obj = {
  name: 'Ellie',
};
const obj2 = obj;

console.log(obj, obj2); // { name: 'Ellie' } { name: 'Ellie' }

delete obj.name 으로 데이터 삭제

const obj = {
  name: 'Ellie',
};
const obj2 = obj;

delete obj.name;
console.log(obj, obj2); // {} {}

obj와 obj2 데이터 모두 삭제되어 출력됨

 

참조 자료형은 변수에 데이터가 할당되는 것이 아니고,

데이터가 위치해 있는 메모리 주소값만 할당된다.

즉,

/*
Ox01
{
  name: 'Ellie',
};
*/
const obj = Ox01;
const obj2 = Ox01;

메모리상 주소가 Ox01이라고 가정하면,

obj는 Ox01(주소값)이 할당되는 것

마찬가지로 obj2의 값을 obj로 할당했으니,

obj2도 Ox01(주소값)이 할당되는 것이다.

---

<참고> 기본 자료형의 데이터 관리 : 깊은 복사

복사한 값을 재할당할 때, 한쪽 데이터가 변경되어도 서로 영향을 미치지 않게 복사되는 것

let num = 10;
let num2 = num; // num2 = 10

console.log(num, num2); // 10 10

num = 30 으로 값 변경

let num = 10;
let num2 = num; // num2 = 10

num = 30; 
console.log(num, num2); // 30 10

num 값은 30이 되지만 num2는 그대로 10값을 출력함

 

기본자료형은 다른 변수(num2)에 데이터를 할당(num2에 num의 데이터 할당)하더라도 자료형 데이터의 값이 완전히 복사됨

즉, num, num2는 서로 독립적인 공간에서 데이터를 관리함

(서로의 데이터에 영향을 주지 않음)