🫠 자료구조/알고리즘 문제를 풀면서 객체 {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 값이 출력된 것을 확인할 수 있다.
'프론트엔드 > JAVASCRIPT' 카테고리의 다른 글
[javascript] 유사배열과 배열의 차이점 및 공통점 정리 (0) | 2023.03.07 |
---|---|
[javascript] replace(), replaceAll(), 정규표현식 new RegExp() 정리 (0) | 2023.03.06 |
[javascript] callback함수로 오름차순/내림차순 정렬 (0) | 2023.02.23 |
[javascript] 배열(Array) 변형 sort()와 reverse() (0) | 2023.02.22 |
[javascript] 객체 복사의 문제점 해결 방안 '깊은 복사(deep copy)' - JSON 객체 이용 (0) | 2023.02.21 |