자바스크립트 조건문과 반복문 – if문과 for문 예제로 배우기

자바스크립트 조건문과 반복문 – if문과 for문 예제로 배우기

지난 글에서는 자바스크립트의 변수와 자료형을 배우며 데이터를 저장하고 꺼내 쓰는 방법을 알아보았습니다. 하지만 데이터를 저장하는 것만으로는 아직 “프로그램”이라고 부르기 어렵습니다. 진짜 프로그램은 상황에 따라 스스로 판단하고, 같은 일을 지치지 않고 반복할 수 있어야 합니다. “비밀번호가 맞으면 로그인시키고, 틀리면 경고를 띄운다”, “상품 100개를 화면에 차례로 보여준다” 같은 일들 말이죠. 이 두 가지 능력을 담당하는 것이 바로 조건문과 반복문입니다. 오늘은 조건을 만드는 비교·논리 연산자부터 if문, for문, while문까지 실생활 예제로 차근차근 배워보겠습니다.

1. 조건을 만드는 비교 연산자

조건문을 배우기 전에 먼저 “조건”을 만드는 방법부터 알아야 합니다. 조건은 지난 글에서 배운 불리언(true/false) 값으로 결과가 나오는 식입니다. 두 값을 비교해 참인지 거짓인지 알려주는 것이 비교 연산자입니다.

여기서 가장 주의할 점은 “같다”를 등호 세 개(===)로 쓴다는 것입니다. 지난 글에서 배운 것처럼 등호 하나(=)는 값을 넣는 할당이기 때문입니다. 또한 자바스크립트에는 등호 두 개(==)도 있는데, 이것은 비교하기 전에 자료형을 멋대로 맞춰 버립니다.

console.log(5 == "5");   // true  ← 숫자와 문자열인데 같다고 함
console.log(5 === "5");  // false ← 자료형까지 비교해서 정확함

지난 글의 “5” + 3 = “53” 함정처럼, 자동 변환은 예상치 못한 버그를 만듭니다. 그래서 실무에서는 항상 ===와 !==만 사용하는 것이 원칙입니다.

2. 조건을 조합하는 논리 연산자

“나이가 20살 이상이고 회원인 경우”, “주말이거나 공휴일인 경우”처럼 조건을 여러 개 묶어야 할 때는 논리 연산자를 사용합니다.

• && (그리고, AND) : 양쪽 조건이 모두 참일 때만 true
• || (또는, OR) : 둘 중 하나라도 참이면 true
• ! (아니다, NOT) : 참과 거짓을 뒤집음

const age = 25;
const isMember = true;
const isLogin = false;

console.log(age >= 20 && isMember);  // true  (둘 다 참)
console.log(age < 20 || isMember);   // true  (하나가 참)
console.log(!isLogin);               // true  (false를 뒤집음)

|| 기호는 키보드의 원화(₩) 또는 역슬래시(\) 키를 Shift와 함께 누르면 입력할 수 있습니다. 놀이공원 입장 조건으로 생각하면 쉽습니다. “키 120cm 이상 그리고 보호자 동반”은 &&, “자유이용권 또는 연간회원권 소지”는 ||입니다.

3. if문 – 조건이 참이면 실행하기

이제 조건문의 기본인 if문을 알아보겠습니다. if는 영어로 “만약 ~라면”이라는 뜻으로, 괄호 안의 조건이 참일 때만 중괄호 안의 코드를 실행합니다.

const temperature = 32;

if (temperature >= 30) {
  console.log("폭염 주의! 물을 자주 마시세요.");
}

온도가 32도이므로 조건 temperature >= 30이 참이 되어 메시지가 출력됩니다. 만약 temperature를 25로 바꾸면 조건이 거짓이 되어 아무것도 출력되지 않습니다. 중괄호 안의 코드는 한 칸 들여쓰기를 해서 if문 안에 속해 있다는 것을 알아보기 쉽게 하는 것이 좋습니다.

4. if…else문 – 둘 중 하나 선택하기

조건이 거짓일 때 다른 일을 하게 하려면 else를 붙입니다. else는 “그렇지 않으면”이라는 뜻입니다.

const isLogin = false;

if (isLogin) {
  console.log("마이페이지로 이동합니다.");
} else {
  console.log("로그인이 필요합니다.");
}

조건 자리에 불리언 변수를 그대로 넣었습니다. isLogin이 true면 위쪽이, false면 아래쪽이 실행됩니다. if…else는 갈림길과 같아서 두 길 중 반드시 하나만 선택됩니다.

5. else if문 – 여러 갈래로 나누기

