[JS] 계산된 프로퍼티 / 객체 메소드

🖍️ 계산된 프로퍼티 ( Computed property )

let a = 'age';
const user = {
  name : 'Mike';
  // age : 30
  [a] : 30, 
}
  
age 대신 [a] 를 쓰면 변수 a에 할당된 값이 들어감
→ Computed property  

❗️ 아래처럼 식을 넣는 것도 가능 

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

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

-------------------------------------------

🔥 예제 [1]
let n = "name";
let a = "age";

const user = {
  [n] : "Mike", // name : "Mike"
  [a] : 30,     // age : 30
  [1 + 4] : 5,
};

console.log(user);
// {5 : 5, name : "Mike", age: 30}

-------------------------------------------

🔥 예제 [2] 어떤게 키가 될지 모르는 객체로 만들때 유용
function makeObj (key, val) {
  return {
    [key] : val,
  };
}

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

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

🖍️ 객체 메소드 ( Object - methods )

☺︎ Methods ☺︎

💟 Object.assign() : 객체 복제

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

const cloneUser = user; ❌ 복제 안됨

❗️ user 변수에는 객체 자체가 들어가있는게 아니라
객체가 저장된 메모리 주소인 객체에 대한 참조값이 저장
❗️ cloneUser를 만들어 user를 넣으면 객체가 복사되어 들어가는게 아니라 참조 값만 복사됨
❗️ 하나의 객체를 두 변수가 접근

⭐️ 동일하게 복제하려면 Object.assign() 메소드를 사용
⭐️ 빈 객체는 초기값

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

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

console.log(user);  // {name : "Mike", age: 30}
console.log(user2);  // {name : "Tom", age: 30}

⭐️ 2개 이상의 객체도 합칠 수 있음

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

Object.assign(user, info1, info2);

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

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

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

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

const result = Object.keys(user);

console.log(result);
// (2) ["name", "age"]

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

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

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

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

const result = Object.values(user);

console.log(result);
// (2) ["Mike", 30]

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

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

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

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

const result = Object.entries(user);

console.log(result);
// (2) [Array(2), Array(2)]
//   0: (2) ["name", "Mike"]
//   1: (2) ["age", 30]

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

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

Object.fromEntries(user);
// {
//    name : 'Mike',
//    age : 30,
//    gender : 'male',
//  }

🔥 예제 : 배열을 객체로 만들어줌
let arr = [
  ["mon", "월"],
  ["tue", "화"],
];

const result = Object.fromEntries(arr);

console.log(result);
// {mon: "월", tue: "화"}