06. 객체 타입

object

---

• object는 다수의 원시 자료형을 포함하거나 복잡한 개체(entity)를 표현할 수 있는 자료형
• object는 Object() 혹은 중괄호({})를 통해 생성
• object의 개체는 key: value 형태로 표현하며 접근은 object.key 형태로 표현

객체 예제(1)

---

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

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

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

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

객체 복사 문제점

---

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

let admin = user;

admin.name = "zero";

console.log(admin.name); // output: "zero"
console.log(user.name); // output: "zero" <= admin.name과 같이 변경된다.

user.age = 30;
console.log(user.age); // output: 30
console.log(admin.age); // output: 30 <= user.age와 같이 변경된다.

object 복사

---

• object의 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생
• 가르키는 대상 전체를 복사하는 방법은 얕은 복사(Shallow copy), 깊은 복사(Deep copy)를 통해 가능

얕은 복사(Shallow copy) - 1

---

• 반복문 for 문을 통한 객체 복사

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

let admin = {};

// shallow copy
for (let key in user) {
	admin[key] = user[key];
}

admin.name = "zero";

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

얕은 복사(Shallow copy) - 2

---

• object.assing() 함수를 이용한 복사

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

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

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

console.log(admin_obj.name); // object: "zero"
console.log(user.name); // output: "john"
console.log(admin_obj.age); // output: 23
console.log(user.age); // output: 30

얕은 복사(Shallow copy) - 3

---

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

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

let admin_spread = { ...user };

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

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

얕은 복사(Shallow copy) 문제점

---

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

let user = {
	name: "john",
    age: 23,
    sizes: {
    	height: 177,
        weight: 72,
    },
};

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

admin_obj.sizes.weight++;
--admin_obj.sizes.height;

console.log(admin_obj.sizes.weight); // output: 73
console.log(admin_obj.sizes.height); // output: 176
console.log(user.sizes.weight); // output: 73
console.log(user.sizes.height); // output: 176

깊은 복사(Deep copy) - 1

---

• 재귀 함수를 이용한 깊은 객체 복사

let user = {
	name: "john",
    age: 23,
    sizes: {
    	height: 177,
        weight: 72,
    },
};

function copyObj(obj) {
	let result = {};
    for (let key in obj) {
    	if(typeof obj[key] === "object) result[key] = copyObj(obj[key]);
        else result[key] = obj[key];
    }
    return result;
}
let admin = copyObj(user);

admin.sizes.weight++;

console.log(admin.sizes.weight); // output: 73
console.log(user.sizes.weight); // output: 72

깊은 복사(Deep copy) - 2

---

• JSON 객체를 이용한 깊은 복사, stringify는 객체를 문자열로 변환하는데 이때 원본 객체와 참조가 끊김

let user = {
	name: "john",
    age: 23,
    sizes: {
    	height: 177,
        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 176
console.log(user.sizes.weight) // output: 72
console.log(user.sizes.height) // output: 177