3. 자바스크립트 조건문과 반복문 기초

자바스크립트 조건문과 반복문 기초

자바스크립트 100개 포스팅 시리즈의 세 번째 글에 온 걸 환영한다! 앞선 두 번째 글에서 변수와 데이터 타입을 배웠다면, 이번엔 프로그램의 흐름을 제어하는 조건문과 반복문을 배워볼 거다. 코딩에서 조건문은 어떤 조건에 따라 코드를 실행하거나 건너뛰게 하고, 반복문은 코드를 여러 번 실행하게 해준다. 이 두 가지는 프로그래밍의 핵심이라 꼭 익혀두면 좋다.

내가 처음 코딩 배울 때 조건문과 반복문이 제일 헷갈렸던 부분이었는데, 막상 이해하고 나니 코드를 짜는 게 훨씬 재밌어졌다. 이번 글에선 조건문(if, switch)과 반복문(for, while, do-while)의 기본적인 사용법과 실제 예제를 다뤄볼 거다. 천천히 따라오면서 직접 콘솔이나 간단한 HTML 파일에서 쳐보면 감이 올 거다.

조건문이란 무엇인가?

조건문은 프로그램이 특정 조건을 확인해서 그 결과에 따라 다른 코드를 실행하게 하는 거다. 자바스크립트에선 주로 if 문과 switch 문을 쓴다. 조건이 참인지 거짓인지 판단해서 코드를 선택적으로 실행하는 방식인데, 이게 있으면 프로그램이 단순히 위에서 아래로 흐르는 걸 넘어서 상황에 맞게 동작할 수 있다.

예를 들어, 내가 어떤 숫자가 10보다 큰지 확인하고 싶다면 조건문으로 그걸 판단해서 메시지를 띄울 수 있다. 이런 식으로 조건을 걸어서 프로그램의 흐름을 제어하는 게 조건문의 기본 역할이다.

if 문 사용법

if 문은 가장 기본적인 조건문이다. 조건이 참이면 특정 코드를 실행하고, 거짓이면 건너뛴다. 기본 구조는 간단하다:

if (조건) {
    // 조건이 참일 때 실행할 코드
}

조건은 보통 비교 연산자(>, <, ===, !== 등)를 써서 만든다. 예를 들어, 숫자가 10보다 큰지 확인해보자:

let num = 15;
if (num > 10) {
    console.log("숫자가 10보다 크네요!");
}

이 코드를 실행하면 콘솔에 "숫자가 10보다 크네요!"가 출력된다. num이 15니까 조건 num > 10이 참이 돼서 안쪽 코드가 실행된 거다.

조건이 거짓일 때도 뭔가를 하고 싶다면 else를 붙이면 된다:

let num = 5;
if (num > 10) {
    console.log("숫자가 10보다 크네요!");
} else {
    console.log("숫자가 10보다 작거나 같아요.");
}

여기선 num이 5라 조건이 거짓이니까 "숫자가 10보다 작거나 같아요."가 출력된다. 내가 처음 이걸 배울 때 else 없이 쓰다가 조건이 안 맞으면 아무 반응 없어서 당황했는데, else를 쓰니까 훨씬 명확해졌다.

조건이 여러 개라면 else if를 추가할 수 있다:

let num = 7;
if (num > 10) {
    console.log("숫자가 10보다 크네요!");
} else if (num > 5) {
    console.log("숫자가 5보다 크고 10 이하예요.");
} else {
    console.log("숫자가 5 이하예요.");
}

이 경우 num이 7이라 첫 번째 조건(num > 10)은 거짓, 두 번째 조건(num > 5)은 참이니까 "숫자가 5보다 크고 10 이하예요."가 출력된다. else if는 조건을 더 세밀하게 나눌 때 유용하다.

내가 처음 이걸 쓸 때 조건 순서가 중요하다는 걸 몰랐다가 잘못된 결과 나온 적이 있다. 예를 들어, 위 코드에서 num > 5를 먼저 쓰고 num > 10을 나중에 쓰면 11 같은 숫자가 첫 번째 조건에서 걸려서 잘못된 메시지가 나올 수 있다. 조건은 큰 범위에서 작은 범위로 가는 게 안전하다.

switch 문 사용법

switch 문은 if와 비슷하지만, 하나의 값을 여러 경우와 비교할 때 더 깔끔하다. 조건이 아니라 값을 기준으로 분기한다. 기본 구조는 이렇다:

switch (값) {
    case 값1:
        // 값1일 때 실행할 코드
        break;
    case 값2:
        // 값2일 때 실행할 코드
        break;
    default:
        // 아무 값에도 안 맞을 때 실행할 코드
}

예를 들어, 요일을 숫자로 받아서 이름을 출력해보자:

let day = 3;
switch (day) {
    case 1:
        console.log("월요일");
        break;
    case 2:
        console.log("화요일");
        break;
    case 3:
        console.log("수요일");
        break;
    default:
        console.log("알 수 없는 요일");
}

