JavaScript 조건문과 반복문: 변수 값의 흐름부터 추적하기

node flow.js

const tasks = [
  { title: '가계부 정리', completed: false, priority: 2 },
  { title: '메일 확인', completed: true, priority: 3 },
  { title: '운동하기', completed: false, priority: 3 },
];

let pendingHigh = 0;

for (const task of tasks) {
  if (task.completed) continue;
  if (task.priority >= 3) pendingHigh += 1;
  console.log(task.title + ': ' + pendingHigh);
}

console.log('미완료 중요 작업: ' + pendingHigh);

가계부 정리: 0
운동하기: 1
미완료 중요 작업: 1

조건식은 결국 true 또는 false를 만듭니다

const completed = false;


console.log(completed === true);
console.log(completed === false);

조건문 안에는 복잡한 문장이 들어가는 것처럼 보여도 최종 판단 값은 boolean입니다.

const priority = 3;


if (priority >= 3) {
  console.log('중요 작업');
}

===와 !==를 기본 비교 연산자로 사용하면 숫자와 문자열이 자동 변환되는 상황을 줄일 수 있습니다.

여러 조건을 조합하기

const completed = false;
const priority = 3;


if (!completed && priority >= 3) {
  console.log('아직 끝나지 않은 중요 작업');
}

&&는 양쪽 조건이 모두 참이어야 하고 ||는 하나 이상 참이면 됩니다. !는 boolean 의미를 반대로 만듭니다.

if / else if / else

const status = 'pending';


if (status === 'completed') {
  console.log('완료');
} else if (status === 'pending') {
  console.log('진행 중');
} else {
  console.log('알 수 없는 상태');
}

조건의 순서는 중요합니다. 앞에서 이미 참이 된 분기가 있으면 뒤의 분기는 실행되지 않습니다.

배열을 순회할 때 for...of

const titles = [
  'JavaScript 공부',
  '운동',
  '블로그 정리',
];


for (const title of titles) {
  console.log(title);
}

배열의 각 값이 필요하다면 for...of가 읽기 쉽습니다. 인덱스 자체가 필요하면 일반 for가 적합할 수 있습니다.

for (let index = 0; index < titles.length; index += 1) {
  console.log(index, titles[index]);
}

while은 종료 조건을 더 주의합니다

let count = 0;


while (count < 3) {
  console.log(count);
  count += 1;
}

count += 1이 없다면 조건이 계속 참으로 남아 무한 반복이 될 수 있습니다.

break와 continue

continue는 이번 반복만 건너뛰고 다음 반복으로 이동합니다.

const numbers = [1, 2, 3, 4, 5];


for (const number of numbers) {
  if (number % 2 === 0) {
    continue;
  }


  console.log(number);
}

break는 반복문 자체를 종료합니다.

truthy/falsy는 값의 존재 여부와 같지 않습니다

JavaScript는 조건식에서 일부 값을 false처럼 판단합니다.

Boolean('');
Boolean(0);
Boolean(null);
Boolean(undefined);
Boolean(false);

모두 false입니다. 하지만 0은 유효한 숫자일 수 있습니다. 따라서 단순히 if (value)만 보고 값이 잘못되었다고 판단하면 안 됩니다.

값의 흐름을 직접 적어보기

반복문이 어렵다면 실행 순서를 표로 적습니다.

시작 completedCount = 0
1번째 task.completed = false → 변화 없음
2번째 task.completed = true  → completedCount = 1
3번째 task.completed = true  → completedCount = 2
종료 completedCount = 2

디버깅할 때도 같은 방식으로 각 반복의 입력과 결과를 Console에 출력하면 오류 지점을 찾기 쉽습니다.

자주 발생하는 오류

=와 ===를 혼동합니다

=는 대입이고 ===는 비교입니다.

배열 길이까지 순회합니다

for (let i = 0; i <= tasks.length; i += 1) {
  console.log(tasks[i]);
}

