안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 재료를 차곡차곡 담는 ‘마법 가방(배열)’을 배웠죠? 오늘은 가방보다 훨씬 진화한 형태인 ‘마법 오브젝트(Object)’를 배워보겠습니다. 단순한 목록을 넘어, 이름과 나이, 마력 수치까지 상세하게 기록된 ‘진짜 마법사 신분증’을 만드는 마법이에요!
1. 오브젝트란 무엇인가요? ‘이름표가 붙은 상자’
배열이 그냥 순서대로 물건을 던져 넣는 가방이었다면, 오브젝트는 칸마다 이름표가 붙어 있는 커다란 수납장과 같아요. ‘이름’ 칸에는 ‘민수’, ‘레벨’ 칸에는 ‘5’라고 적어두는 것이죠. 자바스크립트에서는 중괄호 {}를 사용해서 이 멋진 수납장을 만든답니다.
2. 마법사 신분증 만들기 (코드)
마법사의 여러 가지 정보를 하나의 변수에 담고, 마침표(.)를 찍어서 원하는 정보만 쏙 꺼내오는 마법을 부려봅시다.
<!DOCTYPE html>
<html>
<body>
<h2>🆔 마법사 신분증 조회</h2>
<button onclick="show_wizard()">신분증 꺼내기!</button>
<div id="id_card" style="margin-top:20px; padding:15px; border:2px solid gold; background:#fffdec;"></div>
<script>
function show_wizard() {
// 1. 마법사 정보를 오브젝트(Object)에 담아요
let wizard = {
name: "해리",
level: 10,
skill: "익스펙토 페트로눔",
hp: 100
};
// 2. 마침표(.) 마법으로 정보를 꺼내서 보여줘요
let card = document.getElementById("id_card");
card.innerHTML = "<strong>이름:</strong> " + wizard.name + "<br>" +
"<strong>레벨:</strong> " + wizard.level + "<br>" +
"<strong>주특기:</strong> " + wizard.skill;
}
</script>
</body>
</html>3. 키(Key)와 값(Value)의 환상 조합
오브젝트 안에는 키(Key)와 값(Value)이 짝을 지어 살고 있어요.
1. 키(Key): 이름표예요. (예: name, level)
2. 값(Value): 진짜 내용물이에요. (예: “해리”, 10)
우리가 wizard.name이라고 부르는 것은 “wizard라는 수납장에서 name이라는 이름표가 붙은 칸의 내용물을 가져와!”라고 명령하는 것과 같답니다.
4. 아이들과 함께하는 ‘신분증 만들기’ 놀이
종이 카드를 여러 장 준비해서 아이가 좋아하는 캐릭터의 ‘능력치 카드’를 만들어보세요. ‘힘: 90’, ‘지능: 80’처럼 이름표와 숫자를 적게 한 뒤, 아빠가 “힘 카드 보여줘!”라고 하면 아이가 그 부분을 가리키게 하는 거죠. 이게 바로 오브젝트 접근의 원리입니다. 아이는 복잡한 정보도 이름표를 붙이면 체계적으로 관리할 수 있다는 점을 배우게 됩니다.
마치며: 복잡한 세상도 코딩으로 정리 완료!
이제 여러분은 사람이나 물건처럼 복잡한 대상을 컴퓨터가 이해할 수 있는 ‘오브젝트’로 변신시킬 수 있게 되었습니다. 정말 대단한 실력이에요! 다음 시간에는 자바스크립트 연금술 시리즈의 마지막 수업, 여러 가지 마법을 묶어서 실행하는 ‘마법 주문서(함수 심화)’를 배우며 2기를 마무리하겠습니다!
