[자바스크립트] 가장 중요한 객체 다루기 Object.values() 함수 개념과 사용법

 

 

 

🤷‍♂️ 본론에 앞서 중요한 객체 지식 공부하기

---

자바스크립트에서 객체와 배열은 가장 중요한 데이터 자료구조 입니다.

javascript 객체(object)는 key와 value 형태로 이루어져 있으며 객체에는 많은 유용한 기능들이 있지만 객체를 읽고 key와 value 값에 대한 목록이 필요한 상황이 많습니다.

자바스크립트에서는 이러한 경우를 위해서 Object.keys()와 Object.values() 함수를 사용하면 객체를 유용하게 활용할 수 있습니다.

Object.keys()와 Object.values() 함수의 개념과 사용방법에 대한 예제를 알아보겠습니다.

 

 

가장 중요한 객체의 개념과 다루는 방법

https://cometruedream.tistory.com/261

[자바스크립트] 가장 중요한 자바스크립트 객체 생성과 조작, JSON, 메서드 개념과 사용법

🤷‍♂️ Object.keys() 함수란?

---

Object.keys() 함수는 객체의 프로퍼티를 배열로 반환하는 javascript 내장함수 입니다.

이 함수는 객체를 인수로 받아서 객체를 배열처럼 순회할수 있도록 반환합니다.

 

Object.keys()는 객체의 속성 이름(키) 배열을 반환하는 유용한 메서드입니다.

 

300x250

 

Object.keys() 예제?

객체 프로퍼티 key 값 목록 얻기

const car = { 
  make: 'Honda', 
  model: 'Accord', 
  year: 2020 
};

const keys = Object.keys(car);
keys.forEach(key => {
  console.log(`${key}: ${car[key]}`);
});

 

위에 예제 처럼 객체의 프로퍼티 key값를 배열로 반환하여 for문으로 순회하면서 원하는 목록을 만들수 있습니다.

 

🤷‍♂️ Object.values() 함수란?

---

Object.values() 함수는 객체의 프로퍼티를 배열로 반환하는 javascript 내장함수 입니다.

이 함수는 객체의 속성의 값을 배열로 반환이 필요할때 유용한 내장함수입니다.

 

Object.values()는 객체의 속성 값(value) 배열을 반환하는 유용한 메서드입니다.

 

Object.values() 예제?

const car = { 
    make: 'Honda', 
    model: 'Accord', 
    year: 2020 
};
const values = Object.values(car);
console.log(values);

values.forEach(value => {
  console.log(`${value}`);
});

 

위에 예제처럼 객체의 프로퍼티 value 값을 배열로 반환해서 for문을 순회해서 목록을 만들수 있습니다.

 

 

 

Object.values()와 Object.keys() 차이점?

Object.values()와 Object.keys() 함수의 차이점은 위에서 설명했듯이 Object.values() 함수는 객체 프로퍼티의 값(value) 배열로 반환하고 Object.keys 함수는 객체 프로퍼티의 key 값을 배열로 반환합니다.

 

쉽게이해하기

💡 Object.values 함수는 객체의 value를 배열로 반환해서 Object.values 반면에 Object.keys() 함수는 객체의 key를 배열로 반환해서 Object.keys 라고 생각하면 쉽게 이해할수 있습니다.

 

🤷‍♂️ 마지막으로

---

자바스크립트에서 객체의 개념과 객체의 사용법은 가장 중요한 기술입니다.

자바스크리트 언어를 다룬다면 객체는 필수적으로 다뤄야 할것이며 객채를 가지고 원하는 목록을 만들어야하는 상황이 올것이며 자바스크립트 제공하는 객체 내장함수들을 활용해서 다양한 상황에서 유용하게 사용할수 있습니다.

위에 예제들을 기반으로 다양한 실무에서 활용할수 있는 학습을 하면 좋을꺼 같습니다.

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리