1. 오늘의 학습 목표
학습 목표: 연관된 데이터의 묶음인 객체(Object)와 순서가 있는 데이터의 목록인 배열(Array)을 다루는 방법을 배웁니다. map, filter, forEach 등 실무에서 매우 유용하게 쓰이는 배열의 핵심 내장 메서드 활용법을 익힙니다.
핵심 요약: 객체와 배열은 JavaScript에서 복잡한 데이터를 표현하고 관리하기 위한 가장 기본적인 자료 구조입니다. 내장 메서드를 잘 활용하면 코드를 훨씬 간결하고 효율적으로 작성할 수 있습니다.
2. 핵심 개념 파헤치기
2.1. 객체 (Object)
객체는 이름(Key)과 값(Value)이 쌍으로 이루어진 데이터의 집합입니다. {} 중괄호를 사용하여 만들며, 키를 통해 데이터에 접근합니다. 한 사람의 정보처럼 여러 속성을 함께 묶어서 관리할 때 유용합니다.
const person = { name: 'Alice', age: 25, isAdmin: false };
- 접근: person.name (Dot notation) 또는 person['name'] (Bracket notation)
2.2. 배열 (Array)
배열은 순서가 있는 데이터의 목록입니다. [] 대괄호를 사용하여 만들며, 순서(Index)를 통해 데이터에 접근합니다. 인덱스는 0부터 시작합니다
const fruits = ['Apple', 'Banana', 'Cherry'];
- 접근: fruits[0] (결과: 'Apple')
- 길이: fruits.length (결과: 3)
2.3. 배열의 핵심 내장 메서드 (Key Array Methods)
배열은 데이터를 쉽게 다룰 수 있는 강력한 내장 함수(메서드)들을 제공합니다
- forEach(): 배열의 각 요소를 순회하면서 주어진 함수를 한 번씩 실행합니다. (반환 값 없음)
- map(): 배열의 각 요소에 주어진 함수를 실행한 결과를 모아 새로운 배열을 반환합니다. (원본 배열 불변)
- filter(): 배열의 각 요소에 주어진 함수를 실행하여, 결과가 true인 요소들만 모아 새로운 배열을 반환합니다. (원본 배열 불변)
3. 코드로 배우기
3.1. 구현 목표
사용자 정보가 담긴 객체들의 배열을 만들고, forEach, filter, map 메서드를 이용해 데이터를 가공하고 출력합니다.
3.2. [1단계: 데이터 구조 만들기 (객체 배열)]
여러 명의 사용자 정보를 담은 users 배열을 만듭니다. 각 사용자는 이름과 나이를 속성으로 갖는 객체입니다
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 17 },
{ name: 'Charlie', age: 32 },
{ name: 'David', age: 18 }
];
3.3. [2단계: forEach로 모든 사용자 이름 출력하기]
forEach 메서드로 users 배열을 순회하며 각 사용자의 이름을 콘솔에 출력합니다
console.log("--- 모든 사용자 이름 ---");
users.forEach(user => {
console.log(user.name);
});
3.4. [3단계: filter로 성인 사용자만 찾기]
filter 메서드를 사용하여 나이가 19세 이상인 사용자만 걸러내어 새로운 배열을 만듭니다.
console.log("\n--- 성인 사용자 ---");
const adults = users.filter(user => {
return user.age >= 19;
});
console.log(adults);
3.5. [4단계: map으로 사용자 이름 배열 만들기]
map 메서드를 사용하여 users 배열에서 각 사용자의 이름만 추출하여 새로운 문자열 배열을 만듭니다.
console.log("\n--- 사용자 이름만 모은 배열 ---");
const userNames = users.map(user => {
return user.name;
});
console.log(userNames);
4. 전체 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS Objects & Arrays</title>
</head>
<body>
<h1>F12를 눌러 개발자 도구 콘솔을 확인하세요.</h1>
<script>
const users = [
{ name: 'Alice', age: 25, role: 'admin' },
{ name: 'Bob', age: 17, role: 'user' },
{ name: 'Charlie', age: 32, role: 'user' },
{ name: 'David', age: 18, role: 'user' }
];
console.log("--- forEach: 모든 사용자 정보 출력 ---");
users.forEach(user => {
console.log(`이름: ${user.name}, 나이: ${user.age}, 역할: ${user.role}`);
});
console.log("\n--- filter: 성인 사용자만 필터링 ---");
const adults = users.filter(user => user.age >= 19);
console.log(adults);
console.log("\n--- map: 사용자 이름만 추출하여 새 배열 생성 ---");
const userNames = users.map(user => user.name);
console.log(userNames); //['Alice', 'Bob', 'Charlie', 'David']
</script>
</body>
</html>'개발 > 웹 개발' 카테고리의 다른 글
| Day 16: JavaScript 비동기 (콜백과 프로미스) (0) | 2024.08.18 |
|---|---|
| Day 15: JavaScript와 DOM (2) | 2024.08.14 |
| Day 13: JavaScript 함수와 제어문 (0) | 2024.08.12 |
| Day 12: JavaScript 데이터 타입과 변수 (1) | 2024.08.09 |
| Day 11: 반응형 웹 디자인과 CSS Grid (0) | 2024.08.08 |
