본문 바로가기
FE/Javascript

Object.keys, values, entries, assign

by ideal_string 2022. 10. 3.

알고리즘을 풀다보면 메서드가 은근 유용할 때가 많다. 물론 효율성을 따지지 않는다는 조건에서다. 초보라면 효율성이나 속도보다 일단은 풀어내는 게 중요하기 때문에 알고리즘에 익숙해지기 전까진 메서드를 사용하더라도 풀어내는 데 의의를 두는 게 좋다고 본다. 그런 점에서 이번엔 객체 메소드 중 keys, values, entries, assign 4가지를 정리하려고 한다.

Object.keys()

keys() 메서드는 객체 키값을 배열로 반환한다. 

const heart = {
  one: 'love',
  two: 82,
  three: true
};

console.log(Object.keys(heart));// ["one", "two", "three"]

 

Object.values()

values() 메서드는 객체 값을 배열로 반환한다.

const heart = {
  one: 'love',
  two: 82,
  three: true
};

console.log(Object.values(heart));// ['love', 82, true]

 

Object.entries()

entries() 메서드는 키와 값을 한 쌍씩 배열로 반환한다.

const heart = {
  one: 'love',
  two: 82,
  three: true
};

console.log(Object.entries(heart));
// [
//   [ 'one', 'love' ],
//   [ 'two', 82 ],
//   [ 'three', true ]
// ]

 

Object.assign()

assign()메서드는 전자 객체에 후자 객체를 더하는데, 키가 중복일 경우 값을 덮어씌운다. 위 3개 메서드와 달리 객체 반환이다.

const heart = {
  one: 'love',
  two: 82,
  three: true
};

const person = {
  name: 'idealstring',
  age: 1,
  three: false
};

console.log(Object.assign(heart,person));
// {
//   one: 'love',
//   two: 82,
//   three: false,
//   name: 'idealstring',
//   age: 1
// }

 

마무리

지난 번 블로그에 반복문 메서드를 쓰다보니 잘 외워지고, 기억을 되살리는 효과가 있어서 객체 관련 메서드도 정리했다. 사실 keys() 메서드만 몇번 써보고, 다른 메서드는 한 번도 사용하지 않았다. 어떤 상황에서 사용해야 하는지 몰라서다. 존재하는 이유는 필요해서 일텐데... assign() 메서드는 병합 외에 깊은 복사 시 쓰고, entries()는 단독으로 쓰이기보다 reduce나 map과 함께 큰 값을 가진 값을 검사하는 함수를 만드는 등 조합해 사용할 수 있단다. values()는 학생들의 점수 평균을 구할 때나 쓰려나 싶다ㅎㅎ. 아직은 어디에 사용하는지 명확히 알지 못하지만, 미리 알아뒀으니 적절한 때에 이 메서드들이 떠오르길 바랄 뿐...!

 

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)

'FE > Javascript' 카테고리의 다른 글

정규 표현식  (0) 2022.10.10
Throttling & Debouncing at Search  (1) 2022.10.04
Shallow Copy & Deep Copy  (0) 2022.09.24
== & ===  (1) 2022.09.23
Primitive type & Reference type  (0) 2022.09.20