배열과 객체 — 데이터를 구조적으로 다루기

데이터를 구조화하면 다루기 쉬워진다

학생 5명의 이름, 점수, 학년을 저장하려면 변수 15개가 필요할까요? 그렇지 않습니다. 배열과 객체를 활용하면 데이터를 체계적으로 관리할 수 있습니다.

---

배열 (Array) 심화

배열 기본 조작

const fruits = ["사과", "바나나", "딸기"];

// 추가
fruits.push("포도");          // 끝에 추가: ["사과", "바나나", "딸기", "포도"]
fruits.unshift("수박");       // 앞에 추가: ["수박", "사과", ...]

// 제거
fruits.pop();                 // 마지막 제거 및 반환
fruits.shift();               // 첫 번째 제거 및 반환

// 포함 여부
fruits.includes("딸기");      // true

// 인덱스 찾기
fruits.indexOf("바나나");     // 1

---

배열 메서드 — forEach

배열의 각 요소를 순서대로 처리합니다.

const scores = [85, 92, 78, 95, 88];

scores.forEach((score, index) => {
  console.log(`${index + 1}번: ${score}점`);
});

---

배열 메서드 — map

각 요소를 변환한 새 배열을 만듭니다.

const numbers = [1, 2, 3, 4, 5];

// 각 숫자를 2배로
const doubled = numbers.map(n => n * 2);
console.log(doubled);   // [2, 4, 6, 8, 10]

// 점수에 등급 붙이기
const scores = [85, 62, 90, 45, 78];
const graded = scores.map(score => ({
  score,
  grade: score >= 90 ? "A" : score >= 70 ? "B" : "C"
}));

---

배열 메서드 — filter

조건을 만족하는 요소만 추린 새 배열을 만듭니다.

const scores = [85, 62, 90, 45, 78];

const passing = scores.filter(score => score >= 60);
console.log(passing);   // [85, 62, 90, 78]

const failing = scores.filter(score => score < 60);
console.log(failing);   // [45]

---

배열 메서드 — find

조건을 만족하는 첫 번째 요소 하나를 반환합니다.

const students = [
  { name: "홍길동", score: 85 },
  { name: "김철수", score: 92 },
  { name: "이영희", score: 78 },
];

const topStudent = students.find(s => s.score >= 90);
console.log(topStudent);   // { name: "김철수", score: 92 }

---

배열 메서드 — reduce

배열을 하나의 값으로 축약합니다.

const scores = [85, 92, 78, 95, 88];

const total = scores.reduce((sum, score) => sum + score, 0);
console.log(total);   // 438

const average = total / scores.length;
console.log(average.toFixed(1));   // 87.6

---

객체 (Object)

여러 속성(property) 을 하나로 묶습니다.

const student = {
  name: "홍길동",
  age: 16,
  school: "OO중학교",
  grades: { math: 95, english: 88, science: 91 }
};

// 속성 접근
console.log(student.name);         // 홍길동
console.log(student.grades.math);  // 95

// 속성 변경
student.age = 17;

// 속성 추가
student.hobby = "코딩";

// 속성 삭제
delete student.hobby;

객체 구조 분해 (Destructuring)

const { name, age, school } = student;
console.log(name);    // 홍길동
console.log(age);     // 16

---

객체 배열 — 실제 데이터 형태

실제 웹앱에서 데이터는 대부분 이 형태입니다.

const products = [
  { id: 1, name: "노트북", price: 1200000, category: "전자기기" },
  { id: 2, name: "마우스", price: 45000,   category: "전자기기" },
  { id: 3, name: "책상",   price: 350000,  category: "가구" },
  { id: 4, name: "의자",   price: 280000,  category: "가구" },
];

// 전자기기만 필터
const electronics = products.filter(p => p.category === "전자기기");

// 이름만 추출
const names = products.map(p => p.name);

// 가격 합계
const total = products.reduce((sum, p) => sum + p.price, 0);
console.log(`총 가격: ${total.toLocaleString()}원`);

---

실전 예제: 학생 목록 렌더링

<ul id="student-list"></ul>

const students = [
  { name: "홍길동", score: 85, grade: "B" },
  { name: "김철수", score: 92, grade: "A" },
  { name: "이영희", score: 78, grade: "B" },
  { name: "박민수", score: 61, grade: "C" },
];

const list = document.querySelector("#student-list");

list.innerHTML = students
  .map(s => `
    <li>
      <strong>${s.name}</strong>
      — ${s.score}점 (${s.grade})
    </li>
  `)
  .join("");

---

직접 해보기 ✏️

다음 데이터를 가지고 연습해보세요.

const movies = [
  { title: "인터스텔라", year: 2014, rating: 8.6, genre: "SF" },
  { title: "기생충",     year: 2019, rating: 8.5, genre: "드라마" },
  { title: "어벤져스",   year: 2012, rating: 8.0, genre: "액션" },
  { title: "라라랜드",   year: 2016, rating: 8.0, genre: "뮤지컬" },
  { title: "조커",       year: 2019, rating: 8.4, genre: "드라마" },
];

1. filter: 평점 8.4 이상인 영화만 추출
2. map: 영화 제목 배열만 만들기
3. find: 2019년에 나온 첫 번째 영화 찾기
4. reduce: 평점 합계 구하기

---

정리

메서드	역할
push/pop	배열 끝 추가/제거
forEach	각 요소 순회
map	각 요소 변환한 새 배열
filter	조건 만족하는 요소만 추린 새 배열
find	조건 만족하는 첫 번째 요소
reduce	하나의 값으로 축약

다음 편에서는 localStorage — 브라우저에 데이터를 저장해 새로고침해도 사라지지 않는 방법을 배웁니다.