[JavaScript_study] Object - methods / Computed property

* Computed property (계산된 프로퍼티)

 

let a = 'age';

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

// 아래와 같이 사용 가능하다.
let a = 'age';

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

 

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

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

* Methods

Object.assign() : 객체 복제

 

* 빈 객체에 Object.assign()

 

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

// 잘못된 복제 방법
// 객체가 복사되면서 들어가는게 아니라 그 참조 값만 복사 되는것이다.
// cloneUser의 이름을 바꾸면 user의 이름도 변경된다.
// 하나의 객체를 두 변수가 접근하고 있다.
const cloneUser = user;

// 동일하게 복제 하려면 Object.assign() method를 사용해야한다.
// {}값은 초기값, 두번째 매개변수는 초기값에 병합된다.
// 빈객체에 user가 병합되므로 복제된다.
const newUser = Object.assign({}, user); // {} + { name : 'Mike', age : 30 }

{
  name : 'Mike',
  age : 30
}

newUser.name = 'Tom';
console.log(user.name); // 'Mike'

newUser != user

* 값이 있는 객체에 Object.assign()

 

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

Object.assign({ gender:'male'}, user);

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

// 만약 Key가 같다면?
// 덮어쓰게 된다.
Object.assign({ name: 'Tom'}, user);

{
  name : 'Mike',
  age : 30
}

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

 

const user = {
  name : 'Mike'
}

const info1 = {
  age : 30,
}

const info2 = {
  gender : 'male'
}

Object.assign(user, info1, info2)

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

---

Object.keys() : 키 배열 반환

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

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

---

Object.values() : 값 배열 반환

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

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

---

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

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

Object.entries(user);

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

---

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

 

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

const result = Object.fromEntries(arr);

console.log(result)

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

 

 

* 실용적인 예시 코드

(어떤게 Key가 될지 모르는 객체를 만들때 유용하다.)

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

const obj = makeObj("나이", 33);

console.log(obj)
// {나이 : 33}