JavaScript 반복문과 배열

이 토픽을 마치면

for와 while로 반복 작업을 만들 수 있고, 배열에 데이터를 넣고 꺼내고 순회하는 방법을 알게 됩니다.

같은 작업을 반복하기

"1부터 100까지 더해라", "사용자 목록을 하나씩 출력해라" — 같은 동작을 여러 번 실행해야 할 때 반복문을 씁니다.

javascript

// for문 — 가장 많이 쓰는 반복문
// (시작; 조건; 증가)
for (let i = 0; i < 5; i++) {
  console.log(`${i}번째 반복`);
}
// 0번째 반복
// 1번째 반복
// ...
// 4번째 반복

let i = 0 — 시작값, i < 5 — 계속할 조건, i++ — 한 바퀴 돌 때마다 i를 1 증가. 이 세 부분으로 반복 횟수를 제어합니다.

javascript

// while문 — 조건만으로 반복
let count = 0;
while (count < 3) {
  console.log(`count는 ${count}`);
  count++;
}
// count는 0
// count는 1
// count는 2

while은 조건이 true인 동안 계속 돕니다. count++를 빼먹으면 조건이 영원히 true → 무한 루프에 빠집니다. 반복문을 쓸 때는 "이 루프가 언제 끝나는가"를 항상 확인하세요.

배열 — 여러 값을 순서대로 저장

변수 하나에 값 하나만 담을 수 있다면, 사용자 100명의 이름을 저장하려면 변수 100개가 필요합니다. 배열(Array) 은 여러 값을 하나의 변수에 순서대로 저장합니다.

javascript

const fruits = ["사과", "바나나", "포도"];

// 인덱스로 접근 (0부터 시작!)
console.log(fruits[0]); // "사과"
console.log(fruits[2]); // "포도"
console.log(fruits.length); // 3

// 추가와 제거
fruits.push("딸기");     // 끝에 추가 → ["사과", "바나나", "포도", "딸기"]
fruits.pop();            // 끝에서 제거 → ["사과", "바나나", "포도"]

인덱스가 0부터 시작한다는 것에 주의하세요. 3개짜리 배열의 마지막 인덱스는 2입니다. 이것은 거의 모든 프로그래밍 언어의 공통 규칙입니다.

배열 + 반복문 = 데이터 처리

배열과 반복문을 결합하면 데이터를 하나씩 처리할 수 있습니다.

javascript

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

// for문으로 순회
let total = 0;
for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}
console.log(`평균: ${total / scores.length}`); // 평균: 87.8

// for...of — 더 깔끔한 순회
for (const score of scores) {
  if (score >= 90) {
    console.log(`${score}점 — A등급`);
  }
}
// 92점 — A등급
// 96점 — A등급

for...of는 인덱스가 필요 없을 때 쓰면 깔끔합니다. "배열의 각 요소를 하나씩 꺼내서" 라는 의미가 코드에 바로 드러납니다.

javascript

// 실무에서 더 자주 쓰는 배열 메서드
const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

map은 각 요소를 변환한 새 배열, filter는 조건에 맞는 요소만 골라낸 새 배열을 반환합니다. 반복문을 직접 쓰는 것보다 의도가 명확하기 때문에, 실무에서는 이 메서드들을 더 많이 씁니다.