JavaScript 기초문법 2️⃣

◾️object

• object는 다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현할 수 있는 자료형
• object는 Object() or 중괄호 {}를 통해 생성
• object 개체는 key: value 형태로 표현하며, 접근은 object.key 형태로 표현
• 객체에 개체 추가는 obj.key=value , 삭제는 delete 명령어를 통해 수행한다.

let user = {
	name: "john",
    age: 27,
 };

user에 대한 메모리공간에는 주소값이 저장된다.
이 주소값은 name과 age가 저장되는 메모리 공간을 가르키는 주소값이다.
주소값을 참조(reference)해서 name에 대한 데이터와 age에 대한 데이터에 접근을 하는 것 이다.

객체 예제 코드

let user = {
    name: "john",
    age:27,
};

console.log(typeof user); //output : object
console.log(typeof user.name); //output : string
console.log(typeof user.age); //output : number

console.log(user); //output : { name: 'john', age: 27 }
console.log(user.name); //output : john
console.log(user.age); //output : 27

// 값 변경하기

user.age=30;
console.log(user.age); // output : 30

// 값 추가하기
user.weight = 72;
console.log(user); //output : { name: 'john', age: 30, weight: 72 }

// 값 삭제하기
delete user.age;
console.log(user); //output : { name: 'john', weight: 72 }

⛔️ 객체 복사 문제점

let user = {
    name: "john",
    age:27,
};

let admin = user; //객체 복사
console.log(admin); // output : { name: 'john', age: 27 }

admin.name = "park";
console.log(admin.name); //output : park
console.log(user.name); // output : park <- 여기가 문제이다. user는 john이어야 하는데 왜 park 일까?

• object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제가 발생된다. ( user와 admin의 주소값이 동일해서 문제가 생기는 것 이다.)
• 가리키는 대상 전체를 복사하는 방법은 얕은 복사(Shallow copy),
  깊은 복사(Deep copy)를 통해 가능하다.

◾️ 얕은 복사

1️⃣ 반복문 for 문을 통한 객체 복사

let user = {
    name: "john",
    age:27,
};

let admin = {};

//얕은 복사
for (let key in user){
   admin[key] = user[key];
}

admin.name = "park";

console.log(admin.name); //output : "park"
console.log(user.name); //output : "john"

2️⃣ 반복문 for 문을 통한 객체 복사

let user = {
    name: "john",
    age:27,
};

let admin_obj = Object.assign({},user);

admin_obj.name = "park";
user.age = 30;

console.log(admin_obj.name); //output:"park"
console.log(user.name); //output:"john"
console.log(admin_obj.age); //output:27
console.log(user.age); //output:30

3️⃣ ES6에서부터 지원하는 전개 연산자(Spread Operator)를 이용한 복사

let user = {
    name: "john",
    age:27,
};

let admin_spread = {...user};

admin_spread.name = "park";
user.age = 30;

console.log(admin_spread.name); //output:"park"
console.log(user.name); //output:"john"
console.log(admin_spread.age); //output:27
console.log(user.age); //output:30

⛔️ 얕은 복사 문제점

• 객체 내 또 다른 객체가 있다면 복사되지 않는다.

◾️ 깊은 복사

• 얕은 복사의 문제를 해결하기 위한 방법이다.

JSON 객체를 이용한 깊은 객체 복사

let user = {
    name: "john",
    age:27,
    sizes :{
        height:180,
        weight:72,
    },
};
// stringfy : js object -> string, parse : string -> js object
let admin_json = JSON.parse(JSON.stringify(user));

admin_json.sizes.weight++;
--admin_json.sizes.height;

console.log(admin_json.sizes.weight); //output : 73
console.log(admin_json.sizes.height); //output : 179
console.log(user.sizes.weight); //output : 72
console.log(user.sizes.height); //lutput : 180

• stringify는 객체를 문자열로 변환하는데 이때 원본 객체와의 참조가 끊긴다.