20강. 배열로 여러 데이터 관리하기

이번 강의의 결과물은 여러 프로젝트 이름을 하나의 배열에 저장하고 추가·조회·순회하는 JavaScript 코드입니다.

?1. 이번 강의에서 해결할 문제

프로젝트마다 project1, project2, project3 변수를 만들면 항목이 늘어날수록 반복 코드가 많아집니다. 같은 종류의 여러 값을 순서가 있는 하나의 목록으로 관리합니다.

✓학습 목표

• 프로젝트마다 project1, project2, project3 변수를 만들면 항목이 늘어날수록 반복 코드가 많아집니다. 같은 종류의 여러 값을 순서가 있는 하나의 목록으로 관리합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• 배열 리터럴: 대괄호 안에 여러 값을 작성한 목록
• 인덱스: 항목의 위치이며 0부터 시작
• length: 배열에 들어 있는 항목 수
• push(): 배열 끝에 항목 추가
• for...of: 배열의 값을 앞에서부터 하나씩 순회

const projects = ["게임 프로젝트", "웹 프로젝트"];
console.log(projects[0]);

배열 자체를 const로 선언해도 배열 안의 항목을 수정할 수 있습니다. const가 막는 것은 변수 이름에 완전히 다른 값을 다시 대입하는 동작입니다. 배열의 언어 동작은 TC39 ECMAScript 표준을 기준으로 합니다.

</>3. 코드 예시

파일명: web-basics/portfolio/js/main.js

const projectTitles = [
  "게임플레이 기능 프로젝트",
  "반응형 포트폴리오",
  "학습 기록 저장소",
];

console.log("첫 프로젝트:", projectTitles[0]);
console.log("프로젝트 수:", projectTitles.length);

projectTitles.push("문의 폼 개선 프로젝트");

for (const title of projectTitles) {
  console.log(`프로젝트: ${title}`);
}

function findLastProject(titles) {
  return titles[titles.length - 1];
}

console.log("마지막 프로젝트:", findLastProject(projectTitles));

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 배열이 네 개의 관련 문자열을 하나의 변수 아래 순서대로 보관합니다.
2. 첫 항목의 인덱스가 0이므로 projectTitles[0]으로 접근합니다.
3. length는 현재 항목 수를 반환합니다.
4. push가 배열 끝에 새 문자열을 추가해 length도 증가합니다.
5. for...of가 각 항목 값을 title에 차례로 연결합니다.
6. 마지막 인덱스는 항목 수보다 1 작으므로 length - 1로 계산합니다.

!5. 자주 하는 실수

• 첫 항목의 인덱스를 1로 생각함
• 마지막 항목을 array[array.length]로 조회함
• 존재하지 않는 인덱스의 undefined를 정상 데이터로 사용함
• 반복 중 배열을 계속 추가해 예상하지 못한 결과를 만듦
• 서로 관계없는 여러 종류의 값을 한 배열에 섞음
• const 배열에는 push도 할 수 없다고 생각함

✎6. 짧은 실습 과제

1. 자신의 프로젝트 또는 학습 주제 세 개로 배열을 만듭니다.
2. 첫 번째와 마지막 항목을 인덱스로 출력합니다.
3. push로 새 항목을 추가하고 length 변화를 확인합니다.
4. for...of로 모든 항목 앞에 번호 없이 출력합니다.
5. 빈 배열일 때 findLastProject가 무엇을 반환하는지 확인하고 처리 방법을 생각합니다.

완료 기준은 배열의 첫·마지막 값과 항목 수를 정확히 구하고 반복문으로 모든 값을 한 번씩 처리하는 것입니다.

?7. 이해 점검 질문 3개

1. 항목이 세 개인 배열의 마지막 인덱스는 몇인가요?
2. length - 1이 마지막 인덱스가 되는 이유는 무엇인가요?
3. const로 선언한 배열에 push()를 사용할 수 있는 이유는 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.