Computed Property & Object Method

📌 Computed Property (계산된 프로퍼티)

let a = ‘user’;

const person = {
   age: 30,
   [a] = ‘Kim’
}

console.log(person[a]); // Kim
console.log(person.user); // Kim

• 변수를 대괄호로 묶어서 객체의 키 프로퍼티로 넣으면 변수 a에 할당된 문자열이 값 프로퍼티에 할당됨

let user = {
  [1 + 4]: 5,
  [“안녕” + “하세요”]: “Hello”
}

console.log(user); // { 5: 5, “안녕하세요”: “Hello” }

• 위 예시 처럼 연산자 사용도 가능
• 키 포인트는 대괄호로 묶어서 사용하는 것

funtion makeUser(key, value) {
   return {
      [key]: value
   }
}

let user1 = makeUser(“name”, “Kim”);
console.log(user1); // { “name”: “Kim” }

• 어떤 값이 키 프로퍼티가 될지 모를때 유용하다

📌 Object Method(객체 메서드)

1. Object.assign()
2. Object.keys()
3. Object.values()
4. Object.entries()
5. Object.fromEntries()

1️⃣ Object.assign() : 객체 복제

let user = {
   name: “Dany”,
   age: 30
}

let cloneUser = Object.assign({}, user);
console.log(cloneUser); // { name: “Dany”, age: 30 }
cloneUser.age = 29;

console.log(user); // { name: “Dany”, age: 30 }
console.log(cloneUser); // { name: “Dany”, age: 29 }

• 새로운 변수를 만들어 같은 객체를 바라보게 하면 객체를 담고있는 메모리 주소를 바라보기 때문에 복제가 아니라 같은 객체를 바라보고 있는 두 변수 가 된다.
• 때문에 위와 같은 방법으로 객체를 복제 한다.
• 예시와 같이 cloneUser의 age 값을 바꿔도 user(원본 객체)의 age값에는 영향이 없다.
• Object.assign({}, user) 구문에서 첫 번째 매개변수는 빈 객체 이고, 두 번째 매개변수는 복제할 원본 객체이다.

let user = { name: “Kim” }
let cloneUser = Object.assign({ gender: “male” }, user)
console.log(cloneUser); // { name: “Kim”, gender: “male” }

• 빈 객체 대신 키값 프로퍼티를 넣은 객체를 첫 번째 매개변수로 받을 수 있다.
• 이 경우 원본 객체 값을 추가해서 복제 객체를 만들어 낸다.
• 만약 같은 키값이 있다면 기존 복제 객체 값이 덮어씌워진다.

const user1 = { name: “Kim” };
const userInfo = { age: 30 };
const userInfo2 = { gender: “male” };

const human = Object.assign(user1, userInfo, userInfo2);
console.log(human); // { name: “Kim”, age: 30, gender: “male”  }

• 위 예제는 객체를 병합하여 새 객체를 생성.

2️⃣ Object.keys() : 객체의 키를 배열로 반환

3️⃣ Object.values() : 객체의 값을 배열로 반환

4️⃣ Object.entries() : 객체의 키와 값을 배열로 반환

5️⃣ Object.fromEntries() : 배열을 객체로 반환

let arr = [
   [“key”, “value”],
   [“key2”, “value2”]
]

let obj = Object.fromEntries(arr);

console.log(obj) { key: “value”, key2: “value2” }

• 배열안에 배열 그 안에 두 개의 요소가 있다.
• 첫 번째 요소가 키 프로퍼티.
• 두 번째 요소가 값 프로퍼티.
• 이 배열을 객체 형태로 반환 해주는 메서드이다.