자바스크립트 제어문 완벽 이해

자바스크립트의 핵심! 프로그램의 흐름을 제어하는 제어문 완벽 이해 💡

안녕하세요! 프론트엔드 개발의 시작이자 웹 페이지를 동적으로 만들어주는 자바스크립트, 이제 막 배우기 시작하셨다면 '제어문'이라는 용어를 많이 들어보셨을 거예요. 제어문은 이름 그대로 프로그램의 '흐름'을 제어하는 아주 중요한 역할을 합니다.

만약 제어문이 없다면, 코드는 위에서 아래로 순서대로 실행될 뿐이라 복잡한 로직을 구현하기 어려워요. 예를 들어 "만약 로그인 상태라면 환영 메시지를 보여주고, 아니라면 로그인 버튼을 보여줘" 같은 조건을 걸거나, "게시글 목록을 100개 반복해서 보여줘" 같은 작업을 할 수 없겠죠?

이번 포스팅에서는 자바스크립트의 주요 제어문인 조건문과 반복문을 자세히 알아보고, 각각의 사용법과 예시를 통해 여러분의 이해를 돕겠습니다.

1. 조건문 (Conditional Statements): "만약 ~라면 이렇게 해!"

조건문은 특정 '조건'이 참(true)일 때만 특정 코드 블록을 실행하거나, 조건에 따라 다른 코드를 실행하도록 지시합니다. 우리 일상생활의 "만약 비가 오면 우산을 쓰고, 비가 오지 않으면 그냥 나가"와 같은 상황을 코드로 표현할 때 사용해요.

1.1. `if...else if...else` 문: 가장 기본적이고 강력한 조건문

가장 많이 사용되는 조건문입니다. 여러 개의 조건을 순서대로 검사하고, 조건에 맞는 첫 번째 블록만 실행합니다. 모든 조건이 거짓일 경우 else 블록이 실행됩니다.

구조:

if (조건1) {
    // 조건1이 참(true)일 때 실행되는 코드
} else if (조건2) {
    // 조건1은 거짓(false)이고, 조건2가 참(true)일 때 실행되는 코드
} else {
    // 모든 조건(조건1, 조건2 등)이 거짓(false)일 때 실행되는 코드
}

예제: 오늘의 날씨에 따른 옷차림 추천 ☁️

const temperature = 28; // 현재 온도 (섭씨)

if (temperature >= 30) {
    console.log("🥵 오늘은 매우 더워요! 시원한 반팔과 반바지를 입으세요.");
} else if (temperature >= 20) {
    console.log("☀️ 활동하기 좋은 날씨예요! 가벼운 긴팔이나 반팔을 추천합니다.");
} else if (temperature >= 10) {
    console.log("🍂 쌀쌀한 가을 날씨예요. 외투를 꼭 챙기세요.");
} else {
    console.log("🥶 한파주의보! 두꺼운 패딩과 목도리를 착용하세요.");
}

설명: temperature가 28이므로 첫 번째 조건(temperature >= 30)은 거짓입니다. 두 번째 조건(temperature >= 20)이 참이므로 해당 블록이 실행되고, 나머지 else if와 else 블록은 건너뜁니다. 콘솔에는 "☀️ 활동하기 좋은 날씨예요! 가벼운 긴팔이나 반팔을 추천합니다."가 출력됩니다.

1.2. `switch` 문: 여러 값 중 하나를 선택할 때!

하나의 변수(또는 표현식)가 가질 수 있는 여러 '값'에 따라 다른 코드를 실행할 때 유용합니다. if...else if 문으로도 구현 가능하지만, 특정 변수의 값이 명확하게 정해져 있을 때는 switch 문이 훨씬 가독성이 좋습니다.

구조:

switch (표현식) { // 비교할 변수 또는 값
    case 값1:
        // 표현식이 '값1'과 같을 때 실행되는 코드
        break; // ⭐ 중요: 해당 case 실행 후 switch 문을 빠져나옴
    case 값2:
        // 표현식이 '값2'와 같을 때 실행되는 코드
        break;
    default:
        // 어떤 case도 일치하지 않을 때 실행되는 코드
        break; // default에도 break를 넣어주는 것이 좋습니다.
}

break의 중요성: 각 case 블록 끝에 break를 꼭 넣어줘야 합니다. break가 없으면 해당 case가 실행된 후에도 다음 case 블록이 계속 실행되는 'fall-through' 현상이 발생합니다.

