Frontend/JavaScript

JavaScript control(1)

개발자의 첫 걸음 2025. 11. 11. 10:00

안녕하세요. 오늘은 자바스크립트의 제어문(control) 중 하나인 조건문(Condition)에 알아볼게요.

 

들어가기 앞서서 제어문에 대해 간단히 알아본다면.

 

자바스크립트 제어문은 "프로그램의 흐름(실행 순서)을 제어하는 문장들"을 말해요.

 

 

 

자바스크립트의 조건문(Condition)

 

조건문은 특정 조건의 참(true) 또는 거짓(false) 여부에 따라 실행할 코드를 결정할 때 사용해요.

 

즉, 프로그램의 흐름(제어)을 바꾸는 역할을 하고, 주로 비교 연산자(>, <, ===, !=, 등)논리 연산자(&&, ||, !)가 사용이 돼요.

 

이 연산자의 결과는 항상 불리언(boolean) 값으로 평가해요.

 

 

1. if, else if, else 문

 

if문은 조건식이 참일 때 코드 블록을 실행하고,

 

else if문은 앞의 조건이 거짓인 경우 새로운 조건을 검사해요.

 

else는 위의 모든 조건이 거짓일 때 실행돼요.

if (조건식) {
  // 조건이 참일 때 실행
} else if (다른조건식) {
  // 위 조건이 거짓이고, 해당 조건이 참일 때 실행
} else {
  // 모든 조건이 거짓일 때 실행
}


// 자바스크립트에서는 '', 0, undefined, null 등은 false로 간주됩니다.

let stringData = '';
let numberData = 0;

if (stringData || numberData) {
  console.log('해당 코드는 실행되지 않습니다.');
}

console.log('해당 코드는 실행됩니다.');


// 예제4: 나이대 분류

let age = 14;

if (age < 13) console.log('어린이');
else if (age >= 13 && age < 20) console.log('청소년');
else console.log('성인'); // "청소년"

 

 

2. swith 문

 

swith 문은 하나의 표현식(변수나 계산 결과)에 따라 여러 경우(case) 중 하나를 선택해 실행해요.

 

일치하는 case가 없으면 default 블록이 실행돼요.

 

break를 사용하지 않으면 다음 case로 계속 실행이 이어지는 점(fall-through)에 주의해 주세요.

 

let fruit = 'banana';

switch (fruit) {
  case 'apple':
    console.log('사과');
    break;
  case 'banana':
    console.log('바나나');
    break;
  default:
    console.log('일치하는 조건이 없습니다.');
}
// "바나나"
// switch문은 비교할 값이 정확히 일치(===) 해야 합니다.

 

 

if, 삼항연산자, swith 비교 예시

 

다음은 if, 삼항 연산자, swith 세 가지 방법을 표현한 예시를 보여드릴게요.

 

 

1. if 문

let score = 90;
let grade;

if (score < 0 || score > 100) console.log('유효한 점수가 아닙니다.');
else if (score >= 90) grade = 'A';
else if (score >= 80) grade = 'B';
else if (score >= 70) grade = 'C';
else if (score >= 60) grade = 'D';
else grade = 'F';

console.log(`학점은 ${grade}입니다.`);

// 학점은 A입니다.



2. 삼항 연산자

score = 80;

grade = score > 100 || score < 0 ? '유효한 점수가 아닙니다.'
  : score >= 90 ? 'A'
  : score >= 80 ? 'B'
  : score >= 70 ? 'C'
  : score >= 60 ? 'D' : 'F';

console.log(`학점은 ${grade}입니다.`);

// 학점은 B입니다.


3. swith 문

score = 31;

switch (true) {
  case (score < 0 || score > 100):
    console.log('유효한 점수가 아닙니다.');
    break;
  case (score >= 90):
    grade = 'A';
    break;
  case (score >= 80):
    grade = 'B';
    break;
  case (score >= 70):
    grade = 'C';
    break;
  case (score >= 60):
    grade = 'D';
    break;
  default:
    grade = 'F';
}

console.log(`학점은 ${grade}입니다.`);

// 학점은 F입니다.

 

 

마지막으로 세 가지의 문법에 대한 정리표예요.

 

문법 특징 사용 예시
if / else if / else 가장 기본적인 조건문, 조건이 다양할 때 유용 숫자 판별, 나이 구분
switch 변수 값이 여러 경우 중 하나일 때 깔끔 메뉴 선택, 상태값 처리
삼항 연산자(? :) 짧고 간단한 조건일 때 변수에 결과 저장, 간단한 출력

 

 

 

여기까지 자바스크립트의 제어문 중 하나인 조건문에 알아봤는데요.

 

자바를 배우고 오셨다면 생각보다 이해하기 쉬웠을 것 같아요.

'Frontend > JavaScript' 카테고리의 다른 글

JavaScript Array  (0) 2025.11.13
JavaScript control(2)  (0) 2025.11.12
JavaScript Data Type (2)  (0) 2025.11.10
JavaScript Data Type (1)  (0) 2025.11.09
JavaScript Hoisting  (0) 2025.11.07