[JS] Object methods, Computed property

코딩앙마님의 자바스크립트 중급 강좌를 보며 정리한 내용입니다.

Computed propety (계산된 프로퍼티) 란?

어떤 것이 key가 될지 모르는 객체를 만들 때 유용함

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

const obj = makeObj("이름", "현수"); 
console.log(obj) // {이름: "현수"}

let a = 'age';

const user = {
  name : 'Mike',
  [a] : 30  // 대괄호로 묶어주면 변수 a에 할당된 값이 들어감
}

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

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

---

Object methods

1. Object.assign()

객체 복제

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

consst cloneUser = user; 
// 이렇게 하면 복제가 안됨! 
// 객체에는 user의 정보가 저장되어 있는 것이 아닌, 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장되어 있기 때문


const newUser = Object.assign({}, user);
{} + { name: 'Mike', age: 30} = { name: 'Mike', age: 30, }
// Object.assign으로 복제


newUser.name = 'Tom'; // newUser의 이름을 바꿔도 user에는 영향X 둘은 이미 같은 객체가 아님
console.log(user.name) // Mike 
newUse !== user

기존 객체에 프로퍼티 추가

const user = {
    name : 'hyunsoo',
    age : 20,
}

Object.assign({ gender: 'female'}, user); // 만약 gender 키가 user에 있다면 덮어쓰게됨

{gender: "female", name: "hyunsoo", age: 20}

2개 이상의 객체 합치기

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

Object.assign(user, info1, info2) 

2. Object.keys(), Object.values()

const user = {
  name: 'Mike',
  age: 30,
  gender: 'male',
}
// user 객체의 모든 key값을 배열로 리턴함
Object.keys(user) // ["name", "age", "gender"]

// user 객체의 모든 value값을 배열로 리턴함
Object.values(user) // ["Mike", 30, "male"]

3. Object.entries(), Object.fromEntries()

// 키, 값 객체를 배열로 리턴함
Object.entries(user) // [["name", "Mike"], ["age", 30], ["gender", "male"]]


// 키, 값 배열을 객체로 리턴함
const arr = [
  ["name", "Mike"], 
  ["age", 30], 
  ["gender", "male"]
];
Object.fromEntries(arr) // { name: 'Mike', age: 30, gender:'male'}