[JS] Object methods & Computed property 객체 메소드와 계산된 프로퍼티

 

 

Computed property 계산된 프로퍼티

let a = "age";

const user = {
  name: "aoto",
  age: 30,
  //   [a]: 20, 윗 줄과 같은 코드
  //   [a]에 age가 할당된다.
};

 

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

console.log(user); // {5: 5, 안녕하세요: 'HELLO'} 이렇게 식으로도 작성 가능

 

+ 응용!! 어떤게 키 값이 될지 모를 때 객체 만들기 유용함

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

const obj = makeObj("age", 30); // {age: 30} 첫 값이 key가 됨

 

 

Object methods 여러 오브젝트 메소드

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

const cloneUser = user; // 복사가 아니라 참조값만 가져옴
// user와 cloneUser가 참조하는 값이 같아 cloneUser의 값을 바꾸면 user도 바뀜

 

Object.assign() : 복제할 때 사용

const newUser = Object.assign({}, user);
// {}는 초기값(현재 빈 값) , 두 번째 매개변수로 들어오는 user와 병합
// {} + { name : "aoto", age : 30 } 이런 식으로 복제됨
// (1, 2, 3) => 1 + 2 + 3

newUser.name = "yae";
console.log(user.name); // "aoto"
console.log(newUser.name); // "yae"
// newUser != user;

// 초기값에 프로퍼티가 있다면?
Object.assign({ gender: "female" }, user);
// {
//     gender:"femail",
//     name: "aoto",
//     age :30
// } 프로퍼티가 세 개가 됨

// 초기값에 키가 같다면?
Object.assign({ name: "yae" }, user);
// {
//     name: "aoto",
//     age :30
// } yae는 원래 값인 aoto로 덮어씌워짐

 

Object.keys() : 객체 프로퍼티의 키를 배열로 반환

Object.values() : 값을 배열로 반환

Object.entries() : 키, 값 모두 배열로 반환

Object.keys(user); // ["name", "age"]
Object.values(user); // ["aoto", 30]
Object.entries(user); // [["name", "aoto"], ["age", 30]]

 

Object.fromEntries() : entries의 반대! 키, 값 배열을 객체로 반환

const arr = [
  ["name", "aoto"],
  ["age", 30],
];

Object.fromEntries(arr); //{name: 'aoto', age: 30}

 

 

 

🔗 https://youtu.be/6NZpyA64ZUU?si=abT8nG4e7kE8jBSI