[JavaScript] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)

계산된 프로퍼티

객체의 프로퍼티를 작성하기 위해서는 바로 속성과 값을 작성할 수 있지만, 프로퍼티를 동적으로 제어할 수도 있습니다.

let key = "아이브";

const idol = {
  [key]: "group name",
  member: 6,
}

이처럼 작성했을 때, 최종적으로 idol이라는 객체는 아래와 같은 프로퍼티와 값을 가집니다.

idol { "아이브": "group name", member: 6 };

변수 key에 할당된 값이 프로퍼티로 적용됩니다.

 

객체 메서드

1. Object.assign() -  객체 복사

객체를 복사할 때, 바로 리터럴하게 변수에 넣으면 메모리 주소의 참조값이 복제되는 것이므로 다른 방식으로 복제해야 합니다.

 

이를 위해 동일하게 복제하려면, Object.assign()을 사용합니다.

const user = {
  name: "Chris",
  age: 28,
}

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

첫 번째 매개변수에 인자로 빈 객체를 넣어주고, 두 번째로는 복제하려는 객체를 넣어줍니다.

 

여기서 빈 객체를 넣지 않고 새로운 프로퍼티와 값을 넣으면, 그 변수는 새로운 프로퍼티와 값을 포함하여 객체를 복사합니다.

const chris = Object.assign({ gender: "male" }, user);

그리고 매개변수를 세 개 사용해서 첫 번째 인자 객체에 나머지 두 가지 객체를 합쳐서 넣을 수도 있습니다.

const person = {
  name: "Chris",
}

const info1 = {
  age: 30,
}

const info2 = {
  gender: "male",
}

const chris = Object.assign(person, info1, info2);

 

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

세 가지 메서드 모두 객체의 키, 값, 키/값을 반환합니다.

const user = {
  name: "Chris",
  age: 28,
  gender: "male",
}

Object.keys(user) // ["name", "age", "gender"]
Object.values(user) // ["Chris", 28, "male"]
Object.entries(user)
/*
[
  ["name", "Chris"],
  ["age", 28],
  ["gender", "male"]
]
*/

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

반대로 키/값으로 되어있는 배열을 객체로 반환할 수도 있습니다.

const arr =
[
  ["name", "Chris"],
  ["age", 28],
  ["gender", "male"]
];

Object.fromEntries(arr);
/*
{
  name: "Chris",
  age: 28,
  gender: "male",
}
*/