[JavaScript] 반복문 - for

Moon·2024년 11월 9일

JavaScript | 기초

목록 보기

28/48

프로그래밍에서 반복문은 반복적인 작업을 자동으로 처리할 수 있게 해준다. 우리가 반복적으로 작업해야 할 일이 있다면, 이를 단순하게 반복문으로 구현할 수 있다. 특히 for문은 자바스크립트에서 가장 많이 사용되는 반복문으로, 일정 횟수만큼 반복하는 데 유용하다.

for문: 기본 구조

자바스크립트에서 for문의 기본 구조는 아래와 같다.

for (초기화 부분; 조건 부분; 추가 동작 부분) {
    동작 // 동작 부분
}

초기화 부분: 반복문이 시작할 때 가장 먼저, 단 한 번만 실행된다.
조건 부분: 이 조건이 참(true)이면 동작 부분을 실행한다. 거짓(false)이 되면 반복문이 종료된다.
추가 동작 부분: 동작 부분이 실행된 후, 반복할 때마다 실행되는 코드가 여기에 들어간다.

예제: for문을 활용한 반복 출력

예를 들어, "자바스크립트는 재밌다!"라는 문구를 10번 출력하고 싶다고 하자. 이를 for문으로 간단하게 작성할 수 있다.

// "자바스크립트는 재밌다!"를 10번 출력하는 반복문
for (let i = 1; i <= 10; i++) {
    console.log(`${i}번째: 자바스크립트는 재밌다!`);
}

위 예제에서 각 부분을 살펴보면:

초기화 부분 let i = 1;: 변수 i를 생성하고 1로 초기화한다. 이 변수 i는 반복 횟수를 저장하고 관리하는 역할을 한다.
조건 부분 i <= 10;: i가 10 이하일 때 반복을 계속 진행한다.
추가 동작 부분 i++: 반복할 때마다 i의 값을 1씩 증가시킨다.

이 코드를 실행하면, i가 10이 될 때까지 "자바스크립트는 재밌다!"가 10번 출력된다. 또한 템플릿 문자열을 사용하여 현재 몇 번째 반복인지 표시할 수 있다.

for문의 동작 순서

초기화 부분이 가장 먼저 실행된다. 여기서 i = 1로 초기화된다.
조건 부분이 참(true)인지 확인한다. 처음에는 i가 1이므로 조건이 참이다.
조건이 참이면 동작 부분이 실행된다. console.log로 현재 반복 횟수와 메시지를 출력한다.
추가 동작 부분이 실행되어 i의 값이 1 증가한다.
이후 조건 부분으로 돌아가 i가 10 이하인지 다시 확인하며, 조건이 참이면 동작 부분과 추가 동작 부분을 반복한다.
이 과정을 반복하다가 i가 11이 되어 조건이 거짓(false)이 되면 반복문이 종료된다.

for문에서의 변수 사용 패턴

for문에서 i 같은 변수를 사용하는 이유는 반복 횟수를 세거나 조건을 관리하기 위해서다. 예를 들어, 10번 반복하려면 변수 i를 1부터 시작해 10까지 증가시키는 것이 간편하다.

반복문을 활용하면 반복 횟수를 자유롭게 지정할 수 있다. 예를 들어, i <= 100으로 조건을 바꾸면 100번 출력이 가능하다.

for문을 활용한 다양한 예제

// 5번 반복하여 "반복 시작!" 출력하기
for (let i = 1; i <= 5; i++) {
    console.log(`반복 ${i}회: 반복 시작!`);
}

// 짝수만 출력하기
for (let i = 2; i <= 10; i += 2) {
    console.log(`${i}는 짝수입니다.`);
}

for문: 반복문 사용에 대한 추가적인 이해

for문을 통해 간단한 반복 작업을 처리하는 방법을 배웠는데, 이번에는 for문을 사용할 때 알아두면 좋은 몇 가지 추가적인 내용을 정리했다.

1. 추가 동작 부분을 비워둬도 된다

for문의 마지막 부분, 즉 추가 동작 부분은 꼭 채울 필요가 없다. 만약 추가 동작 부분을 비워둔다면, 동작 부분에서 반복에 필요한 처리를 할 수도 있다.

// 추가 동작 부분을 비워둔 예제
for (let i = 1; i <= 10;) {
    console.log(`${i} 자바스크립트 최고!`);
    i++;  // i의 값을 동작 부분에서 증가시킴
}

위 코드에서는 추가 동작 부분이 비어 있고, 대신 동작 부분에서 i++을 통해 값을 증가시킨다. 이 방식도 동작에는 문제가 없다. 다만, 코드의 목적을 더 명확히 하기 위해 반복 조건과 관련된 부분(i++)은 추가 동작 부분에 모아두고, 동작 부분에는 반복할 작업만 작성하는 것이 권장된다. 이렇게 하면 코드의 가독성이 높아진다.

2. 초기화 부분에서 생성한 변수는 로컬 변수다

for문의 초기화 부분에서 생성한 변수는 for문 내부에서만 유효하다. 즉, for문 안에서 선언한 let i는 for문이 종료되면 더 이상 접근할 수 없다.

// i는 for문 내부에서만 유효한 로컬 변수
for (let i = 1; i <= 10; i++) {
    console.log(`${i} 자바스크립트 최고!`);
}

console.log(i);  // Error: i is not defined

위 코드처럼 for문 외부에서 i에 접근하려고 하면 오류가 발생한다. for문 안에서 선언된 let i는 해당 블록 내에서만 유효하기 때문이다. 이러한 특성 덕분에, for문에서 사용된 변수는 반복문을 벗어나면 자동으로 메모리에서 해제되기 때문에 메모리 관리에도 유리하다.

3. 초기화 부분도 비울 수 있다

초기화 부분도 꼭 채울 필요가 없다. for문 외부에서 이미 변수를 초기화해 사용해야 할 경우, 초기화 부분을 비워둘 수 있다.

let i = 1;  // for문 밖에서 초기화한 변수

for (; i <= 10; i++) {
    console.log(`${i} 자바스크립트 최고!`);
}

위 예제에서 i는 for문 외부에서 선언 및 초기화되었고, for문 내부에서 추가 동작 및 조건만을 설정했다. 이런 방식으로 for문에서 글로벌 변수를 활용할 수도 있다.

단, 세미콜론(;)은 생략할 수 없다. 초기화 부분이 비어 있어도 조건 부분과 추가 동작 부분을 구분하기 위한 첫 번째 세미콜론은 반드시 있어야 한다. for문의 소괄호 내부에는 세미콜론이 2개 있어야 하므로, 아래처럼 작성하면 오류가 발생하게 된다.

// 세미콜론이 하나 부족한 오류 코드
for ( i <= 10; i++) {  // SyntaxError 발생
    console.log(`${i} 자바스크립트 최고!`);
}

요약

for문은 일정 횟수만큼 반복이 필요한 경우 매우 유용하다.

각 반복은 초기화 => 조건 확인 => 동작 => 추가 동작 순서로 이루어진다.

i++과 같은 추가 동작을 통해 반복 횟수를 세는 등의 작업을 간단하게 할 수 있다.

for 반복문 Tip

추가 동작 부분은 비워도 되지만, 조건과 반복과 관련된 처리는 추가 동작 부분에 두는 것이 좋다.

초기화 부분에서 생성된 변수는 for문 내부에서만 유효하며, for문이 종료되면 더 이상 사용할 수 없다.

초기화 부분도 생략할 수 있지만, 세미콜론(;)은 반드시 두 개가 필요하다.