본문 바로가기
Programming/자바스크립트

[자바스크립트] 조건문 - if / switch

by 코딩하는 랄로 2023. 10. 24.
반응형

조건문이란

조건문이란 조건식을 사용하는 문법이다. 조건식이란 참 또는 거짓으로 표현할 수 있는 식을 의미한다. 즉, 조건문이란, 참과 거짓으로 표현되는 조건식을 통해 프로그램의 흐름을 제어하는 문법이다.(조건문은 제어문의 한 종류!!)

 

조건문 => 조건식을 이용하여 프로그램의 흐름을 제어하는 문법

 

자바스크립트에서 조건문에는 if 조건문과 switch 조건문이 있다. 

 

 

Truthy값 & Falsy값

조건문에 대해서 다루기 전에 truthy 값과 falsy값에 대해 알고 넘어가야 한다. 자바스크립트에서는 참으로 표현되는 값을 truthy값, 거짓으로 표현되는 값을 falsy 값이라고 한다.

 

두 값을 구분하기 쉬운 방법으로는 falsy값만 알고 있어도 된다는 것이다. 왜냐하면 대부분의 값들이 truthy값을 가지고 몇 몇 값들만 falsy값을 가지기 때문이다.

 

아래는 자바스크립트에서 falsy값으로 사용되는 값들이다.

  • false
  • undefined
  • null
  • 0
  • NaN
  • '' (빈문자열)

이를 제외한 모든 값들은 truthy값이다.

 

 

if 조건문

프로그래밍언어에서 많이 사용되는 if 조건문이다. if 조건문은 if 안의 조건문이 참일 때만 실행되게 하는 문법이다.

// if 조건문
// 참 => 실행
if(false) {
    console.log('이건 실행 안됨');
}

if(true) {
    console.log('이건 실행 됨');  //이건 실행 됨
}

 

else if문을 통해 더 다양한 상황(조건식)에서의 프로그램의 제어가 가능해진다.

// if - else if
// 무조건 if문을 사용한 다음부터 사용가능
// 위의 if문부터 차례 대로 조건식 검사 => 참이 조건식이 나오면 아래 조건식은 검사X
// 갯수의 제한 X

let score = 75;
if (score <= 60) {        //false
    console.log('F');
} else if (score <= 70) { //false
    console.log('D');
} else if (score <= 80) { //true : 해당 조건식이 참이므로, 아래의 else if 검사X
    console.log('C');     //C 
} else if (score <= 90) {
    console.log('B');
} else if (score <= 100) {
    console.log('A');
}

 

모든 조건식을 만족하지 않을 때에만, 실행하고 싶은 문장은 else 문을 이용할 수 있다.

// else 문
// 모든 조건식이 false일때'만' 실행

let score = 95;
if (score <= 60) {        //false
    console.log('F');
} else if (score <= 70) { //false
    console.log('D');
} else if (score <= 80) { //false
    console.log('C');     
} else if (score <= 90) { //false
    console.log('B');
} else  {  // 모든 조건식이 false이므로 해당 조건문 실행
    console.log('A');     // A
}

 

 

중첩 if 문 (Nested if)

if 문을 중첩하여 사용하는 것 또한 가능하다.

// nested if
// 해당 변수가 양수인지, 0인지, 음수인지 출력하기
const num = 10;

if(num < 0) { //false
    console.log('음수');
} else { //true
    if(num === 0) { //false
        console.log('0');
    } else {  //true
        console.log('양수');  //양수
    }
}

 

 

삼항연산자

삼항 연산자는 피연산자(항, 표현식)를 3개를 가지는 연산자로, 조건문을 더 간결하게 이용할 수 있도록 해주는 연산자이다. 삼항 연산자의 구문은 다음과 같다.

(조건식) ? (참일때 실행문) : (거짓일때 실행문)

 

삼항 연산자를 이용하여 변수가 짝수인지 홀수인지를 출력해보겠다.

// 삼항 연산자
// (조건식) ? (true) : (false)
let num = 5;

// num % 2 => 0 또는 1의 값을 가지게 된다.
// 0은 짝수일 때 나오는 값이지만 falsy값이기 때문에 false 표현식에서 실행문 작성.
// 1은 홀수일 때 나오는 값이지만 truthy값이기 때문에 true 표현식에서 실행문 작성.
(num % 2) ? console.log('홀수') : console.log('짝수'); 
//결과 => 홀수

 

삼항 연산자 또한 중첩이 가능하기 때문에 위의 양수, 음수 예제를 삼항 연산자로 바꾸면 아래와 같이 간결하게 표현할 수 있다.

// 중첩 삼항 연산자
let num = 10;

(num < 0) 
    ? console.log('음수')
    : (num === 0
          ? console.log(0)
          : console.log('양수'));
          
// 결과 => 양수

 

 

switch문

swich 문은 넘겨 받은 변수가 어떤 case에 해당하는 값인지 매칭하여 매칭되는 case의 명령문을 실행한다. switch문의 각 case를 실행 후, break문을 통해 switch문을 종료시킨다.

// switch문
// 넘겨 받은 변수에 맞는 case를 실행
// break를 통해 switch문 종료
// default : 어떤 case도 만족하지 않을때
let num = 1;
switch(num) {
    case 1 : console.log(1); break;
    case 2 : console.log(2); break;
    case 3 : console.log(3); break;
    default : console.log('default'); break;
}
// 실행 결과 => 1


// 만약 break가 없다면??
num = 2;
switch(num) {
    case 1 : console.log(1); 
    case 2 : console.log(2); 
    case 3 : console.log(3); break;
    default : console.log('default'); break;
}
// 실행 결과 => 2 3 => case 3에서 break를 만나서 switch문 종료

 

즉, switch문의 case는 조건식 (넘겨받은 변수 === case)를 의미하는 것이다. 그렇기 때문에 switch문의 변수를 문자열 타입을 넘겨주면 case의 값도 문자열이 되어야 한다.

 

switch 또한 중첩이 가능하다.

// nested switch
switch(...) {
    case ... :
        switch(...) { ... }
        break;
    case ... : ...
    ...
}
반응형