자바스크립트 for문 응용 예제 모음

자바스크립트에서의 for문 활용 예제

자바스크립트는 웹 개발에 있어 필수적인 프로그래밍 언어로, 다양한 상황에서 효과적으로 사용할 수 있는 반복문이 존재합니다. 그 중에서도 for문은 가장 널리 사용되며, 간단한 반복부터 복잡한 데이터 반복까지 다양한 용도로 활용됩니다. 이번 글에서는 자바스크립트의 for문의 기초와 여러 응용 예제를 소개하겠습니다.

for문의 기본 구조

for문은 다음과 같이 구성됩니다:

for (초기화; 조건; 증감) {
  // 실행할 코드
}

여기서 초기화는 반복문이 시작될 때 한 번만 실행되며, 조건은 반복문이 계속 실행될지를 결정합니다. 마지막으로 증감은 각 반복이 끝난 후에 실행되어 반복 변수를 증가시키거나 감소시킵니다.

예시:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4가 출력됩니다.
}

위 코드는 0부터 4까지의 숫자를 출력하는 간단한 반복문입니다. 반복문이 작동하는 방식은 당연히 유용한 개념이므로 주의 깊게 살펴보아야 합니다.

for문 활용 예제

다양한 상황에서 for문을 활용하는 방법에 대해 알아보겠습니다.

1. 1부터 100까지의 정수 출력

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

위 코드 조각은 1부터 100까지의 모든 정수를 출력합니다. 여기서 초기값, 조건, 증감이 직관적으로 설정된 점이 특징입니다.

2. 짝수만 출력하기

짝수만 출력하고 싶을 때는 조건문을 추가할 수 있습니다.

for (let i = 1; i <= 100; i++) {
  if (i % 2 === 0) {
    console.log(i); // 짝수만 출력
  }
}

이 예제는 1부터 100까지의 수 중에서 2로 나누었을 때 나머지가 0인 숫자, 즉 짝수만을 출력합니다.

3. 특정 배수 출력하기

예를 들어 5의 배수만 출력하려면 다음과 같이 작성할 수 있습니다.

for (let i = 1; i <= 100; i++) {
  if (i % 5 === 0) {
    console.log(i); // 5의 배수 출력
  }
}

이 코드는 1부터 100까지의 숫자 중 5로 나누었을 때 나머지가 0인 숫자들만 출력하는 용도로 사용됩니다.

4. 중첩 for문을 이용한 구구단

중첩 for문을 사용하여 구구단을 출력할 수 있습니다.

for (let i = 2; i <= 9; i++) {
  console.log(i + "단");
  for (let j = 1; j <= 9; j++) {
    console.log(i + " * " + j + " = " + (i * j));
  }
}

이 예시는 2단부터 9단까지의 구구단을 출력하는 코드입니다. 외부 반복문은 곱할 숫자를 결정하고, 내부 반복문은 1부터 9까지의 곱을 출력합니다.

5. 테이블 생성

for문을 사용하여 HTML 테이블을 동적으로 생성할 수도 있습니다.

let table = "";
for (let i = 1; i <= 10; i++) {
  table += "";
  for (let j = 1; j <= 10; j++) {
    table += "";
  }
  table += "";
}
table += "
" + (i * j) + "
";
document.write(table);

이 코드 조각은 10x10 크기의 곱셈 테이블을 생성하여 브라우저에 표시합니다. 첫 번째 for문은 행을 생성하고, 내부 for문은 각 열의 값을 채웁니다.

for문 구성 요소의 생략

for문의 초기화, 조건, 증감 요소 중 일부는 생략할 수도 있습니다. 예를 들어, 초기화 부분을 생략하고 기존에 선언된 변수를 사용할 송대합니다.

let i = 0;
for (; i < 5; i++) {
  console.log(i);
}

이 코드에서는 초기화가 생략되고, 해당 변수를 미리 선언한 후 사용합니다. 또한, 증감 표현식 또한 생략하여 다음과 같이 작성할 수 있습니다.

let i = 0;
for (; i < 5;) {
  console.log(i++);
}

이 경우, 증감 표현식이 생략되었지만 코드가 정상 작동합니다.

break와 continue 문

종종 반복문을 조작하기 위해 break 및 continue 문을 사용할 수 있습니다. break는 반복을 즉시 중단시키며, continue는 이번 반복을 건너뛰고 다음 반복을 계속 진행합니다.

for (let i = 0; i < 10; i++) {
  if (i === 5) break; // i가 5일 경우 반복 중단
  console.log(i); // 0, 1, 2, 3, 4 출력
}

for (let i = 0; i < 10; i++) {
  if (i === 5) continue; // i가 5일 경우 다음 반복으로
  console.log(i); // 0, 1, 2, 3, 4, 6, 7, 8, 9 출력
}

두 예제 모두 i가 5일 경우의 처리를 다르게 하여, 각기 다른 결과를 보여줍니다. 이러한 방법을 통해 특정 조건에 따른 유연한 반복 작업이 가능합니다.

결론

자바스크립트의 for문은 다양한 형태로 활용될 수 있으며, 각 응용 사례를 통해 프로그래밍의 기본 원리를 쉽게 이해하게 됩니다. 이번 포스팅을 통해 여러 예제를 살펴보았습니다. 앞으로도 더 다양하고 창의적인 방법으로 for문을 활용한 코딩을 하시길 바랍니다.

자주 묻는 질문과 답변