자바스크립트에서 반복 작업을 처리할 때 가장 기본이 되는 문법이 바로 for 루프입니다. 자바스크립트의 for 루프는 크게 두 가지 형태로 나뉘는데, 하나는 초기화식·조건식·증감식을 사용하는 일반적인 for 루프이고, 다른 하나는 객체의 속성을 순회하는 for...in 루프입니다.
1. 기본 for 루프 (초기화 · 조건 · 증감식)
가장 널리 사용되는 형태는 for(초기화; 조건; 증감식) 구조입니다. 먼저 초기화문이 한 번 실행되고, 이후 매 반복마다 증감식이 실행된 뒤 조건식을 검사합니다. 조건이 참(true)인 동안 블록 내부의 코드가 계속 실행됩니다.
다음 예제는 0부터 4까지 총 5번 반복하면서 각 단계를 콘솔에 출력하는 코드입니다.
예제
var step;
for (step = 0; step < 5; step++) {
console.log('Taking step ' + step);
}실행 결과
Taking step 0 Taking step 1 Taking step 2 Taking step 3 Taking step 4
위 코드에서 step = 0은 카운터 변수를 초기화하고, step < 5는 반복을 지속할 조건, step++는 매 반복 후 값을 1씩 증가시키는 역할을 합니다.
2. for...in 루프
두 번째 형태인 for...in 루프는 객체를 다룰 때 유용합니다. for...in 문은 지정한 변수를 사용해 객체가 가진 모든 열거 가능한(enumerable) 속성을 순서대로 순회합니다. 각각의 고유한 속성마다 자바스크립트는 지정된 문장을 실행합니다.
아래 예제에서는 person 객체의 name과 age 속성을 차례로 읽어 출력합니다.
예제
let person = {
name: "John",
age: 35
};
for (let prop in person) {
console.log(prop, person[prop]);
}실행 결과
name John age 35
여기서 prop에는 객체의 키(name, age)가 담기고, person[prop]처럼 대괄호 표기법을 사용하면 해당 키에 연결된 값에 접근할 수 있습니다.
정리
일반 for 루프는 정해진 횟수만큼 반복할 때 적합하고, for...in 루프는 객체의 속성을 하나씩 탐색할 때 유용합니다. 두 루프의 특징과 용도를 잘 구분해서 상황에 맞게 활용하면 더 깔끔하고 효율적인 자바스크립트 코드를 작성할 수 있습니다.