예제: 요일에 따른 오늘의 할 일 🗓️

const dayOfWeek = "수요일"; // 오늘의 요일

switch (dayOfWeek) {
    case "월요일":
        console.log("📝 주간 계획 세우기");
        break;
    case "화요일":
    case "수요일": // 여러 case를 묶을 수도 있습니다.
        console.log("💻 프로젝트 코드 리뷰");
        break;
    case "목요일":
        console.log("🤝 팀 미팅 참석");
        break;
    case "금요일":
        console.log("🎉 주말 계획 세우고 퇴근!");
        break;
    default:
        console.log("😴 주말에는 푹 쉬세요!");
        break;
}

설명: dayOfWeek가 "수요일"이므로 `"수요일"` case에 해당하는 코드가 실행됩니다. `"화요일"`과 `"수요일"`은 같은 작업을 하므로 case "화요일": 다음에 바로 case "수요일":을 이어 붙여 코드를 효율적으로 작성할 수 있습니다. 콘솔에는 "💻 프로젝트 코드 리뷰"가 출력됩니다.

1.3. 삼항 연산자 (Conditional Ternary Operator): 간결한 조건식!

매우 간단한 if...else 구문을 한 줄로 표현할 때 사용합니다. 주로 변수에 조건에 따라 다른 값을 할당할 때 유용합니다.

구조:

const 변수 = (조건) ? 값1 : 값2;
// 조건이 참(true)이면 '값1'이 변수에 할당되고, 거짓(false)이면 '값2'가 할당됩니다.

예제: 로그인 상태에 따른 버튼 🖲️

const isLoggedIn = true; // 사용자가 로그인했는지 여부

const buttonText = isLoggedIn ? "로그아웃" : "로그인";
console.log(buttonText + " 버튼 표시");

const welcomeMessage = isLoggedIn ? "환영합니다, 사용자님!" : "로그인 해주세요.";
console.log(welcomeMessage);

설명: `isLoggedIn`이 `true`이므로 `buttonText`에는 `"로그아웃"`이, `welcomeMessage`에는 `"환영합니다, 사용자님!"`이 할당됩니다. 코드가 훨씬 간결해진 것을 볼 수 있습니다.

2. 반복문 (Looping Statements): "이 작업을 여러 번 반복해!"

반복문은 특정 코드 블록을 정해진 횟수만큼 또는 특정 조건이 만족될 때까지 '반복'해서 실행합니다. 예를 들어, 게시판의 게시글 목록을 하나씩 보여주거나, 특정 계산을 여러 번 수행해야 할 때 사용합니다.

2.1. `for` 문: 가장 많이 쓰이는 반복문!

반복 횟수가 명확하게 정해져 있을 때 주로 사용합니다. 초기화, 조건, 증감식이 모두 한 줄에 있어 구조를 파악하기 쉽습니다.

구조:

for (초기화; 조건; 증감식) {
    // 조건이 참(true)인 동안 반복적으로 실행되는 코드
}

초기화: 반복문이 시작될 때 단 한 번 실행됩니다. 주로 카운터 변수를 선언하고 초기값을 할당합니다.
조건: 매 반복이 시작되기 전에 평가됩니다. 조건이 참이면 코드 블록이 실행되고, 거짓이면 반복문이 종료됩니다.
증감식: 각 반복이 끝날 때마다 실행됩니다. 주로 카운터 변수의 값을 변경합니다.

예제: 1부터 5까지 숫자 출력 🔢

console.log("--- for 문 예시 ---");
for (let i = 1; i <= 5; i++) {
    console.log(i + "번째 반복");
}

설명:

let i = 1; : `i`를 1로 초기화합니다.
i <= 5; : `i`가 5보다 작거나 같은지 확인합니다.
조건이 참이므로 console.log(i + "번째 반복"); 실행.
i++ : `i`를 1 증가시켜 2가 됩니다.
다시 2단계로 돌아가 i <= 5;를 확인하고 반복... `i`가 6이 되면 조건이 거짓이 되어 반복문이 종료됩니다.

2.2. `for...of` 문: 배열, 문자열 등 '이터러블' 객체 반복!

ES6(ECMAScript 2015)에서 도입된 반복문으로, 배열이나 문자열처럼 순서가 있는 데이터(이터러블 객체)의 '값'을 하나씩 쉽게 가져와 반복할 때 사용합니다.

