18강. 조건과 반복으로 흐름 제어하기

이번 강의의 결과물은 학습 진행률에 따라 다른 메시지를 선택하고 정해진 횟수만큼 복습 항목을 출력하는 JavaScript 코드입니다.

?1. 이번 강의에서 해결할 문제

모든 상황에서 똑같은 코드를 실행하면 완료 여부나 진행률에 맞는 반응을 만들 수 없습니다. 조건에 따라 실행 경로를 나누고 같은 작업을 필요한 횟수만큼 반복합니다.

✓학습 목표

• 모든 상황에서 똑같은 코드를 실행하면 완료 여부나 진행률에 맞는 반응을 만들 수 없습니다. 조건에 따라 실행 경로를 나누고 같은 작업을 필요한 횟수만큼 반복합니다.
• 핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

◇2. 핵심 개념

• if: 조건이 참일 때 블록 실행
• else if: 앞 조건이 거짓일 때 다른 조건 확인
• else: 모든 앞 조건이 거짓일 때 실행
• ===, !==: 값과 자료형을 함께 비교
• >, >=, <, <=: 숫자의 크기 비교
• &&, ||, !: 여러 조건을 결합하거나 반전
• for: 초기값, 계속 조건, 증감 규칙으로 반복

if (completedLessons >= 15) {
  console.log("절반 이상 완료했습니다.");
}

조건식은 불리언으로 평가되고, for는 조건이 참인 동안 본문을 반복합니다. 문법과 평가 과정은 TC39 ECMAScript 문장 표준을 기준으로 합니다.

</>3. 코드 예시

파일명: web-basics/portfolio/js/main.js

const completedLessons = 18;
const totalLessons = 30;
let progressMessage;

if (completedLessons === totalLessons) {
  progressMessage = "모든 강의를 완료했습니다.";
} else if (completedLessons >= totalLessons / 2) {
  progressMessage = "절반 이상 완료했습니다.";
} else {
  progressMessage = "기초를 쌓는 중입니다.";
}

console.log(progressMessage);

const reviewCount = 3;

for (let lesson = 1; lesson <= reviewCount; lesson += 1) {
  console.log(`${lesson}번째 복습을 시작합니다.`);
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

→4. 코드가 동작하는 이유

1. 첫 조건이 거짓이면 다음 else if 조건을 확인합니다.
2. 한 조건이 참이 되면 해당 블록만 실행하고 나머지 분기는 건너뜁니다.
3. 진행 강의 수가 전체의 절반 이상이므로 두 번째 메시지가 선택됩니다.
4. 반복문은 lesson = 1로 시작하고 매번 1씩 증가합니다.
5. lesson <= reviewCount가 거짓이 되면 반복이 끝납니다.

조건 순서도 결과에 영향을 줍니다. 더 구체적인 “전체 완료” 조건을 “절반 이상”보다 먼저 검사해야 완료 메시지에 도달할 수 있습니다.

!5. 자주 하는 실수

• 비교할 때 대입 연산자 =를 사용함
• 숫자와 문자열을 느슨한 ==로 비교함
• 큰 범위 조건을 먼저 작성해 뒤의 구체적 조건에 도달하지 못함
• 반복 변수의 증가식을 빠뜨려 무한 반복을 만듦
• <와 <= 차이로 마지막 반복을 빠뜨림
• 중괄호와 들여쓰기를 생략해 실행 범위를 오해함

✎6. 짧은 실습 과제

1. 완료 강의 수를 5, 15, 30으로 바꾸어 세 메시지를 확인합니다.
2. isPortfolioPublished 불리언을 추가하고 완료와 공개가 모두 참일 때만 축하 메시지를 출력합니다.
3. 복습 횟수를 5로 바꾸고 정확히 다섯 줄이 출력되는지 확인합니다.
4. 반복 조건을 <와 <=로 바꾸어 출력 횟수 차이를 설명합니다.
5. 실수로 끝나지 않는 반복문을 만들지 말고, 실행 전에 초기값·조건·증감을 종이에 계산합니다.

완료 기준은 입력 값 세 가지에 대해 실행될 분기와 반복 횟수를 코드 실행 전에 예측할 수 있는 것입니다.

?7. 이해 점검 질문 3개

1. ===가 =와 다른 점은 무엇인가요?
2. “전체 완료” 조건을 “절반 이상” 조건보다 먼저 검사해야 하는 이유는 무엇인가요?
3. for 반복문을 종료시키는 부분은 무엇인가요?

■핵심 요약

• 이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
• 코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
• 이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.