[JS] javascript object 의 여러가지 기능 - computed property, 다양한 메서드

예전 포스팅에서 object를 사용하는 방법에 대해 다뤘었다.

https://devkingdom.tistory.com/308?category=841890 

[JS] javascript 에서 객체 (object) 사용하기 - 객체 리터럴, 생성자

 

오늘은 object의 몇가지 기능들에 대해 추가적으로 포스팅하겠다.

 

Computed property

 

아래 코드를 보자.

const person = {
  name : 'kang',
  age : 33,
  gender : 'M'
}

단순하게 객체 리터럴로 객체를 만들어낸 것이다.

 

여기서 우리는 Computed property를 이용하여 특정 변수 값을 객체의  키값으로 넣을수가 있다.

const person = {
  name : 'kang',
  age : 33,
  ["gen"+"der"] : 'M',
  [10+20] : 30
}

위처럼 식 자체를 넣는 것도 가능하다.

 

아래와 같은 방식으로 computed property를 이용하여 함수로 key,value를 셋팅하여 객체를 만들어 낼 수도 있따.

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

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

console.log(obj);

객체의 여러 메서드

Object.assign()

해당 메서드는 객체를 딥 카피할 수 있는 메서드이다.

 

딥카피가 안되었을때의 문제를 예시를 통해 들겠다.

let person = {
  name : 'kang',
  age : 33,
}

const person2 = person;

person.age = 20;

console.log(person.age);
console.log(person2.age);

위 코드를 보면 person2에 person의 값을 넣고, person의 age값을 20으로 바꿨다.

 

여기서 내가 의도한 것은 person의 age만 20으로 변경되고, person2의 age는 33으로 유지되기를 바랬다.

 

그러나 결과는...

 

둘다 20으로 바껴버렸다. 이 이유는 바로 

const person2 = person

이 값 자체를 넣는게 아니라 

 

{
  name : 'kang',
  age : 33,
}

을 가리키는 주소값을 넣어주기에 , person2 와 person 이 가리키는 객체 자체는 동일해 지게 된다.

 

assign()을 통해 딥카피를 해주면 값자체를 복사할 수 있다. 딥카피를 해주면 person2와 person은 아예 다른 객체가 된다.

아래 코드를 보자.

let person = {
  name : 'kang',
  age : 33,
}

const person2 = Object.assign({}, person);

person.age = 20;

console.log(person.age);
console.log(person2.age);

이제  결과를 보면...

원하는대로 딥카피가 잘됐다. 

 

위의 코드는 {} 빈 객체를 초기값으로 넣어뒀는데,

아래 코드처럼 특정값을 미리 초기화 시킬 수도 있다. 

let person = {
  name : 'kang',
  age : 33,
}

const person2 = Object.assign({gender: 'M'}, person);

console.log(person2);

만약에 key 가 같은 값을 미리 초기화 시켜주면, value를 덮어쓰게 된다.

let person = {
  name : 'kang',
  age : 33,
}

const person2 = Object.assign({name: 'park'}, person);

console.log(person2);

그리고 assign() 을 이용해 객체들을 합쳐줄 수도 있다.

let person = {
  name : 'kang',
}

let age = {
  age : 33,
}

let gender = {
  gender : 'M',
}

Object.assign(person, age, gender);

console.log(person);

Object.keys() 와 Object.values() 

keys() 메서드는 key 값을 가진 배열을 리턴해주고 values() 메서드는 value 값들의 배열을 리턴해준다.

let person = {
  name : 'kang',
  age : 33,
  birth : '19900101'
}

console.log(Object.keys(person));
console.log(Object.values(person));

 

Object.entries() 와 Object.fromEntries()

entries() 메서드는 key와 value를 묶은 배열의 배열을 반환한다.

let person = {
  name : 'kang',
  age : 33,
  birth : '19900101'
}

console.log(Object.entries(person));

 

반대로 fromEntries() 메서드를 이용해서 이러한 형태의 배열을 객체로 만들 수도 있다.

let personArr = [
  ["name", "kang"],
  ["age", 33],
  ["birth", "19900101"]
];

console.log(Object.fromEntries(personArr));

 

끝.