구조:

for (const 요소 of 이터러블객체) {
    // 이터러블객체의 각 '요소'에 대해 실행되는 코드
}

예제: 좋아하는 과일 목록 출력 🍎🍊🍌

const fruits = ["사과", "바나나", "오렌지", "포도"];

console.log("--- for...of 문 예시 (과일) ---");
for (const fruit of fruits) {
    console.log(fruit + "는 맛있어요!");
}

예제: 문자열의 각 글자 출력 ✍️

const myName = "Javascript";

console.log("--- for...of 문 예시 (문자열) ---");
for (const char of myName) {
    console.log(char);
}

설명: `fruits` 배열의 각 요소를 `fruit` 변수에 차례대로 할당하면서 블록 안의 코드를 실행합니다. 문자열도 마찬가지로 각 문자를 `char` 변수에 할당합니다.

2.3. `for...in` 문: 객체의 속성(key) 반복! (주의 필요)

객체의 '속성 이름(키)'들을 반복할 때 사용합니다. 배열에는 for나 for...of를 사용하는 것이 훨씬 좋습니다. for...in은 객체의 모든 열거 가능한 속성을 순회하며, 예상치 못한 결과를 초래할 수 있기 때문입니다.

구조:

for (const 키 in 객체) {
    // 객체의 각 '키'에 대해 실행되는 코드
    // 해당 키의 '값'을 얻으려면 객체[키]를 사용합니다.
}

예제: 사용자 정보 출력 👤

const userInfo = {
    name: "김철수",
    age: 30,
    city: "서울",
    job: "개발자"
};

console.log("--- for...in 문 예시 (객체) ---");
for (const key in userInfo) {
    console.log(`${key}: ${userInfo[key]}`); // 백틱(``)을 사용한 템플릿 리터럴
}

설명: `userInfo` 객체의 각 속성 이름(name, age, city, job)이 `key` 변수에 차례대로 할당됩니다. userInfo[key]를 사용하여 해당 키에 해당하는 값을 가져올 수 있습니다.

2.4. `while` 문: 조건이 참일 때까지 반복!

특정 '조건'이 참(true)인 동안 코드 블록을 계속 반복합니다. 반복 횟수가 명확하지 않고, 어떤 조건이 만족될 때까지 반복해야 할 때 유용합니다. 무한 루프에 빠지지 않도록 주의해야 합니다!

구조:

while (조건) {
    // 조건이 참(true)인 동안 반복적으로 실행되는 코드
    // ⭐ 중요: 반복을 멈출 수 있는 변경사항이 이 블록 안에 반드시 있어야 합니다!
}

예제: 럭키 넘버 맞추기 게임 🎲

let luckyNumber = Math.floor(Math.random() * 10) + 1; // 1부터 10까지 랜덤 숫자
let guess = 0;
let attempts = 0;

console.log("--- while 문 예시 (럭키 넘버 맞추기) ---");
while (guess !== luckyNumber) { // guess가 luckyNumber와 같지 않다면 계속 반복
    attempts++;
    guess = Math.floor(Math.random() * 10) + 1; // 새로운 숫자 추측
    console.log(`${attempts}번째 시도: ${guess}`);
}

console.log(`⭐ ${attempts}번 만에 럭키 넘버 ${luckyNumber}를 맞췄습니다!`);

설명: `guess`가 `luckyNumber`와 같지 않은 동안 계속 반복됩니다. 매 반복마다 `attempts`를 증가시키고 새로운 `guess` 숫자를 생성합니다. `guess`가 `luckyNumber`와 같아지면 조건이 거짓이 되어 반복문이 종료됩니다.

2.5. `do...while` 문: 최소 한 번은 실행!

while 문과 유사하지만, 코드 블록을 최소 한 번은 실행한 후에 조건을 확인합니다. 즉, 조건이 처음부터 거짓이더라도 무조건 한 번은 실행됩니다.

구조:

do {
    // 최소 한 번 실행되고, 조건이 참(true)인 동안 반복적으로 실행되는 코드
} while (조건);

예제: 비밀번호 입력 확인 (첫 시도 포함) 🔑

let password;
let attempts = 0;
const correctPassword = "1234";

