JavaScript 베이스캠프

반복문

1. 반복문

이번에는 반복문에 대해서 알아보도록 하겠습니다. 반복문은 특정 코드를 여러 번 반복 실행할 때 사용합니다. 이는 마치 같은 작업을 여러 번 반복하는 것과 같습니다. 예를 들어, 매일 아침에 일어나서 이를 닦고, 세수하고, 아침을 먹는 일상을 코드로 구현하자면 아래와 같습니다.

for ('365번_반복') {
  console.log('일어난다.');
  console.log('이를 닦는다.');
  console.log('세수한다.');
  console.log('아침을 먹는다.');
}

for ('365번_반복') {
  console.log('일어난다.');
  console.log('이를 닦는다.');
  console.log('세수한다.');
  console.log('아침을 먹는다.');
}

1.1 for문

가장 많이 사용되는 반복문 중 하나는 for문입니다. for문은 반복 횟수가 정해져 있을 때 유용합니다. 예를 들어, 1부터 10까지 숫자를 출력하고 싶다면 for문을 사용할 수 있습니다.

1.1.1 기본 구조

for문은 세 부분으로 구성됩니다 초기화식, 조건식, 증감식 입니다. 초기화식에서 변수를 초기화하고, 조건식에서 반복을 계속할지 여부를 판단하며, 증감식에서 변수를 증감합니다.

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

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

1.1.2 예시: 자동차 리스트 출력

예를 들어, 여러 자동차 이름이 들어 있는 배열을 화면에 출력하고 싶다면 아래 예시처럼 주어진 값 을 원하는 결과물 로 바꾸는 작업을 해야 합니다.

// 주어진 값
const cars = ['BMW', 'Volvo', 'Saab', 'Ford', 'Flat', 'Audi'];
 
let text = '';
 
// 원하는 결과물
`
<section>
<h2>BMW</h2>
</section>
<section>
<h2>Volvo</h2>
</section>
...
`;

// 주어진 값
const cars = ['BMW', 'Volvo', 'Saab', 'Ford', 'Flat', 'Audi'];
 
let text = '';
 
// 원하는 결과물
`
<section>
<h2>BMW</h2>
</section>
<section>
<h2>Volvo</h2>
</section>
...
`;

여기서 만약 배열 cars에 담긴 내용을 전부 text라는 변수에 넣고 싶다면 어떻게 해야 할까요? 지금까지 배운 내용으로는 다음처럼 길고 반복적인 작업을 통해 text에 배열의 내용을 넣을 수 있습니다.

const cars = ['BMW', 'Volvo', 'Saab', 'Ford', 'Flat', 'Audi']; let text = ''; text += '<section><h2>' + cars[0] + '</h2></section>'; text += '<section><h2>' + cars[1] + '</h2></section>'; text += '<section><h2>' + cars[2] + '</h2></section>'; text += '<section><h2>' + cars[3] + '</h2></section>'; text += '<section><h2>' + cars[4] + '</h2></section>'; console.log(text); // document.body.innerHTML = text

반복문을 사용하면 아래 코드처럼 간단하게 배열의 내용을 text에 넣을 수 있습니다.

const cars = ['BMW', 'Volvo', 'Saab', 'Ford', 'Fiat', 'Audi']; let text = ''; for (let i = 0; i < cars.length; i++) { text += '<section><h2>' + cars[i] + '</h2></section>'; } console.log(text);

이 코드는 배열의 각 요소를 <section><h2> 태그로 감싸서 text 변수에 추가합니다. 이렇게 작업을 여러번 반복해야 할때 사용하는 것이 바로 반복문입니다.

1.1.3 다양한 for문 예시

다양한 예시를 통해 for문을 살펴보겠습니다. 이러한 다양한 예시를 통해 반복문에 익숙해질 수 있습니다. 형태만 암기하는 것보다는 실제로 코드를 작성하고 실행해보는 것이 중요합니다. 또, 제대로 이해하고 있는지 ChatGPT와 같은 생성형 AI를 통해 다양한 문제를 출제해보고 풀어 확인해보세요.

1.1.3.1 숫자 출력

1부터 10까지 숫자를 출력하는 간단한 예시입니다.

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

1.1.3.2 짝수의 합

1부터 100까지의 짝수의 합을 구하는 예시입니다.

let sum = 0; for (let i = 0; i <= 100; i += 2) { sum += i; } console.log(`1부터 100까지의 짝수의 합: ${sum}`);

1.1.3.3 구구단 출력

구구단을 출력하는 예시입니다. 2단부터 9단까지 출력합니다. 이를 위해 중첩된 for문을 사용합니다. 중첩된 for문은 처음에는 매우 어려울 수 있습니다. 처음부터 중첩된 for문을 작성하는 것이 어렵다면, 각각의 for문을 따로 작성하고, 이후에 중첩된 for문으로 변경해보는 것도 좋은 방법입니다.

for (let i = 2; i <= 9; i++) { for (let j = 1; j <= 9; j++) { console.log(`${i} x ${j} = ${i * j}`); } }

1.1.3.4 특정 조건의 합

100보다 작은 숫자 중 3의 배수와 5의 배수의 합을 구하는 예시입니다. 이번에는 for문 안에 if문을 사용하여 특정 조건을 만족하는 경우에만 합을 구합니다.

let total = 0; for (let i = 0; i < 100; i++) { if (i % 3 === 0 || i % 5 === 0) { total += i; } } console.log(`100보다 작은 숫자 중 3의 배수와 5의 배수의 합: ${total}`);

1.2 while 문

while문은 조건이 참(true)인 동안 반복 실행되는 반복문입니다. 반복 횟수가 정해져 있지 않을 때 유용합니다.

1.2.1 기본 구조

while문의 기본 구조는 다음과 같습니다.

while (조건식) {
  // 실행할 코드
}

while (조건식) {
  // 실행할 코드
}

조건식은 Truthy 또는 Falsy값을 반환하는 표현식입니다. 만약 조건식이 Truthy를 반환하면 중괄호 안의 코드가 반복적으로 실행되며, 조건식이 falsy 값을 반환하는 순간 반복이 종료됩니다.

1.2.2 예시: 숫자 출력

0부터 10까지 숫자를 출력하는 예시입니다.

let num = 0; while (num <= 10) { console.log(num); num++; }

위 코드에서는 변수 num을 0으로 초기화하고, num이 11보다 작을 때까지 반복적으로 실행됩니다. 반복문 안에서는 num의 값이 출력되고, num은 1씩 증가합니다.

위로 올라가 앞서 살펴본 for문의 다양한 예제를 while문으로 변경해보세요. 이를 통해 while문에 대한 이해를 높일 수 있습니다.

1.3 반복문의 break & continue

1.3.1 break문

break문은 반복문을 즉시 종료시킵니다. 예를 들어, 숫자를 출력하다가 특정 조건에서 멈추고 싶다면 break문을 사용할 수 있습니다.

let num = 0; while (num <= 10) { console.log(num); if (num === 5) { break; // num이 5일 때 반복문을 종료합니다. } num++; }

1.3.2 continue문

continue문은 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다. 특정 조건에서만 코드를 실행하고 싶지 않을 때 유용합니다.

for (let i = 0; i < 20; i++) { if (i < 13) { continue; // i가 13 미만이면 아래 코드를 건너뜁니다. } console.log(i + '살은 청소년입니다.'); }

이 코드는 i가 13 미만일 때는 continue문을 만나서 console.log를 건너뛰고, 13 이상일 때만 console.log를 실행합니다.