day가 3이라 "수요일"이 출력된다. 여기서 break가 중요한데, 이걸 빼면 조건에 맞은 후에도 다음 case까지 계속 실행된다. 내가 처음 switch 쓸 때 break 안 넣어서 결과가 뒤죽박죽 나왔던 기억이 있다.

default는 모든 case에 안 맞을 때 실행된다. 위 예에서 day가 0이나 8 같은 값이면 "알 수 없는 요일"이 출력된다. if의 else 같은 역할이다.

switch는 값이 명확히 나뉠 때 유용하다. 내가 어떤 프로젝트에서 메뉴 선택 처리할 때 if로 길게 쓰다가 switch로 바꾸니까 코드가 훨씬 간결해졌다.

반복문이란 무엇인가?

반복문은 코드를 여러 번 실행하게 해준다. 같은 작업을 반복할 때마다 매번 쓰지 않고, 조건이나 횟수를 정해서 자동으로 돌리는 거다. 자바스크립트에선 for, while, do-while을 주로 쓴다.

내가 처음 반복문 배울 때 숫자를 1부터 10까지 출력하려면 한 줄씩 써야 하나 고민했는데, 반복문을 알게 되니까 코딩이 훨씬 효율적이 됐다. 반복문이 있으면 시간도 아끼고 코드도 깔끔해진다.

for 문 사용법

for 문은 정해진 횟수만큼 반복할 때 가장 많이 쓴다. 구조는 이렇다:

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

1부터 5까지 숫자를 출력해보자:

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

이 코드는 1, 2, 3, 4, 5를 순서대로 출력한다. 여기서: - let i = 1: 반복 시작 전 초기값 설정. - i <= 5: 조건이 참일 때까지 반복. - i++: 반복마다 i를 1씩 증가.

내가 처음 for 쓸 때 조건을 잘못 설정해서 무한 반복에 빠진 적이 있다. 예를 들어, i <= 5 대신 i >= 0을 쓰고 증감식을 빼면 끝없이 돈다. 조심해야 한다.

for 문은 배열 다룰 때도 유용하다:

let fruits = ["사과", "바나나", "오렌지"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

이건 "사과", "바나나", "오렌지"를 순서대로 출력한다. fruits.length가 3이라 i가 0, 1, 2까지 돈다.

while 문 사용법

while 문은 조건이 참일 때까지 반복한다. 횟수가 정해지지 않았을 때 쓰기 좋다. 구조는 간단하다:

while (조건) {
    // 반복할 코드
}

숫자를 5까지 출력해보자:

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

for 문과 비슷한 결과지만, 초기값과 증감식이 밖에 있다. 내가 while 쓸 때 조건 안에서 변수를 바꾸는 걸 깜빡하면 무한 루프에 걸려서 브라우저가 멈춘 적 있다. 반드시 조건이 언젠가 거짓이 되게 해야 한다.

do-while 문 사용법

do-while 문은 while과 비슷하지만, 코드를 먼저 한 번 실행한 뒤 조건을 확인한다:

do {
    // 반복할 코드
} while (조건);

예를 들어:

let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);

이건 while과 똑같이 1부터 5까지 출력한다. 차이점은 조건이 거짓이어도 최소 한 번은 실행된다는 거다:

let i = 10;
do {
    console.log(i);
    i++;
} while (i <= 5);

여기선 i가 10이라 조건이 처음부터 거짓인데도 10이 한 번 출력된다. 내가 처음 이걸 쓸 때 조건 확인 시점이 달라서 혼란스러웠는데, 특정 상황에서 유용하다.

반복문 제어: break와 continue

반복문을 중간에 멈추거나 건너뛰고 싶을 때 break와 continue를 쓴다.

break: 반복문을 완전히 종료한다:

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

이건 1부터 5까지만 출력하고 6에서 멈춘다. 내가 반복문 테스트할 때 조건 맞으면 멈추게 하고 싶을 때 자주 썼다.

continue: 현재 반복을 건너뛰고 다음으로 간다:

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}

이건 1, 2, 4, 5가 출력된다. 3에서 continue가 실행돼서 그 반복만 건너뛴다.

실습 예제

간단한 실습으로 조건문과 반복문을 합쳐보자:

let score = 85;
if (score >= 90) {
    console.log("A 등급");
} else if (score >= 80) {
    console.log("B 등급");
} else {
    console.log("C 등급 이하");
}

for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) {
        console.log(i + "는 짝수");
    }
}

위 코드는 점수를 등급으로 나누고, 1부터 10까지 짝수만 출력한다. 실행하면 "B 등급"과 짝수(2, 4, 6, 8, 10)가 나온다.

주의할 점

무한 반복에 빠지지 않게 조건을 잘 확인하자. break나 continue를 잘못 쓰면 흐름이 꼬일 수 있다.

결론

이번 포스팅에서 조건문과 반복문의 기초를 다뤘다. if와 switch로 조건을 제어하고, for, while, do-while로 반복을 다뤘다. 다음엔 함수를 배워서 코드를 더 구조화해보자.