[JavaScript] 객체 메소드 - Object.assign(), Object.keys(), Object.values(), Object.entries(), Object.fromEntries() / 계산된 프로퍼티 (Computed Property)

let a = 'age';
const user = {
	name : 'Mike',
   	 age : 30 // [a] : 30
}

a변수와 user객체가 있다.

 

let a = 'age';
const user = {
	name : 'Mike',
    	[a]: 30    // age : 30
}

여기서, age키 대신 [a] 로 사용해도 된다.

대괄호[ ]로 묶어주면 문자열a가 아닌, 변수a에 할당된 값이 들어간다. 

이를 계산된 프로퍼티(Computed Property)라고 한다.

 

//계산된 프로퍼티(Computed Property)
const user = {
	[1 + 4] : 5,
    ["안녕"+"하세요"] : "Hello"
}

// {5: 5, 안녕하세요: "Hello"}

위처럼 식자체를 넣는 것도 가능하다.

 

다음은, 객체에서 사용할 수 있는 몇가지 메소드를 알아보자.

1. Object.assign() : 객체 복제

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

user객체가 있을 때,

const user2 = user;

user2를 만들어 user를 넣어주면 복제가 가능할까?

정답은 '그렇지않다.'

 

const user2 = user;
user2.name = "Tom";

console.log(user);
console.log(user2);

// {name: "Tom", age: 30} -- user 
// {name: "Tom", age: 30} -- user2

user변수에는 객체자체가 들어가있는게 아니라, 객체의 참조값이 저장된다.

즉, 객체가 복제되는것이 아니라 참조값이 복제되는 것이다.

user와 user2 둘 다 하나의 객체를 참조하기 때문에 user2의 이름을 변경했을 때, user의 이름도 변경된다.

 

동일하게 복제하려면 Object.assign() 메소드를 사용해야 한다.

{ } 빈객체는 초기값이다. 두 번째 매개변수부터 들어온 객체들이 초기값에 병합된다.

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

{ } + { name : 'Mike', age : } = { name : 'Mike,' age : 30 }

 

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

user2.name = 'Tom';

console.log(user.name); // 'Mike'

user2 != user

Object.assign() 메소드로 복제하면, user2의 이름을 바꿔도 user의 이름은 변하지 않는다.

user2와 user는 같은 객체가 아니기때문이다.

 

 

 

 

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

만약, 병합을 할 때 키(name)가 같다면 어떻게 될까?

name : 'Tom',

name : 'Mike',

age : 30,

위와 같이 이름이 덮어씌워져 변경된다.

 

 

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

 

 

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

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

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

user 객체를 Object.keys의 인수로 전달하면 key들(name, age, gender)이 배열로 만들어 반환한다.

 

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

Object.keys와 반대로 값들만 가져오고 싶다면 Object.values()메소드를 사용하면 된다.

객체의 value에 해당하는 'Mike', 30, 'male'만 배열로 반환된다.

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

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

 

4. Object.entries() : 키/값 배열 반환

키와 값을 모두 배열로 반환하는 메소드이다.

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

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

 

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

Object.entries()메소드와 반대로, 키와 값을 쌍으로 묶은 배열들을 넣어주면 객체로 만들어준다.

const arr = 
[ 
  ["name", "Mike"],  // "name" : 키, "Mike" : 값
  ["age", 30],	   // "age" : 키, 30 : 값
  ["gender", "male"] //"gender" : 키, "male" : 값
];

Object.fromEntries(arr);

/*
{
 name : 'Mike',
 age : 30,
 gender : 'male',
} */

참고 및 출처 : 유투브 코딩앙마 https://youtu.be/4_WLS9Lj6n4