Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript Object.values() 완벽 가이드 – 객체의 값만 손쉽게 추출하는 방법

JavaScript의 Object.values() 메서드는 객체에 담긴 값(value)들을 배열 형태로 반환합니다. 이 메서드의 결과를 반복문으로 순회하면 객체 내부의 각 값을 손쉽게 확인할 수 있습니다.

Object.values()가 필요한 이유

JavaScript 객체는 키(key)와 값(value)의 쌍으로 구성됩니다. 그런데 실무에서는 전체 데이터가 아니라 값만 필요한 경우가 자주 있습니다.

예를 들어 게임 리더보드 정보를 담은 객체가 있다고 가정해 봅시다. 여기서 우리가 필요한 것은 참가자들의 이름일 뿐, 이름과 연결된 키(즉, 순위 번호)는 필요하지 않을 수 있습니다. 이럴 때 유용하게 사용할 수 있는 것이 바로 Object.values() 메서드입니다.

이 글에서는 Object.values() 메서드의 동작 원리와 사용법을 예제와 함께 자세히 살펴보겠습니다.

JavaScript Object.values() 기본 문법

Object.values() 메서드는 객체를 인수로 받아, 해당 객체의 열거 가능한(enumerable) 속성 값들을 배열로 반환합니다. 반환되는 값들의 순서는 객체를 직접 순회하며 하나씩 배열에 담았을 때와 동일합니다.

기본 문법은 다음과 같습니다:

let players = {
	a: "lucy",
	b: "harry"
}

console.log(Object.values(players))

Object.values()는 단 하나의 인수, 즉 값을 확인하고 싶은 객체의 이름을 받습니다. 위 코드에서는 메서드의 실행 결과를 콘솔에 출력하고 있습니다.

이 코드를 실행하면 객체에 저장된 플레이어 이름인 lucy와 harry가 배열 형태로 반환됩니다:

["lucy", "harry"]

주목할 점은 반환된 값들이 원본 객체에 저장된 순서를 그대로 유지한다는 것입니다.

for 루프 대비 장점

Object.values() 없이도 같은 결과를 얻을 수는 있습니다. 새로운 빈 배열을 만들고 for 루프로 객체를 순회하면서 각 값을 배열에 추가하는 방식입니다. 하지만 이 방법은 코드가 더 길어지고 작성 시간도 더 걸립니다. Object.values()는 이 과정을 한 줄로 해결해 주는 간결하고 효율적인 방법입니다.

Object.values() 실전 예제

이번에는 실제 웹 페이지에서 활용하는 예제를 살펴보겠습니다. 미국 캘리포니아주 산호세(San Jose)시의 정보를 담은 객체가 있다고 가정해 보겠습니다. 우리는 각 데이터에 붙은 라벨(키) 없이 도시 정보 값들만 가져오고 싶습니다.

예를 들어 다음과 같은 키-값 쌍이 있을 때:

city: "San Jose",

우리가 원하는 것은 city라는 라벨이 아니라 "San Jose"라는 값 자체입니다.

이를 구현한 전체 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title></title>
 </head>
 <body>
   <div id="root"></div>
  <script async defer>
 
   const cityData =  {
     city: "San Jose",
     state: "California",
     area: 181.36,
     land: 178.24,
     water: 3.12,
     urban: 342.27,
     metro: 2694.61,
     elevation: 82,
     population: 1021795,
     timezone: "Los_Angeles/Pacific",
     website: "www.sanjoseca.gov"
   }
   let arr = Object.values(cityData);
 
   let root = document.getElementById('root');
   root.innerHTML = JSON.stringify(arr);
 
  </script>
 </body>
</html>

코드 단계별 설명

1. HTML 구조 설정: 먼저 <head> 태그와 <body> 태그, 그리고 기본적인 메타 정보를 포함하는 표준 HTML 페이지를 만듭니다.

2. 객체 선언: <script> 태그 안에 JavaScript 코드를 작성하고, cityData라는 이름의 객체를 선언합니다. 이 객체에는 도시 이름, 주, 면적, 인구 등 산호세시의 다양한 정보가 담겨 있습니다.

3. 값 추출: Object.values() 메서드를 사용해 cityData 객체의 모든 값을 배열로 가져옵니다.

4. 화면 출력: getElementById() 메서드로 id가 root인 <div> 요소를 선택한 뒤, innerHTML을 통해 Object.values()의 결과를 화면에 출력합니다.

이 코드를 실행하면 다음과 같은 배열이 출력됩니다:

["San Jose","California", 181.36, 178.24, 3.12, 342.27, 2694.61, 82, 1021795, "Los_Angeles/Pacific", "www.sanjoseca.gov"]

원본 객체에 있던 모든 값들이 키 없이 배열 형태로 깔끔하게 정렬되어 있는 것을 확인할 수 있습니다.

마치며

JavaScript의 Object.values() 메서드는 객체에 담긴 값들을 배열로 반환하는 강력하고 간단한 도구입니다. 인수로는 값을 추출하고자 하는 객체 이름 하나만 받으면 되기 때문에, 복잡한 반복문 없이도 원하는 데이터를 빠르게 얻을 수 있습니다.

JavaScript 학습을 더 깊이 있게 진행하고 싶다면, 아래 관련 튜토리얼도 함께 확인해 보세요:

  • JavaScript Object.keys(): 객체의 키 추출하기
  • JavaScript 객체(Object) 완벽 이해하기
  • JavaScript 클래스(Class): 객체 지향 프로그래밍의 시작