선택지가 세 개 이상일 때는 else if로 조건을 이어 갑니다. 시험 점수에 따라 학점을 매기는 예제로 살펴보겠습니다.

const score = 85;

if (score >= 90) {
  console.log("A 학점");
} else if (score >= 80) {
  console.log("B 학점");
} else if (score >= 70) {
  console.log("C 학점");
} else {
  console.log("재시험 대상");
}
// 결과: B 학점

else if문은 위에서부터 차례로 조건을 검사하다가, 처음으로 참이 되는 곳 하나만 실행하고 나머지는 건너뜁니다. 85점은 첫 번째 조건(90 이상)은 거짓이고 두 번째 조건(80 이상)에서 참이 되므로 “B 학점”이 출력되고 끝납니다. 85점은 70 이상이기도 하지만, 이미 앞에서 실행되었으므로 세 번째 조건은 검사하지 않습니다.

그래서 조건의 순서가 매우 중요합니다. 만약 score >= 70을 맨 위에 두면 90점도, 85점도 모두 첫 번째 조건에서 걸려 “C 학점”이 되어 버립니다. 범위를 나눌 때는 큰 값부터, 또는 작은 값부터 한 방향으로 정렬해서 작성하세요.

6. 짧게 쓰는 조건문 – 삼항 연산자

간단한 if…else는 삼항 연산자로 한 줄에 줄여 쓸 수 있습니다. 형식은 조건 ? 참일 때 값 : 거짓일 때 값입니다.

const age = 17;
const message = age >= 19 ? "성인입니다" : "미성년자입니다";
console.log(message);  // 미성년자입니다

값 하나를 조건에 따라 고를 때 편리하지만, 조건이 복잡해지면 오히려 읽기 어려워집니다. 둘 중 하나를 고르는 간단한 경우에만 사용하고, 그 외에는 if문을 쓰는 것이 좋습니다. 참고로 하나의 값을 여러 경우와 비교할 때는 switch문이라는 조건문도 있지만, 대부분의 상황은 if문으로 충분히 해결할 수 있습니다.

7. 반복문이 필요한 이유

이제 반복문으로 넘어가 보겠습니다. 콘솔에 1부터 5까지 출력하려면 어떻게 해야 할까요?

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

다섯 개라면 이렇게 써도 됩니다. 하지만 1부터 1000까지라면요? 천 줄을 쓸 수는 없습니다. 이렇게 같은 일을 여러 번 해야 할 때 컴퓨터에게 “이걸 몇 번 반복해”라고 시키는 것이 반복문입니다. 사람은 같은 일을 반복하면 지치고 실수하지만, 컴퓨터는 백만 번을 반복해도 정확하게 해냅니다. 이것이 프로그래밍의 가장 큰 힘입니다.

8. for문의 구조 파헤치기

가장 많이 쓰는 반복문은 for문입니다. 위의 1부터 5까지 출력하는 코드를 for문으로 바꾸면 다음과 같습니다.

for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 결과: 1, 2, 3, 4, 5

괄호 안이 조금 복잡해 보이지만, 세미콜론으로 나뉜 세 부분으로 이루어져 있습니다.

i++는 i = i + 1을 줄여 쓴 표현입니다. 실행 순서를 따라가 보면, 먼저 i에 1을 넣고 → i가 5 이하인지 확인(참) → 중괄호 안을 실행해 1을 출력 → i를 2로 늘림 → 다시 조건 확인… 이 과정을 반복하다가 i가 6이 되는 순간 조건이 거짓이 되어 반복이 끝납니다. 변수 이름으로 i를 쓰는 것은 index(순번)의 약자에서 온 프로그래머들의 오랜 관례입니다.

for문의 숫자만 바꾸면 다양한 반복을 만들 수 있습니다.

// 1부터 100까지의 합 구하기
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum = sum + i;
}
console.log(sum);  // 5050

// 10부터 0까지 거꾸로 세기
for (let i = 10; i >= 0; i--) {
  console.log(i);
}

// 2씩 건너뛰며 짝수만 출력
for (let i = 2; i <= 10; i += 2) {
  console.log(i);  // 2, 4, 6, 8, 10
}

1부터 100까지의 합을 사람이 계산하려면 한참 걸리지만, for문은 눈 깜짝할 사이에 5050이라는 답을 알려줍니다. sum 변수는 값이 계속 바뀌어야 하므로 지난 글에서 배운 대로 const가 아닌 let으로 만든 것도 눈여겨보세요.

9. 배열과 for문 – 목록을 하나씩 꺼내기

