프론트엔드/JAVASCRIPT

[javascript] 객체(object)의 key, value 값 가져오기

진기명기 2023. 2. 28. 22:43

 

🫠 자료구조/알고리즘 문제를 풀면서 객체 {key : value} 접근은 거의 하지 않고, 다른 방법으로 문제를 풀었었는데, 
key와 value값에 접근하면 문제를 쉽게 풀 수 있다는 점을 알았다..! 객체와 친해지기 위해 아래와 같이 정리를 해보려고 한다.

 

 


 객체(object)를 하나 생성해 보자
/* 객체(object) 생성 */

let numbers = { 
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

console.log(numbers) //{ '1': 0, '2': 1, '3': 2, '4': 3, '5': 4 }

 

 

 

🫠 객체의 key 값을 가져와보자 ①

> 입력형식 : Object.keys(객체)

let numbers = { 
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

console.log(Object.keys(numbers)) // [ '1', '2', '3', '4', '5' ]
👉🏻 output : 주석 처리 확인
✅  numbers 객체의 key 값들만 가져온 것을 알 수 있다.

 

 

 

🫠 객체의 key 값을 가져와보자 ②

>  for in문을 사용하여 key 값만 출력

// for in문으로 순회하여 key 값 출력하기

for(let k in numbers){
  console.log(k)
}

/*
1
2
3
4
5
*/
👉🏻 output : 주석 처리 확인
✅  numbers 객체의 key 값을 let k로 받아, 하나씩 출력하였다.

 

 

 


🫠 객체의 value 값을 가져와보자 ①

> 입력형식 : Object.values(객체)

let numbers = { 
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

console.log(Object.values(numbers)) // [ 0, 1, 2, 3, 4 ]
👉🏻 output : 주석 처리 확인
✅  numbers 객체의 values 값들만 가져온 것을 알 수 있다.

 

 


🫠 객체의 value 값을 가져와보자 ②

>  for in문을 통해 value 값을 가져와보자

let numbers = {
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

for(let k in numbers){
  console.log(numbers[k])
}
/*
0
1
2
3
4
*/
👉🏻 output : 주석 처리 확인
✅  Object[key]를 하면 해당 key의 value 값을 반환한다. 

 

 

 


🫠 key & value를 동시에 가져와보자 ①

> 입력 형식 : Object.entries()

let numbers = {
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

console.log(Object.entries(numbers))

// [ [ '1', 0 ], [ '2', 1 ], [ '3', 2 ], [ '4', 3 ], [ '5', 4 ] ]
👉🏻 output : 주석 처리 확인
✅  Object.entries()를 하면 key와 value값을 가져오며, 주석을 확인 시, 1은 0번째 자리, 2는 1번째 자리,... 5는 4번째 자리로 나타내었다.

 

 

 

🫠 key & value를 동시에 가져와보자 

> for in문을 통해 key & value 값을 가져와보자

let numbers = {
  1 : 0, 
  2 : 1, 
  3 : 2,
  4 : 3,
  5 : 4
}

for(let k in numbers){
  console.log(k, numbers[k])
}

/*
1 0
2 1
3 2
4 3
5 4
*/
👉🏻 output : 주석 처리 확인
✅  key value 값이 출력된 것을 확인할 수 있다.