마지막 반복에서 tasks[tasks.length]는 존재하지 않아 undefined가 됩니다. 인덱스는 i < tasks.length까지입니다.

while 종료 조건이 바뀌지 않습니다

반복 내부에서 조건에 영향을 주는 값이 실제로 변경되는지 확인합니다.

학습 완료 체크리스트

• 조건식이 boolean 결과를 만든다는 점을 이해했습니다.
• if / else if / else를 사용할 수 있습니다.
• for와 for...of의 차이를 설명할 수 있습니다.
• 무한 반복의 원인을 찾을 수 있습니다.
• 반복 중 변수 값을 순서대로 추적할 수 있습니다.

독립 실습은 여기서 마칠 수 있습니다. 아래 선택 실습은 TaskFlow 프로젝트 파일로 진행합니다.

javascript-step-01-runtime

const tasks = [
  { id: '1', title: 'JavaScript 과정 정리', completed: false },
  { id: '2', title: 'TaskFlow 화면 확인', completed: true },
  { id: '3', title: '다음 글 읽기', completed: false },
];


let completedCount = 0;
let pendingCount = 0;


for (const task of tasks) {
  if (task.completed) {
    completedCount += 1;
  } else {
    pendingCount += 1;
  }


  const status = task.completed ? '완료' : '미완료';
  console.log(`[${status}] ${task.title}`);
}


console.log(`전체: ${tasks.length}`);
console.log(`완료: ${completedCount}`);
console.log(`미완료: ${pendingCount}`);

[미완료] JavaScript 과정 정리
[완료] TaskFlow 화면 확인
[미완료] 다음 글 읽기
전체: 3
완료: 1
미완료: 2

tasks
task
id
title
completed

npm start
npm test

const tasks = [
  { id: '1', title: 'JavaScript 과정 정리', completed: false },
  { id: '2', title: 'TaskFlow 화면 확인', completed: true },
  { id: '3', title: '다음 글 읽기', completed: false },
];


let completedCount = 0;
let pendingCount = 0;


for (const task of tasks) {
  if (task.completed) {
    completedCount += 1;
  } else {
    pendingCount += 1;
  }


  const status = task.completed ? '완료' : '미완료';
  console.log(`[${status}] ${task.title}`);
}


console.log(`전체: ${tasks.length}`);
console.log(`완료: ${completedCount}`);
console.log(`미완료: ${pendingCount}`);

javascript-step-02-control-flow

다음 학습

다음 글에서는 한 파일에 있는 로직을 함수와 객체로 나누고, ES Module의 import / export로 파일 책임을 분리합니다.

다음 글: JavaScript 함수와 객체, import export로 모듈 나누기

글 소개·학습 준비·전체 목차

JavaScript · 2 / 15 · 필수 학습 · 조건문과 반복문

조건문과 반복문은 각 항목의 값을 읽고, 조건에 따라 건너뛰거나 누적 값을 바꾼 뒤 다음 항목으로 이동합니다. 한 번의 반복마다 입력값·분기·누적 값·출력을 적으면 결과가 왜 그렇게 나왔는지 추적할 수 있습니다.

이번 글에서는 변수, 비교, 조건문, 반복문을 따로 외우기보다 하나의 작업 목록을 순회하면서 값의 흐름을 추적합니다.

이번 글에서 배우는 내용

• const와 let
• 비교 연산자와 논리 연산자
• if / else if / else
• for와 for...of
• while, break, continue
• truthy/falsy
• 반복 중 값의 변화 추적

먼저 알아야 할 내용

브라우저 Console 또는 Node.js에서 코드를 실행할 수 있으면 됩니다. 처음 실행한다면 JavaScript 시작 가이드: DevTools와 Node.js로 첫 코드 실행하기부터 확인하세요. 실행 환경이 준비됐다면 이 글에서 조건문과 반복문을 시작합니다.

목차