JavaScript - 객체 표시

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 JavaScript에서 객체를 표시하는 세계로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 교사로서 저는 이 모험을 단계별로 안내해드리겠습니다. 그러면 가상의魔杖(키보드)을 손에 들고, JavaScript의 마법을 만들어보겠습니다!

JavaScript에서 객체 표시

먼저, JavaScript에서 객체는 무엇인가요? 상상해보세요, 어떤 것에 대한 다양한 정보를 담을 수 있는 마법의 상자가 있습니다. 바로 이게 객체입니다! 관련 데이터와 기능을 담는 컨테이너입니다.

간단한 예제로 시작해보겠습니다:

let wizard = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

여기서 우리는 wizard 객체를 name, age, house와 같은 프로퍼티로 만들었습니다. 하지만 이 객체를 어떻게 표시할까요? 단순히 출력을 시도해보면:

console.log(wizard);

콘솔에 다음과 같은 것을 볼 수 있습니다:

{name: "Harry", age: 17, house: "Gryffindor"}

이게 그리 흥미롭지 않죠? 우리 객체를 표시하는 더 마법 같은 방법을 탐구해보겠습니다!

객체 프로퍼티 접근

객체 정보를 표시하는 가장 간단한 방법 중 하나는 프로퍼티를 직접 접근하는 것입니다. 마치 마법의 상자를 열고 각 아이템을 개별적으로 보는 것과 같습니다.

console.log("Name: " + wizard.name);
console.log("Age: " + wizard.age);
console.log("House: " + wizard.house);

이렇게 하면 다음과 같은 출력이 나옵니다:

Name: Harry
Age: 17
House: Gryffindor

이제 각 프로퍼티를 명확히 볼 수 있습니다. 하지만 모든 프로퍼티를 하나씩 타이핑 없이 표시하고 싶다면, 다음 마법이 유용합니다!

JSON.stringify() 메서드 사용

JSON.stringify()는 객체에 대한 revelio 마법과 같습니다. 우리의 객체를 아름답게 포맷된 문자열로 변환합니다.

let wizardString = JSON.stringify(wizard);
console.log(wizardString);

이렇게 하면 다음과 같은 출력이 나옵니다:

{"name":"Harry","age":17,"house":"Gryffindor"}

이제 조금 더 예쁘게 만들 수 있습니다:

let prettyWizard = JSON.stringify(wizard, null, 2);
console.log(prettyWizard);

이렇게 하면!

{
"name": "Harry",
"age": 17,
"house": "Gryffindor"
}

2는 들여쓰기 공백의 수를 결정합니다. 마음에 드는대로 조정해도 됩니다!

Object.entries() 메서드 사용

이제 더 고급 마법을 배워보겠습니다: Object.entries(). 이 메서드는 우리의 객체를 키-밸류 쌍의 배열로 변환합니다.

let wizardEntries = Object.entries(wizard);
console.log(wizardEntries);

이렇게 하면 다음과 같은 출력이 나옵니다:

[
["name", "Harry"],
["age", 17],
["house", "Gryffindor"]
]

이제 이를 사용하여 표와 같은 표시를 만들 수 있습니다:

wizardEntries.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});

이렇게 하면 다음과 같은 출력이 나옵니다:

name: Harry
age: 17
house: Gryffindor

for...in 루프 사용

마지막으로 for...in 루프를 탐구해보겠습니다. 이는 우리의 객체의 각 프로퍼티를 하나씩 돌아보는 마법과 같습니다.

for (let property in wizard) {
console.log(property + ": " + wizard[property]);
}

이렇게 하면 이전 예제와 같은 결과가 나옵니다:

name: Harry
age: 17
house: Gryffindor

이제 이 모든 방법을 편리한 표로 정리해보겠습니다:

방법	설명	예제
직접 접근	프로퍼티 직접 접근	console.log(wizard.name)
JSON.stringify()	객체를 JSON 문자열로 변환	console.log(JSON.stringify(wizard))
Object.entries()	객체를 키-밸류 쌍의 배열로 변환	console.log(Object.entries(wizard))
for...in 루프	객체 프로퍼티 순회	for (let prop in wizard) { console.log(prop) }

기억해요, 젊은 마법사 여러분, 연습이 완벽을 만듭니다! 다양한 객체와 이 방법들을 시도해보세요. 얼마 지나지 않아 true JavaScript sorcerer처럼 객체를 표시할 수 있을 것입니다!

오늘의 수업을 마무리하면서, 제 수업 중 하나에서 일어난 재미있는 사건을 떠올립니다. 한 학생이 실수로 console.log(lizard) 대신 console.log(wizard)를 타이핑했고, 우리는 다음 10분 동안 왜 코드에 갑자기 도마뱀이 나타났는지 디버깅에 시간을 보냈습니다! 프로그래밍에서는 항상 타이핑을 두배로 확인하는 것이 중요합니다. 이렇게 하면 진짜 마법의 버그를 피할 수 있습니다!

오늘 JavaScript에서 객체를 표시하는 수업에 대해 이야기했습니다. 계속 연습하고, 호기심을 가지고, 가장 중요한 것은 코딩 모험을 즐기세요. 다음 번에 다시 만납시다, 코드가 버그 없고, 객체가 항상 아름답게 표시되길 바랍니다!

Credits: Image by storyset