객체에서 쓸 수 있는 메소드들

Object.assign() : 객체 복제

기존에 있던 객체를 복사하여 사용하고 싶을땐 어떻게 해야할까? 단, 기존의 객체의 키와 값은 그대로 유지 되어야 한다.

그때 사용하는 메소드가 Object.assign()이다.

const user = {
  name: 'Mike',
}

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

newUser.name = 'tom'; // 새로 만든 객체의 이름 값은 'tom'으로 변경

console.log(newUser); // {name: 'tom'} 으로 변경되어 출력
console.log(user); // 기존 객체의 키와 값은 변하지 않고 {name: 'Mike'} 출력

위 같은 메소드 말고 아래와 같은 방법으로 복사해서 쓰면 어떻게 될까?

// 잘못된 방법

const user = {
  name: 'Mike',
}

const newUser = user

newUser.name = 'tom'; // 새로 만든 객체의 이름 값은 'tom'으로 변경

console.log(newUser); // {name: 'tom'} 으로 변경되어 출력
console.log(user); // 기존 객체의 키와 값은 변경되어 {name: 'tom'} 출력

이렇게 복제를 해서 써버리면 하나의 객체를 두 변수가 접근하고 있는거라 같이 변경되게 된다.

Object.assign({}, user) 에서 { } 중괄호 의 역할은 초기값으로 두번째 매개변수로 들어온 객체들이 초기값에 병합되는 형태이다.

{ }  + { name: 'Mike'} =  의 형태로 실행되는 것이다.

 

초기값을 활용하여 다양한 방식으로 객체를 복사할 수 있다.

const user = {
  name: 'Mike',
}

// #1. 새로운 프로퍼티를 추가
const newUser1 = Object.assign({age: 30}, user );
console.log(newUser1); // {age: 30, name:'Mike'} 새로 키와 값이 추가 되어 병합

//#2. 기존의 값을 변경
const newUser2 = Object.assign({name: 'Tom'}, user );
console.log(newUser2); // {name:'Tom'} 기존의 프로퍼티를 덮어씀

//#3. 2개 이상의 객체를 병합
const info1 = { age: 30 }
const info2 = { gender: 'male'}

const newUser3 = Object.assign(user, info1, info2);
console.log(newUser3); // {name: 'Mike', age: 30, gender: 'male' }

 

Object.keys(): 키 배열 반환,  Object.values(): 값 배열 반환, Object.entries:  키/값 배열 반환

객체들을 배열로 반환하는 메소드들이다. 키만 배열로 또는 값만 또는 키와 값을 둘다 배열로 반환할 수 있다.

entries 는 키와 값을 각 배열들로 쌍으로 묶어서 반환해준다.

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

//#1. 키만 반환
const key = Object.keys(user);
console.log(key); // ["name", "age", "gender"] 배열 츨력

//#2. 값만 반환
const value = Object.values(user);
console.log(value); // ["Mike", 30, "male"] 배열 츨력

//#3. 키와 값을 모두 반환
const entr = Object.entries(user);
console.log(entr); // [["name", "Mike"], ["age", 30], ["gender", "male"]]
// 배열 안에 키와 값을 가지고 있는 배열 3개가 들어있음

 

그럼 반대로 배열을 객체로 돌리는 메소드도 있다. Object.fromEntries( ) 이다. 위에 키와 값을 가지고 만든 배열을 다시 활용해보면 객체로 반환되는것을 확인할 수 있다.

const arr = Object.fromEntries(entr);
console.log(arr); // {name: 'Mike', age: 30, gender: 'male'} 객체로 반환