[JavaScript] #08 Javascript 제어문, JavaScript 조건문 완전 정복! if, else, switch 문 제대로 배우기

2025. 10. 5. 13:00·Web Front/JavaScript
반응형

 

 

토스트데브입니다!
이번 시간에는 JavaScript의 제어문 중 조건문에 대해 알아보겠습니다.
조건문은 프로그램이 상황에 따라 다른 동작을 하도록 흐름을 제어하는 핵심 기능입니다.

 

 

🧭 조건문이란?

조건문은 주어진 조건에 따라 코드 블록을 실행하거나 건너뛰는 문법입니다.
JavaScript에서 조건문은 다음과 같은 방식으로 사용됩니다:

  • if, else if, else
  • switch

 

 

✅ 1. if문 – 가장 기본적인 조건문

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

📌 예시

let age = 20;

if (age >= 18) {
  console.log("성인입니다.");
}

 

 

✅ 2. if ~ else문

조건이 true일 때와 false일 때 각각 다른 동작을 지정할 수 있어요

if (조건) {
  // true일 때 실행
} else {
  // false일 때 실행
}

📌 예시

let isLogin = false;

if (isLogin) {
  console.log("환영합니다!");
} else {
  console.log("로그인이 필요합니다.");
}

 

 

✅ 3. else if문 – 여러 조건 분기

여러 개의 조건을 순서대로 검사하고, 가장 먼저 만족하는 조건의 코드 블록을 실행합니다.

if (조건1) {
  // 조건1이 true
} else if (조건2) {
  // 조건1은 false, 조건2가 true
} else {
  // 모두 false
}

📌 예시

let score = 85;

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

 

 

🔁 4. switch문 – 값이 고정된 경우에 유용

조건이 여러 개의 고정된 값 중 하나일 때 사용하면 코드가 더 깔끔해집니다.

switch (변수) {
  case 값1:
    // 코드
    break;
  case 값2:
    // 코드
    break;
  default:
    // 모든 case에 해당하지 않을 때
}

📌 예시

let fruit = "banana";

switch (fruit) {
  case "apple":
    console.log("사과입니다");
    break;
  case "banana":
    console.log("바나나입니다");
    break;
  default:
    console.log("알 수 없는 과일");
}
❗break 를 사용하지 않으면 다음 case로 계속 진행되는 "fall-through"가 발생하니 주의하세요.

 

 

💡 조건 판단 시 유의할 점

  • == 대신 ===을 쓰자 → 타입까지 일치 여부 비교
  • 불리언이 아닌 값도 조건으로 사용 가능
    → JavaScript에서는 0, null, undefined, NaN, ""는 false로 간주됨
if ("") console.log("실행 안됨");   // false
if ("hello") console.log("실행됨"); // true

 

 

🧭 마무리하며

JavaScript 조건문은 프로그램의 논리 흐름을 제어하는 핵심 도구입니다.
간단한 if문부터, 복잡한 else if, 그리고 상황에 따라 switch를 선택하여
효율적이고 읽기 쉬운 코드를 작성해보세요.

다음 글에서는 반복문(for, while 등)에 대해 알아보겠습니다 😊

 

 

#JavaScript, #자바스크립트기초, #조건문, #if문, #else, #switch문, #제어문, #코딩입문, #프로그래밍문법, #웹개발, #ToastDev

반응형
저작자표시 비영리 (새창열림)

'Web Front > JavaScript' 카테고리의 다른 글

[JavaScript] #07 Javascript 기본문법, JavaScript 연산자 완전 정리! 종류별 예제와 함께 배우기  (0) 2025.10.04
[JavaScript] #06 JavaScript 기본 문법, 데이터 타입 완벽 정리!  (0) 2025.10.03
[JavaScript] #05 Javascript 기본문법, JavaScript 변수 선언 완전 정리! var, let, const 차이점은?  (1) 2025.10.02
[JavaScript] #04 Javascript 소개, JavaScript 실행 환경 비교: 브라우저 vs Node.js, 뭐가 다를까?  (0) 2025.09.06
[JavaScript] #03 Javascript 소개 - JavaScript는 어디에 쓰일까? 웹부터 게임까지 활용 분야 총정리!  (2) 2025.09.05
'Web Front/JavaScript' 카테고리의 다른 글
  • [JavaScript] #07 Javascript 기본문법, JavaScript 연산자 완전 정리! 종류별 예제와 함께 배우기
  • [JavaScript] #06 JavaScript 기본 문법, 데이터 타입 완벽 정리!
  • [JavaScript] #05 Javascript 기본문법, JavaScript 변수 선언 완전 정리! var, let, const 차이점은?
  • [JavaScript] #04 Javascript 소개, JavaScript 실행 환경 비교: 브라우저 vs Node.js, 뭐가 다를까?
TOASTDEV
TOASTDEV
인스턴트 코딩 #토스트데브 #토스트뎁 #코딩공부 #개발입문
  • TOASTDEV
    토스트데브
    TOASTDEV
    • 분류 전체보기 (162) N
      • 알쓸신잡 (47)
        • 코딩에 대하여 (13)
        • 컴퓨터에 대하여 (12)
        • IT 국내외 소식 (22)
      • Web Front (33) N
        • HTML (11) N
        • CSS (14)
        • JavaScript (8) N
      • Programming (35)
        • PHP (35)
      • App Development (2)
        • Ionic Framework (2)
      • Database (12)
        • SQL (12)
        • MySQL (0)
      • Server (24)
        • Linux (24)
      • Review (9)
        • Overseas Trip (0)
        • Domestic Travel (0)
        • Product Use Review (4)
        • Football Sports Review (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • Youtube Toastdev
    • Naver Blog
  • 공지사항

    • [유튜브] 유튜브 영상 업로드 안내
  • 인기 글

  • 태그

    웹개발기초
    프론트엔드기초
    웹프로그래밍
    SQL강의
    html기초
    HTML
    css기초
    php입문
    javascript
    ubuntu서버
    웹디자인기초
    sql
    php
    php기초
    자바스크립트기초
    SQL문법
    ubuntuserver
    서버입문
    코딩입문
    php문법
    프론트엔드
    데이터분석
    리눅스보안
    서버보안
    웹개발
    PHP문자열
    SQL기초
    서버관리
    웹개발입문
    리눅스기초
  • 최근 댓글

  • 최근 글

  • 전체
    오늘
    어제
  • 반응형
  • hELLO· Designed By정상우.v4.10.3
TOASTDEV
[JavaScript] #08 Javascript 제어문, JavaScript 조건문 완전 정복! if, else, switch 문 제대로 배우기
상단으로

티스토리툴바