데이터를 구조화하면 다루기 쉬워진다#
학생 5명의 이름, 점수, 학년을 저장하려면 변수 15개가 필요할까요? 그렇지 않습니다. 배열과 객체를 활용하면 데이터를 체계적으로 관리할 수 있습니다.
배열 (Array) 심화#
배열 기본 조작#
JavaScript
const fruits = ["사과", "바나나", "딸기"];
// 추가
fruits.push("포도"); // 끝에 추가: ["사과", "바나나", "딸기", "포도"]
fruits.unshift("수박"); // 앞에 추가: ["수박", "사과", ...]
// 제거
fruits.pop(); // 마지막 제거 및 반환
fruits.shift(); // 첫 번째 제거 및 반환
// 포함 여부
fruits.includes("딸기"); // true
// 인덱스 찾기
fruits.indexOf("바나나"); // 1배열 메서드 — forEach#
배열의 각 요소를 순서대로 처리합니다.
JavaScript
const scores = [85, 92, 78, 95, 88];
scores.forEach((score, index) => {
console.log(`${index + 1}번: ${score}점`);
});배열 메서드 — map#
각 요소를 변환한 새 배열을 만듭니다.
JavaScript
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#
조건을 만족하는 요소만 추린 새 배열을 만듭니다.
JavaScript
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#
조건을 만족하는 첫 번째 요소 하나를 반환합니다.
JavaScript
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#
배열을 하나의 값으로 축약합니다.
JavaScript
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) 을 하나로 묶습니다.
JavaScript
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)#
JavaScript
const { name, age, school } = student;
console.log(name); // 홍길동
console.log(age); // 16객체 배열 — 실제 데이터 형태#
실제 웹앱에서 데이터는 대부분 이 형태입니다.
JavaScript
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()}원`);실전 예제: 학생 목록 렌더링#
HTML
<ul id="student-list"></ul>JavaScript
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("");직접 해보기 ✏️#
다음 데이터를 가지고 연습해보세요.
JavaScript
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: "드라마" },
];filter: 평점 8.4 이상인 영화만 추출map: 영화 제목 배열만 만들기find: 2019년에 나온 첫 번째 영화 찾기reduce: 평점 합계 구하기
정리#
| 메서드 | 역할 |
|---|---|
push/pop | 배열 끝 추가/제거 |
forEach | 각 요소 순회 |
map | 각 요소 변환한 새 배열 |
filter | 조건 만족하는 요소만 추린 새 배열 |
find | 조건 만족하는 첫 번째 요소 |
reduce | 하나의 값으로 축약 |
다음 편에서는 localStorage — 브라우저에 데이터를 저장해 새로고침해도 사라지지 않는 방법을 배웁니다.
