#3 객체 메소드, 계산된 프로퍼티

계산된 프로퍼티

일반적인 객체는 이렇게 고정된 키를 쓴다.

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

 

그런데 이 키 이름을 변수나 식으로 만들고 싶을 때가 있다.

그때 사용하는 것이 대괄호[ ] 이다.

let a = "age";

const user = {
  name: "Mike",
  [a]: 30,            // a가 "age" 이므로 결과는 age: 30
  [1 + 4]: 5,         // "5": 5 (숫자 계산 결과가 키가 됨)
  ["굽네" + "치킨"]: "hello" // "굽네치킨": "hello"
};

 

왜 유용한가?

함수로 원하는 키를 받아 객체를 만들어 낼 수 있다.

function makeObj(key, val) {
  return {
    [key]: val
  };
}

const obj = makeObj("이름", "국밥"); // {이름: "국밥"}

---

Object.assign() 

Object.assign()은 객체 복사/합치기(병합)하는 함수이다.

Object.assign(초기값, 병합할 객체들...)

 

자주 하는 실수: 그냥 대입하면 복사가 아니다.

const user = { name: "Mike" };
const cloneUser = user;     // 복사가 아니라 "같은 객체를 가리킴"
cloneUser.name = "soondae";

console.log(user.name);     // "soondae" (원본도 같이 바뀜)
console.log(user === cloneUser); // true

• 같은 객체를 가르키는 것일 뿐 객체가 복사되지 않는다.

const user = { name: "Mike" };
const obj = Object.assign({ name: "Tom" }, user);

console.log(obj.name); // "Mike"

• 중요포인트: 초기값에 같은 키가 있으면 덮어씌운다.

const user1 = { name: "Mike" };
const info1 = { age: 30 };
const info2 = { gender: "male" };

Object.assign(user1, info1, info2);
// user1 => {name:"Mike", age:30, gender:"male"}

• 여러 객체도 한 번에 병합이 가능하다.

---

키/값을 배열로 뽑기

Object.keys({ name: "John", age: 30 });
// ["name", "age"]

• Object.keys(): 키만 배열로 

Object.values({ John: 100, Pete: 300, Mary: 250 });
// [100, 300, 250]

• Object.values(): 값만 배열로

Object.entries({ name: "soondae", age: 26, gender: "female" });
/*
[
  ["name", "soondae"],
  ["age", 26],
  ["gender", "female"]
]
*/

• Object.entries(): [키, 값] 쌍의 배열로

const arr = [
  ["name", "soondae"],
  ["age", 26],
  ["gender", "female"]
];

Object.fromEntries(arr);
// {name:"soondae", age:26, gender:"female"}

• Object.entries(): entries형태의 배열을 다시 객체

---

연습

급여 합계 구하기

let salaries = { John: 100, Pete: 300, Mary: 250 };

function sumSalaries(obj) {
  let values = Object.values(obj);
  let sum = 0;
  for (const value of values) {
    sum += value;
  }
  return sum;
}

sumSalaries(salaries); // 650

• Object.values로 값만 가져와 계산

프로퍼티(키) 개수 세기

let user = { name: "John", age: 30 };

function count(obj) {
  return Object.keys(obj).length;
}

count(user); // 2

• [name], [age] 총 2개

---

키워드

계산된 프로퍼티

: [ 식 ] 으로 키를 동적으로 만들 수 있다.

 

Object.assign()

: 객체를 복제나 병합할 때 사용하며, 중복 키는 덮어쓴다.

 

Objecty.keys/values/entries/fromEntries

: 객체를 배열 형태로 바꿔서 순회/가공하고 다시 객체로 복원할 수 있다