날아라김지원
article thumbnail
Published 2022. 4. 2. 00:28
Object key와 value 사용하기 Javascript

key:value으로 이루어진 Object자료형에서 key와 value를 사용하는법

 

1.key사용하기

Object.keys(오브젝트변수명)

그리고 순서대로 사용하려면

Object.keys(오브젝트변수명)[0]

Object.keys(오브젝트변수명)[1]

....

 

2.value사용하기

Object.values(오브젝트변수명)

그리고 순서대로 사용할며녀

Object.values(오브젝트변수명)[0]

Object.values(오브젝트변수명)[1]

....

 

이와같이 사용해주면 된다.

 

  let obtest =
  {
    "94": "안성탕면",
    "201": "불닭볶음면",
    "73": "올리브짜파게티"
  }

오늘 이와같이 보내지는 API를 뽑아 key, value 두가지를 사용해야했는데 이때 참고한 방식이다.

     {Object.keys(obtest)}
      {Object.keys(obtest)[0]}
      {Object.keys(obtest)[1]}
      {Object.keys(obtest)[2]}
      {Object.values(obtest)}
      ----------------------------------------
      {Object.values(obtest)[0]}
      {Object.values(obtest)[0]}
      {Object.values(obtest)[0]}

이와같이 테스트 해보았고

이와같이 출력되서, react컴포넌트 내에서 잘 사용했다.

 

해당 자료 그대로 props로도 줄 수 있고, 변수에 넣어서도 잘 활용할 수 있다.

 

- 참고한링크

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/values

 

Object.values() - JavaScript | MDN

Object.values() 메소드는 전달된 파라미터 객체가 가지는 (열거 가능한) 속성의 값들로 이루어진 배열을 리턴합니다. 이 배열은 for...in 구문과 동일한 순서를 가집니다. (for in 반복문은 프로토타

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

 

Object.keys() - JavaScript | MDN

Object.keys() 메소드는 주어진 객체의 속성 이름들을 일반적인 반복문과 동일한 순서로 순회되는 열거할 수 있는 배열로 반환합니다.

developer.mozilla.org

https://www.delftstack.com/ko/howto/javascript/get-key-of-object-javascript/

 

'Javascript' 카테고리의 다른 글

스코프, 클로져(Closure)  (0) 2022.04.06
setTimeout() 함수 쿡북  (0) 2022.04.02
새로고침 메서드 location.reload()  (0) 2022.04.02
includes() 메서드 (포함,특정요소포함)  (0) 2022.03.29
JSON(JavaScript Object Notation)  (0) 2022.02.17
profile

날아라김지원

@flykimjiwon

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!