안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 똑똑하게 반복하는 ‘for 반복문’을 배웠죠? 오늘은 수많은 마법 재료를 하나하나 따로 보관하지 않고, 커다란 가방 하나에 몽땅 담아 관리하는 ‘마법 가방(배열, Array)’을 배워보겠습니다. 가방 하나만 잘 챙기면 수백 개의 재료도 잃어버리지 않을 수 있어요!
1. 배열(Array)이란 무엇인가요? ‘칸막이 보관함’
사탕 5개가 있는데 사탕1, 사탕2… 이렇게 변수를 5개나 만드는 건 너무 힘들어요. 대신 배열이라는 큰 상자를 만들고 그 안에 칸막이를 쳐서 사탕을 넣는 거죠. 자바스크립트에서는 대괄호 []를 사용해서 이 보관함을 만든답니다.
2. 가방에서 물건 꺼내기: 인덱스(Index) 마법
마법 가방에 들어간 재료들은 순서대로 번호표를 받아요. 주의할 점은 마법 세계의 번호표는 ‘0번’부터 시작한다는 거예요! 첫 번째 재료를 꺼내고 싶다면 0번 번호표를 불러야 하죠.
<!DOCTYPE html>
<html>
<body>
<h2>🎒 마법 재료 가방</h2>
<button onclick="open_bag()">가방 속 구경하기!</button>
<div id="bag_list" style="margin-top:20px; line-height:2;"></div>
<script>
function open_bag() {
// 1. 마법 재료들을 한 가방(배열)에 담아요
let magic_items = ["용의 비늘", "불꽃 열매", "달빛 가루", "얼음 수정"];
let display = document.getElementById("bag_list");
display.innerHTML = ""; // 화면 초기화
// 2. 지난번에 배운 반복문으로 가방을 탈탈 털어봐요!
for (let i = 0; i < magic_items.length; i++) {
display.innerHTML += (i + 1) + "번 칸: " + magic_items[i] + "<br>";
}
}
</script>
</body>
</html>3. 가방의 크기를 알려주는 마법: .length
가방 안에 재료가 몇 개나 들었는지 일일이 셀 필요 없어요. magic_items.length라고 물어보면 자바스크립트가 “지금 재료는 4개야!”라고 바로 답해준답니다. 이 마법 덕분에 재료가 늘어나거나 줄어들어도 반복문을 수정할 필요가 없어서 아주 편리해요.
4. 아이들과 함께하는 ‘보물 상자’ 놀이
실제 반찬통이나 보관함에 칸막이를 만들고 장난감을 하나씩 넣어보세요. 그리고 “0번 칸에 있는 거 꺼내줘!”라고 미션을 주며 인덱스 0번의 개념을 놀이로 익혀보세요. “가방에 물건이 몇 개 있지?”라고 묻고 직접 세어보게 하는 것이 바로 length의 원리입니다. 아이는 직접 손으로 만져보며 추상적인 코딩 개념을 구체적으로 이해하게 됩니다.
마치며: 정리 정돈의 달인이 된 마법사
이제 여러분은 수만 개의 데이터도 배열 가방 하나로 깔끔하게 정리할 수 있게 되었습니다! 정말 멋지죠? 다음 시간에는 이 가방 속에 든 재료들을 내 마음대로 넣었다 뺐다 하는 ‘동적 가방 관리법(push, pop)’을 배워볼게요. 다음 시간에 더 신기한 연금술로 만나요!
