[JAVASCRIPT 메모 ] 오브젝트 메소드 - Object.assign(); / /Object.keys(); / Object.values(); /Object.entries(); / Object.fromEntries();

 

 

// Object.assign(); -  객체 복제 메소드

 

 const user = {
  name: "kay",
  age: 30,
};

const cloneUser = user;
// 이렇게 하면 복제가 되는 것이 아니다.

 cloneUser.name = 'ddd';
// 유저의 이름도 변경됨
// 복제된게 아니라 하나의 객체를 두 변수가 접근하고 있는 것. 
//cloneUser == user

 

복제를 하려고 저렇게 바로 user를 할당하면

복제가 되는 것이 아니라 하나의 객체(user객체에) 두개의 변수가 접근하고 있는 것임.

결과를 보면 cloneUser의 이름을 바꿨는데 user의 이름이 바뀜.

 

 

복제를 위해서는  Object.assign(); 메소드를 사용한다.

 

const newUser = Object.assign({}, user);
// {}에 초기값 -- 빈객체에 새로운 값이 들어오는 것이므로 복제가 되는 것
 newUser.name = 'lina';
console.log(user);
// user는 변하지 않음 newUser != user

 

콘솔로 확인해보면 

newUser의 이름을 바꿔도 기존 user의 이름은 변화하지 않는다.

 

 

 

만약 초깃값에 무언가가 있을 경우

 

const newUser = Object.assign({gender: 'male'}, user);
// 초깃값에 젠더가 있는 상태로 유저의 값이 들어오므로
// 같은 값이 들어오면 덮어쓰기 됨!

초기값과 유저의 값이 병합됨

만약 같은 속성의 값이 들어오면 덮어쓰기 됨.

 

 

각기 다른 값이 있을 때 - 병합 가능

const user = {
    name: 'mike'
}
const info1 = {
    age: 30
}

const info2 = {
    gender: 'male'
}
const newUser = Object.assign(user, info1, info2);
// 각기 다른 정보가 있고 그것을 assign해주면 병합됨

console.log(newUser);

콘솔로 보면 병합되어있음

 

//Object.keys(); - 키를 배열로 반환

//Object.values(); - 값 배열로 반환 

//Object.entries(); - 키와 값 배열로 반환

const user = {
  name: "kay",
  age: 30,
  gender: "male",
};

// 키를 배열로 반환
const keys = Object.keys(user);
console.log(keys);

// 값 배열로 반환
const values = Object.values(user);
console.log(values);

// 키 / 값 배열 반환
const entries = Object.entries(user);
console.log(entries);
// 키와 값을 쌍으로 묶어서 배열로 내어줌

 

결과를 콘솔로 보면 전부 다른 것을 알수 있다!

 

Object.entries();의 반대 개념은 

Object.fromEntries(); 

키와 값이 배열로 묶인 배열을 다시

const user = {
  name: "kay",
  age: 30,
  gender: "male",
};

요론 형태로 내어줌

const arr = [
  ["name", "kay"],
  ["age", 30],
  ["gender", "male"],
];

//  키 / 값 배열을 객체로 Object.entries();의 반대
const fromEntries = Object.fromEntries(arr);
console.log(fromEntries);

콘솔로 보면