1. 반복문

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

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

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

2. for문

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

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

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

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

예를 들어, 위니브 캐릭터의 이름이 들어 있는 배열을 화면에 출력하고 싶다면 아래 예시처럼 주어진 값을 원하는 결과물로 바꾸는 작업을 해야 합니다.

// 주어진 값
const weniv_friends = ["licat", "binky", "gary", "soulgom", "mura"]
 
// 원하는 결과물
<ul>
  <li>licat</li>
  <li>binky</li>
  <li>gary</li>
  <li>soulgom</li>
  <li>mura</li>
</ul>

// 주어진 값
const weniv_friends = ["licat", "binky", "gary", "soulgom", "mura"]
 
// 원하는 결과물
<ul>
  <li>licat</li>
  <li>binky</li>
  <li>gary</li>
  <li>soulgom</li>
  <li>mura</li>
</ul>

배열에 있는 요소를 이용하여 HTML 코드를 만들기 위해서는 다음과 같이 작성할 수 있습니다. 지금까지 배운 내용으로는 다음처럼 길고 반복적인 작업을 통해 text에 배열의 내용을 추가할 수 있습니다.

const weniv_friends = ["licat", "binky", "gary", "soulgom", "mura"] let text = '<ul>' text += '<li>' + weniv_friends[0] + '</li>' text += '<li>' + weniv_friends[1] + '</li>' text += '<li>' + weniv_friends[2] + '</li>' text += '<li>' + weniv_friends[3] + '</li>' text += '<li>' + weniv_friends[4] + '</li>' text += '</ul>' console.log(text) // document.body.innerHTML = text;

document.body.innerHTML
HTML 문서(document)의 body(.body) 요소의 내부에 들어갈 HTML(.innerHTML) 내용을 수정하는 코드입니다. 지금은 자바스립트를 사용하여 HTML 코드를 수정할 수 있다는 것만 이해하시면 됩니다. DOM 파트에서 관련된 내용을 자세히 다룹니다.

DOM 소개 - Web API | MDN

반복문을 사용하면 아래 코드처럼 간단하게 배열의 내용을 text에 넣을 수 있습니다. 이렇게 작업을 여러 번 반복해야 할 때 for문을 사용하면 코드를 간결하게 작성할 수 있습니다. 배열이 길어지거나 배열의 길이를 알지 못하더라도 for문을 사용하면 배열의 길이만큼 반복할 수 있습니다.

const weniv_friends = ["licat", "binky", "gary", "soulgom", "mura"] let text = '<ul>' for(let i = 0; i < weniv_friends.length; i++){ text += '<li>' + weniv_friends[i] + '</li>'; } text += '</ul>' console.log(text) // document.body.innerHTML = text;

2.1. 다양한 for문 예시

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

숫자 출력
1부터 10까지 숫자를 출력합니다.

for (let i = 1; i <= 10; i++) { console.log(i); }
짝수의 합
1부터 100까지의 짝수의 합을 구합니다.

let sum = 0; for (let i = 0; i <= 100; i += 2) { sum += i; } console.log(sum);

조건문을 사용하여 짝수인 경우에만 더하는 방법도 있습니다.

let sum = 0; for (let i = 1; i <= 100; i++) { if (i % 2 === 0) { sum += i; } } console.log(sum);
구구단 출력
2단부터 9단까지의 구구단을 출력합니다. 중첩된 for문을 사용하여 구현할 수 있습니다.

for (let i = 2; i <= 9; i++) { console.log(`--- ${i}단 ---`); for (let j = 1; j <= 9; j++) { console.log(`${i} x ${j} = ${i * j}`); } }
특정 조건의 합
100보다 작은 숫자 중 3의 배수와 5의 배수의 합을 구합니다. 반복문과 조건문을 사용하여 특정 조건을 만족하는 경우에만 합을 구할 수 있습니다.

let sum = 0; for (let i = 1; i < 100; i++) { if (i % 3 === 0 || i % 5 === 0) { sum += i; } } console.log(sum);

