JavaScript 키-밸류 출력하는 다양한 방법

✅ 객체의 키-값 다루기 (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️⃣ 문자열 템플릿 ${}을 사용하여 "키: 값" 형식으로 출력됨.

---