✅ 객체의 키-값 다루기 (JavaScript)
📌 1. 기본적인 설명
const [orderInfo, setOrderInfo] = useState({ column: 'name', ordering: 'asc' });
orderInfo
를 사용하면{ column: 'name', ordering: 'asc' }
값이 들어 있음.setOrderInfo
를 호출하면 상태가 변경됨.
📌 2. 객체에서 키값을 이용해 값 가져오기
console.log(orderInfo.column); // 'name'
console.log(orderInfo.ordering); // 'asc'
📌 3. 여러 개의 값 한 번에 출력하기
console.log(orderInfo.column, orderInfo.ordering); // 'name' 'asc'
console.log(Object.values(orderInfo)); // ['name', 'asc']
📌 4. 동적 키 값 가져오기
4-1. 배열을 활용한 동적 접근
const keys = ['column', 'ordering'];
keys.forEach((key) => {
console.log(orderInfo[key]); // 'name', 'asc' 출력
});
4-2. 변수를 활용한 동적 접근
const key1 = 'column';
console.log(orderInfo[key1]); // 'name'
const key2 = 'ordering';
console.log(orderInfo[key2]); // 'asc'
4-3. 입력값을 활용한 동적 접근
const user = { username: "JohnDoe", email: "john@example.com" };
const inputField = "email";
console.log(user[inputField]); // "john@example.com"
📌 5. 점 표기법 vs 대괄호 표기법
const obj = { name: "Alice" };
// 점 표기법: 정적인 키에만 사용 가능
console.log(obj.name); // "Alice"
// 대괄호 표기법: 변수를 활용한 동적 접근 가능
console.log(obj["name"]); // "Alice"
📌 6. 반복문을 사용해 키-값 출력하기
const person = { firstName: "Bob", lastName: "Smith", age: 30 };
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
✅ key
변수에는 객체의 키(속성 이름)이 저장됨.
✅ person[key]
를 사용하면 해당 키의 값(value)이 출력됨.
📌 7. 객체의 특정 속성만 출력
console.log(`column: ${orderInfo.column}, ordering: ${orderInfo.ordering}`);
// "column: name, ordering: asc"
📌 8. JSON.stringify() 사용 (객체를 문자열로 변환)
console.log(`${JSON.stringify(orderInfo)}`);
// '{"column":"name","ordering":"asc"}'
✅ 객체를 JSON 형식의 문자열로 변환하여 키-밸류 쌍 출력 가능
📌 9. Object.entries()로 키-밸류 출력
9-1. 키-값을 배열로 변환
console.log(Object.entries(orderInfo));
// [ ['column', 'name'], ['ordering', 'asc'] ]
9-2. map()
과 join()
을 사용한 문자열 변환
console.log(Object.entries(orderInfo).map(([key, value]) => `${key}: ${value}`).join(', '));
// "column: name, ordering: asc"
✅ map(([key, value]) =>
${key}: ${value})
- 각 배열 요소(
['column', 'name']
,['ordering', 'asc']
)를 순회하면서 변환 - 구조 분해 할당(
([key, value])
)을 사용해key
와value
를 추출 - 백틱(
`
)을 사용해"column: name"
형식의 문자열 생성
✅ join(', ')
- 배열의 요소들을
", "
로 연결하여 하나의 문자열로 변환
📌 10. JSON.stringify() vs Object.entries() 출력 비교
방법 | 출력 결과 | 특징 |
---|---|---|
JSON.stringify(orderInfo) |
{"column":"name","ordering":"asc"} |
JSON 형식으로 변환 |
Object.entries(orderInfo).map(...) |
"column: name, ordering: asc" |
가독성이 좋은 텍스트 형식 |
✅ 모든 키-밸류를 JSON 형식으로 출력하려면 JSON.stringify()
사용
✅ 가독성이 좋은 텍스트 형식으로 출력하려면 Object.entries()
활용
🚨 잘못된 사용 예시
1️⃣ 키가 존재하지 않을 경우 → undefined
출력
const key = 'price';
console.log(orderInfo[key]); // undefined (존재하지 않는 키)
2️⃣ 객체를 직접 문자열 템플릿에 넣었을 때 → [object Object]
출력
console.log(`${orderInfo}`); // [object Object]
📌 객체를 문자열로 변환할 때 기본적으로 toString()
이 호출되며, 기본값은 [object Object]
이다.
🔥 핵심 정리
1️⃣ 객체에 []
를 사용하여 키와 일치하는 변수를 넣으면 해당 키의 값(value)이 출력됨.
2️⃣ for...in
문에서 key
변수에는 객체의 키 값이 하나씩 들어감.
3️⃣ person[key]
는 대괄호 표기법을 사용해 해당 키의 값(value)을 가져옴.
4️⃣ 문자열 템플릿 ${}
을 사용하여 "키: 값"
형식으로 출력됨.
'웹 개발' 카테고리의 다른 글
배열 정렬 하기 - toSorted(), Sort() (1) | 2025.02.15 |
---|---|
JavaScript 객체 및 데이터 변환 정리 (0) | 2025.02.15 |
JavaScript의 배열 메서드 (0) | 2025.02.13 |
이벤트 객체(event)에서 자주 사용하는 속성 (0) | 2025.02.12 |
React - HTTP 전송 방식 (0) | 2025.02.12 |