2.2. for문의 선택적 사용

for문의 구성요소인 초기화식, 조건식, 증감식은 모두 선택적으로 사용할 수 있습니다. 세미콜론(;)으로 구분되어 있는 구성요소를 빈 칸으로 두면 선택적으로 사용할 수 있습니다. 아래 코드처럼 초기화식을 생략하고 for문 밖의 변수를 이용할 수 있습니다.

let i = 0; // 변수 선언 for (; i < 7; i++) { console.log(`count: ${i}`); }

조건식을 생략할 경우 무조건 true로 평가되기 때문에 무한루프에 빠지게 됩니다. 반복문 안에서 조건문을 사용하여 빠져나오도록 해야합니다. switch문에서 사용한 break문을 사용하면 반복문도 종료할 수 있습니다.

let age = 8; for(;;) { console.log(age + '살은 초등학생입니다.'); if (age >= 13) break; age++; }

3. while문

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

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

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

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

다음과 같이 while문을 이용하여 0부터 10까지 출력할 수 있습니다.

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

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

4. do-while문

do-while은 조건식의 평가 전에 코드를 먼저 실행하는 반복문입니다. 따라서 조건식이 거짓이라도 최소 한 번의 실행이 보장됩니다. 다음과 같이 사용자로부터 입력을 받는 코드를 작성할 때, do-while 문을 사용하면 조건식에 상관 없이 최초 한 번은 입력을 받도록 할 수 있습니다.

let input;
 
do {
  input = window.prompt('숫자를 입력하세요.');
} while (isNaN(input));
 
console.log(`입력한 숫자는 ${input}입니다.`);

let input;
 
do {
  input = window.prompt('숫자를 입력하세요.');
} while (isNaN(input));
 
console.log(`입력한 숫자는 ${input}입니다.`);

5. break와 continue

5.1. break문

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

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

5.2. continue문

continue문은 현재 반복을 건너뛰고 다음 반복으로 넘어갑니다. 특정 조건에서만 코드를 실행하지 않을 때 유용합니다. 다음 코드와 같이 1부터 50까지의 합 중, 3의 배수를 제외한 합을 구할 때 continue문을 사용할 수 있습니다.

let sum = 0; for (let i = 1; i <= 50; i++) { if (i % 3 === 0) continue; sum += i; } console.log(sum);

위 코드는 i가 3의 배수일 때(3으로 나눈 나머지가 0일 때) continue문을 만나서 sum에 더하지 않고 다음 반복으로 넘어갑니다.

5.3. label

label을 사용하면 중첩된 반복문에서 break문이나 continue문의 대상을 지정할 수 있습니다. label은 코드 블록에 이름을 붙이는 것으로, 코드 블록 앞에 콜론(:)과 함께 이름을 붙여 사용합니다.

outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i + j === 3) { break outer; } console.log(`i: ${i} j: ${j}`); } }

i + j가 3이 되는 순간 바깥쪽에 있는 outer for문이 종료됩니다. 즉, i의 값이 1이고 j의 값이 2가 되면 바깥의 for문이 종료되면서 아래와 같이 콘솔에 출력합니다.

break문이 아닌 continue문도 label을 이용할 수 있습니다. continue문을 만나면 바로 다음 반복으로 넘어가게 됩니다.

outer: for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { if (i + j === 3) { continue outer; } console.log(`i: ${i} j: ${j}`); } }

i의 값과 j의 값의 합이 3이 되는 경우에 모두 바깥 반복문을 건너뛰며 아래와 같이 출력됩니다.

label은 이처럼 중복된 반복문 안에서 break 문이나 continue 문의 대상을 지정하는데 유용합니다. 하지만 label을 사용하면 코드의 가독성이 떨어지고 흐름을 파악하기 어려워질 수 있으므로 사용에 주의해야 합니다.

label의 이름은 자바스크립트 변수 규칙을 지키는 이름이라면 무엇이든 가능합니다.

JavaScript 에센셜

반복문