for문이 가장 빛나는 순간은 지난 글에서 맛보기로 본 배열과 함께 쓸 때입니다. 배열의 항목을 처음부터 끝까지 하나씩 꺼내 처리할 수 있습니다.

const fruits = ["사과", "바나나", "포도", "딸기"];

for (let i = 0; i < fruits.length; i++) {
  console.log(`${i + 1}번째 과일: ${fruits[i]}`);
}
// 1번째 과일: 사과
// 2번째 과일: 바나나
// 3번째 과일: 포도
// 4번째 과일: 딸기

두 가지가 중요합니다. 첫째, 배열의 순서는 0부터 시작하므로 i도 0부터 시작합니다. 둘째, fruits.length는 배열의 항목 개수(여기서는 4)를 알려줍니다. 조건을 i < 4처럼 숫자로 고정하지 않고 length를 쓰면, 나중에 과일이 추가되거나 빠져도 코드를 고칠 필요가 없습니다. 조건이 <=가 아니라 <인 점에도 주의하세요. 항목이 4개면 순번은 0, 1, 2, 3이므로 4보다 작을 때까지만 반복해야 합니다.

순번이 필요 없고 항목만 차례로 꺼내면 된다면, 더 간단한 for…of문을 사용할 수 있습니다.

for (const fruit of fruits) {
  console.log(fruit);
}

“fruits 안의 각 fruit에 대해 반복하라”라고 읽으면 자연스럽습니다. 순번 변수와 length를 신경 쓸 필요가 없어 실수할 여지가 줄어듭니다.

10. while문 – 조건이 참인 동안 반복

for문은 보통 몇 번 반복할지 알 때 사용합니다. 반면 while문은 횟수는 모르지만 특정 조건이 만족되는 동안 계속 반복해야 할 때 사용합니다.

// 저금통에 매일 1000원씩 모아 10000원이 될 때까지
let money = 0;
let day = 0;

while (money < 10000) {
  money += 1000;
  day++;
}
console.log(`${day}일 만에 ${money}원을 모았습니다.`);
// 10일 만에 10000원을 모았습니다.

while문을 쓸 때는 무한 반복을 조심해야 합니다. 위 코드에서 money += 1000;을 빠뜨리면 money는 영원히 0이라 조건이 계속 참이 되고, 반복이 끝나지 않아 브라우저가 멈춰 버립니다. while문 안에는 반드시 언젠가 조건을 거짓으로 만드는 코드가 있어야 합니다. 혹시 브라우저가 멈췄다면 당황하지 말고 해당 탭을 닫은 뒤 코드를 고치면 됩니다.

11. break와 continue – 반복 제어하기

반복 도중에 흐름을 바꾸고 싶을 때 사용하는 두 가지 명령이 있습니다.

• break : 반복을 즉시 완전히 멈추고 빠져나갑니다.
• continue : 이번 바퀴만 건너뛰고 다음 바퀴로 넘어갑니다.

// break: 찾으면 바로 멈추기
const names = ["철수", "영희", "길동", "민수"];
for (const name of names) {
  if (name === "길동") {
    console.log("길동을 찾았습니다!");
    break;   // 더 찾을 필요 없음
  }
  console.log(`${name}은(는) 아닙니다.`);
}

// continue: 3의 배수만 건너뛰기
for (let i = 1; i <= 10; i++) {
  if (i % 3 === 0) {
    continue;
  }
  console.log(i);  // 1, 2, 4, 5, 7, 8, 10
}

두 번째 예제에는 지난 글에서 배운 나머지 연산자(%)가 등장했습니다. 3으로 나눈 나머지가 0이면 3의 배수이므로 continue로 건너뛴 것입니다. 이처럼 반복문 안에 조건문을 넣는 조합은 프로그래밍에서 가장 자주 쓰는 패턴입니다.

12. 실습 ①: 반복문 안에 반복문 – 구구단

반복문 안에 또 반복문을 넣을 수도 있습니다. 대표적인 예가 구구단입니다.

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

바깥쪽 반복문이 2단부터 9단까지 한 번 돌 때마다, 안쪽 반복문은 1부터 9까지 아홉 번씩 돕니다. 결과적으로 총 8 × 9 = 72줄의 구구단이 단 다섯 줄의 코드로 출력됩니다. 시계의 시침과 분침을 떠올리면 이해가 쉽습니다. 분침(안쪽)이 한 바퀴 돌아야 시침(바깥쪽)이 한 칸 움직이는 것과 같은 원리입니다.

13. 실습 ②: 학생 성적표 만들기

