객체 메소드(Object methods)

코딩 앙마 자바스크립트 중급 강좌 #3 - 객체 메소드, 계산된 프로퍼티 유튜브를 보고 정리한 글입니다.

Object.assign() : 객체 복제

const user = {
   name : 'Mike',
   age : 30
}

const newUser = Object.assign({}, user);

const cloneUser = user; 하면 안됩니다.

user 변수에는 객체 자체가 들어있는게 아니라, 객체가 저장되어있는 메모리 주소인 객체에 대한 참조값이 저장됩니다.

그러므로 cloneUser를 만들어서 user를 넣으면 객체가 복사되면서 들어가는게 아니라, 그 참조값만 복사되는 것입니다.

 

cloneUser를 만들어서 참조값을 복사하게 되면,

cloneUser.name = 'Tom'; 으로 cloneUser의 값만 바꾸어도, user의 이름도 바뀝니다.

하나의 객체를 두 변수가 접근하고 있는 것입니다.

 

동일하게 복제하려면, Object.assign({}, user)메소드를 사용해야 합니다.

여기서 빈 객체는 초기값입니다. 두번째 매개변수부터 들어온 객체들이 초기값에 병합됩니다.

이렇게 하면, 빈 객체에 user가 병합되므로 복제되는 것입니다.

이름을 바꿔도 user는 변함이 없습니다. 같은 객체가 아닙니다.

 

객체를 복제할 때, 초기값이 빈 객체가 아니면 그 키와 값도 함께 추가되어 복제됩니다.

Object.assign({ gender:'male' }, user);

console.log(user) // { gender: 'male', name: 'Mike', age : 30 } 

만약 병합을 하는데, 키가 같다면 그 키의 값을 덮어쓰고 복제되는 값이 나옵니다.

Object.assign({ name: 'Tom' }, user);

console.log(user) // { name : 'Mike', age : 30 }

두개 이상의 객체도 합칠 수 있습니다. 

const user = {
  name : 'Mike'
}
const info1 = {
  age : 30,
}
const info2 = {
  gender : 'male',
}

Object.assign(user, info1, info2)
// { name : 'Mike', age : 30, gender : 'male' }
// user에 다 합쳐집니다

---

Object.keys() : 키 배열 반환

객체 프로퍼티의 키를 배열로 반환하는 메소드 입니다.

const user = {
  name : 'Mike',
  age : 30,
  gender : 'male',
}

Object.keys(user); // ['name', 'age', 'gender']

Object.keys(obj).length // 이렇게 객체의 개수를 알고싶을 때도 사용합니다. 

---

Object.values() : 값 배열 반환

객체 프로퍼티의 값을 배열로 반환하는 메소드 입니다.

const user = {
  name : 'Mike',
  age : 30,
  gneder : 'male',
}

Object.values(user); // ['Mike', 30, 'male']

Object.entries() : 키/값 객체를 배열로 반환

키와 값을 모두 배열로 반환하는 메소드 입니다. 키와 값을 쌍으로 묶어서 배열로 줍니다. 배열 안에 각 키와 값이 들어있는 배열이 들어있습니다.

const user = {
  name : 'Mike',
  age : 30,
  gneder : 'male',
}

Object.entries(user); // [ ['name','Mike'], ['age',30], ['gender','male'] ]

Object.fromEntries() : 키/값 배열을 객체로 반환

반대로 키와 값을 쌍으로 묶은 배열들을 객체로 반환하는 메소드 입니다.

const arr =
[
  ['name','Mike'],
  ['age',30],
  ['gender','male']
];

Object.fromEntries(arr); // { name: 'Mike', age: 30, gender: 'male', }