[JavaScript] 문법(7) 객체 메소드(Object methods)

❑ 객체 메소드(Object methods)

1. Object.assign(): 깊은 복사(Deep copy)

독립적인 메모리를 사용하는 별도의 객체를 생성하는 

깊은 복사를 할 땐 Object.assign() 메서드를 사용한다. 

매개변수로는 기존 객체와 복사할 객체를 순서대로 넣는다. 즉, Object.assign(기존 객체, 복사할 객체)이다.

 

1.1. 빈 객체에 복사

const user = {
  name: "citron",
  age: 20
}

// 기존 객체: {} (빈 객체)
// 복사할 객체: user
const user_deepcopy = Object.assign({}, user);
// {} + {name: "citron", age: 20} 으로 보면 됨

user_deepcopy.name = "banana"; // user_deepcopy의 name 프로퍼티에 새로운 값 할당

console.log(user.name);
> "citron"
console.log(user_deepcopy.name);
> "banana" // deepcopy 되어 별도의 메모리를 갖는 새로운 변수가 됨

 

1.2. 기존 객체에 복사

1) 기존 객체와 복사할 객체의 프로퍼티가 중복되지 않는다면 병합된다

const user = {
  name: "citron",
  age: 20
}

// 복사될 객체: {hairColor: "brown"}
// 복사할 객체: user
const user_deepcopy = Object.assign({hairColor: "brown"}, user);
// {hairColor: "brown"} + {name: "citron", age: 20} 으로 보면 됨

console.log(user_deepcopy);
> {
>   "hairColor": "brown",
>   "name": "citron",
>   "age": 20
> }

 

2) 중복되는 프로퍼티가 있다면 덮어 써진다.

const user = {
  name: "citron",
  age: 20
}

// 복사될 객체: {hairColor: "brown"}
// 복사할 객체: user
const user_deepcopy = Object.assign({name: "banana"}, user);
// {name: "banana"} + {name: "citron", age: 20} 으로 보면 됨

console.log(user_deepcopy);
> {
>   "name": "citron",
>   "age": 20
> }

 

3) 여러 개의 객체를 한번에 복사할 수 있다.

const user = {
  name: "citron"
}
const info1 = {
  age: 20
}
const info2 = {
  hair: "brown"
}

// 복사될 객체: user
// 복사할 객체: info1, info2
const user_deepcopy = Object.assign(user, info1, info2);

console.log(user_deepcopy);
> {
>   "name": "citron",
>   "age": 20,
>   "hairColor": "brown"
> }

 

[참고] 얕은 복사(Shallow copy)

const user = {
  name: "citron",
  age: 20
}

const user_shallowcopy = user;

user_shallowcopy.name = "banana"; // user_shallowcopy의 name 프로퍼티에 새로운 값 할당

console.log(user.name);
> "banana"
console.log(user_shallowcopy.name);
> "banana" // shallow copy는 주소만 복사하기 때문에 user의 name이 변함

 

2. Object.keys(): Key 배열 반환

const user = {
  name: "citron",
  age: 20
}

console.log(Object.keys(user));
> ["name", "age"]

 

[참고] Object.keys()를 이용해 객체의 길이 파악하기

Object는 객체의 길이를 반환하는 속성이 없으므로 Object.keys()를 통해 배열로 변경한 후 배열의 length를 이용한다.

const user = {
  name: "citron",
  age: 20
}

console.log(Object.keys(user).length);
> 2

 

3. Object.values(): Value 배열 반환

const user = {
  name: "citron",
  age: 20
}

console.log(Object.values(user));
> ["citron", 20]

 

4. Object.entries(): Key/Value 배열 반환

const user = {
  name: "citron",
  age: 20
}

console.log(Object.entries(user));
> [
>   ["name","citron"],
>   ["age",20]
> ]

 

5. Object.fromEntries(): Key/Value 배열을 객체로 변환

const arr = {
  name: "citron",
  age: 20
}

console.log(Object.fromEntries(arr));
> {
>   "name": "citron",
>   "age": 20
> }

 

6. Object.hasOwnProperty(): Key를 갖고 있는지 확인 

const arr = {
  name: "citron"
}

console.log(Object.prototype.hasOwnProperty.call(arr, 'name'));
> true

console.log(Object.prototype.hasOwnProperty.call(arr, 'age'));
> false