33. [JavaScript] Computed Property & 객체에서 사용할 수 있는 메서드

Computed Property(계산된 프로퍼티)

아래와 같은 코드가 있다고 가정합니다.

변수 a와 user 객체의 key값 중 일치하는 값(age)이 있습니다.

let a = 'age';

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

 

위에 코드를 아래와 같이 사용할 수 있습니다.

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

대괄호로 묶어주면 [a]라는 값이 들어가는 것이 아니라 변수 a에 할당된 값이 들어가게 됩니다.

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

 

아래와 같이 식으로 넣을 수도 있습니다.

const user = {
    [1 + 4] : 5,
    ["안녕"+"하세요"] : "Hello"
}

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

---

Methods

객체에서 사용할 수 있는 몇 가지 메서드에 대해서 알아봅시다

 

Object.assign() : 객체 복제

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

const cloneUser = user;

 

cloneUser는 객체가 복제되지 않고 user의 참조값만 복사됩니다.

즉 아래와 같은 모습입니다.

 

cloneUser에서 이름을 변경하면 user의 이름도 변경됩니다.

 

동일하게 복제하려면 Object.assign 메서드를 사용해야 합니다.

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

 

이름을 변경해도 user의 이름은 변경되지 않습니다.

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

const newUser = Object.assign({}, user);
newUser.name = 'Tom';
console.log(user.name); // 'Mike'

 

병합할 때 다른 값이 있는 경우

user의 프로퍼티에 gender가 추가됩니다.

let user = {
  name:"Mike",
  age:30,
}

let user1 = Object.assign({gender:"male"}, user);
console.log(user1);

 

병합하는데 같은 키값이 있는 경우

덮어쓰게 됩니다.

let user = {
  name:"Mike",
  age:30,
}

let user1 = Object.assign({name:"Tom"}, user);
console.log(user1);

 

2개 이상 객체 합치기

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

//{
//    "name":"Mike",
//    "age":30,
//    "gender":"male"
//}

 

---

Object.keys() : 키 배열 반환

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

let result = Object.keys(user);
console.log(result); // ["name","age","gender"]

---

Object.values() : 값 배열 반환

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

let result = Object.values(user);
console.log(result); // ["Mike",30,"male"]

---

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

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

let result = Object.entries(user);
console.log(result);

//[
//    ["name","Mike"],
//    ["age",30],
//    ["gender","male"]
//]

---

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

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

let result = Object.fromEntries(arr);
console.log(result);

//{
//    name:"Mike",
//    age:30,
//    gender:"male"
//}