console.log("--- do...while 문 예시 (비밀번호) ---");
do {
    attempts++;
    // 브라우저 환경에서 prompt와 alert는 사용 가능하지만, Node.js 환경에서는 작동하지 않습니다.
    // 이 예제를 Node.js에서 실행하려면, 이 부분을 다른 입력/출력 방식으로 대체해야 합니다.
    password = prompt(`비밀번호를 입력하세요 (${attempts}번째 시도):`);
    if (password !== correctPassword) {
        alert("비밀번호가 틀렸습니다. 다시 시도해주세요.");
    }
} while (password !== correctPassword && attempts < 3); // 비밀번호가 틀리고 시도 횟수가 3번 미만일 때 반복

if (password === correctPassword) {
    alert("로그인 성공!");
} else {
    alert("3회 시도 실패. 로그인 할 수 없습니다.");
}

설명: do 블록 안의 코드가 먼저 한 번 실행되어 사용자에게 비밀번호를 입력받습니다. 그 후 while 조건(password !== correctPassword && attempts < 3)을 확인하여 반복 여부를 결정합니다. 이 방식은 최소 한 번의 입력을 보장할 때 유용합니다.

3. 특별한 제어문: `break`와 `continue`

반복문 안에서 특별한 상황이 발생했을 때, 반복문의 흐름을 제어하는 두 가지 유용한 키워드입니다.

3.1. `break` 문: 반복문 강제 종료! 🛑

break 문을 만나면 현재 실행 중인 가장 가까운 반복문(for, while, do...while)이나 switch 문을 즉시 종료하고, 해당 반복문 다음 코드로 넘어갑니다.

예제: 특정 숫자 찾기 🔎

console.log("--- break 문 예시 ---");
for (let i = 1; i <= 10; i++) {
    if (i === 7) {
        console.log("7을 찾았습니다! 반복을 종료합니다.");
        break; // i가 7이 되면 반복문 종료
    }
    console.log(`${i}번째 숫자 확인 중...`);
}
console.log("반복문이 종료되었습니다.");

설명: `i`가 7이 되는 순간 if (i === 7) 조건이 참이 되고, break 문이 실행되어 for 반복문이 즉시 종료됩니다. `7번째 숫자 확인 중...` 메시지는 출력되지 않습니다.

3.2. `continue` 문: 현재 반복 건너뛰고 다음 반복으로! ⏭️

continue 문을 만나면 현재 실행 중인 반복(iteration)을 즉시 건너뛰고, 다음 반복을 시작합니다. 즉, continue 문 이후의 현재 반복 블록 내의 코드는 실행되지 않습니다.

예제: 짝수만 건너뛰고 홀수만 출력 🤸

console.log("--- continue 문 예시 ---");
for (let i = 1; i <= 10; i++) {
    if (i % 2 === 0) { // i가 짝수이면 (나머지가 0)
        console.log(`${i}는 짝수이므로 건너뜁니다.`);
        continue; // 현재 반복을 건너뛰고 다음 반복으로
    }
    console.log(`${i}는 홀수입니다.`);
}

설명: `i`가 짝수일 때 if (i % 2 === 0) 조건이 참이 되고, continue 문이 실행됩니다. 그러면 console.log(`${i}는 홀수입니다.`);는 실행되지 않고, for 문은 즉시 다음 `i` 값으로 넘어가 새로운 반복을 시작합니다.

마무리하며

자바스크립트의 제어문은 여러분이 만드는 웹 페이지에 생명력을 불어넣는 핵심 요소입니다. 조건에 따라 다르게 동작하고, 필요한 만큼 반복 작업을 수행함으로써 훨씬 더 복잡하고 유용한 기능을 구현할 수 있게 됩니다.

오늘 다룬 if...else, switch, for, for...of, while, do...while, 그리고 break, continue는 자바스크립트를 넘어 다른 프로그래밍 언어에서도 비슷한 개념으로 사용되니, 이번 기회에 잘 익혀두시면 앞으로의 학습에도 큰 도움이 될 거예요!

꾸준히 연습하고 직접 코드를 작성해보면서 제어문에 익숙해지시길 바랍니다. 다음 포스팅에서는 더 유익한 자바스크립트 개념으로 찾아오겠습니다^^ 😊

IT 관련 기술 과 각종 프로그램 기술을 알아가는 블로그 입니다

[JS 기초] 자바스크립트 제어문: if, switch, for, while 상세 이해