이제 오늘 배운 비교 연산자, if문, for문, 배열을 모두 합쳐 학생들의 성적표를 만들어 보겠습니다. 아래 코드를 grade.html로 저장해 브라우저에서 열고 F12를 눌러 콘솔을 확인해 보세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>성적표 실습</title>
</head>
<body>
  <h1>F12를 눌러 콘솔을 확인하세요</h1>

  <script>
    const students = ["김철수", "이영희", "박민수", "최지은", "정하늘"];
    const scores = [92, 78, 65, 88, 100];

    let total = 0;
    let passCount = 0;

    console.log("===== 중간고사 성적표 =====");

    for (let i = 0; i < students.length; i++) {
      const name = students[i];
      const score = scores[i];
      let grade;

      // 점수에 따라 학점 결정
      if (score >= 90) {
        grade = "A";
      } else if (score >= 80) {
        grade = "B";
      } else if (score >= 70) {
        grade = "C";
      } else {
        grade = "F";
      }

      // 합격 여부 (70점 이상)
      const result = score >= 70 ? "합격" : "불합격";
      if (score >= 70) {
        passCount++;
      }

      total += score;
      console.log(`${name}: ${score}점 / ${grade} 학점 / ${result}`);

      // 만점자 축하 메시지
      if (score === 100) {
        console.log(`  🎉 ${name} 학생 만점 축하합니다!`);
      }
    }

    const average = total / students.length;
    console.log("===========================");
    console.log(`평균 점수: ${average}점`);
    console.log(`합격자: ${passCount}명 / ${students.length}명`);
  </script>
</body>
</html>

콘솔에는 다음과 같은 결과가 출력됩니다.

코드를 살펴보면 for문이 학생 수만큼 반복하면서, 매번 같은 순번(i)으로 이름 배열과 점수 배열에서 값을 하나씩 꺼냅니다. 그리고 그 안에서 else if문으로 학점을, 삼항 연산자로 합격 여부를 정하고, 조건에 맞을 때만 합격자 수를 세거나 축하 메시지를 출력합니다. 학생이 5명이든 500명이든 배열에 데이터만 추가하면 코드는 그대로 동작합니다. 학생과 점수를 추가하거나 합격 기준을 바꿔 보면서 결과가 어떻게 달라지는지 직접 실험해 보세요.

14. 자주 하는 실수와 해결 방법

• 조건에 = 하나만 씀 : if (score = 100)처럼 쓰면 비교가 아니라 score에 100을 넣어 버려 조건이 항상 참이 됩니다. 비교는 반드시 ===를 쓰세요.
• else if 순서가 잘못됨 : 넓은 범위 조건이 위에 있으면 아래 조건은 실행될 기회가 없습니다. 범위는 한 방향으로 정렬해 작성하세요.
• 배열 반복에서 <= 사용 : i <= arr.length로 쓰면 마지막에 존재하지 않는 항목을 꺼내 undefined가 출력됩니다. 배열은 i < arr.length가 정답입니다.
• 무한 반복으로 브라우저가 멈춤 : while문에서 조건을 바꾸는 코드를 빠뜨렸거나, for문의 증가 부분을 잘못 쓴 경우입니다. 탭을 닫고 반복이 끝나는 조건을 다시 확인하세요.
• for문 괄호 안에 쉼표 사용 : for문의 세 부분은 쉼표가 아니라 세미콜론(;)으로 구분합니다.
• 중괄호 짝이 안 맞음 : 반복문 안에 조건문이 들어가면 중괄호가 여러 겹이 됩니다. 들여쓰기를 정확히 맞추면 짝을 찾기 쉬워집니다.

마무리하며

오늘은 프로그램이 스스로 판단하게 만드는 조건문과, 같은 일을 자동으로 반복하는 반복문을 알아보았습니다. 조건은 ===, > 같은 비교 연산자와 &&, || 같은 논리 연산자로 만들고, if·else if·else로 상황에 따라 다른 코드를 실행합니다. 반복은 횟수가 정해져 있으면 for문, 배열의 항목을 차례로 꺼낼 때는 for…of문, 조건이 만족되는 동안 계속해야 하면 while문을 사용합니다. 특히 반복문 안에 조건문을 넣는 조합은 앞으로 거의 모든 프로그램에서 만나게 될 기본 패턴이니, 오늘 실습한 성적표 코드를 여러 번 고쳐 보며 손에 익혀 두세요.

다음 글에서는 자주 쓰는 코드를 하나로 묶어 필요할 때마다 불러 쓰는 함수를 배우겠습니다. 기본 함수 작성법과 요즘 많이 쓰는 화살표 함수의 차이까지 알아볼 예정입니다. 궁금한 점은 댓글로 남겨 주세요!