[ONEBITE-REACT] JS 기본 - 조건문 (Conditional Satatement)

의미

• 특정 조건을 만족했을 때에만 실행되는 코드를 작성하기 위한 문법
  • 예) 값이 10 이상인가? 참이면 "Yes", 거짓이면 "No"를 출력하라.
• 대표적으로 if, switch 조건문이 존재함.

종류

if문

기본형

if (조건) {참일 때 실행할 값}

let num = 10;

if (num > 5) {
    console.log(`${num}은 5보다 큽니다.`);
}
// "10은 5보다 큽니다" 로 출력됨.

거짓일 때 추가

기본형 : if (조건) {참일 때 실행할 값} else {거짓일 때 실행할 값}

let num = 2;

if (num > 5) {
    console.log(`${num}은 5보다 큽니다.`);
} else {
    console.log(`${num}은 5보다 작습니다.`);
}

// "2는 5보다 작습니다" 출력.

실행 값 여러줄 추가 가능

참일 때, 거짓일 때의 실행할 값은 여러줄 추가 가능하다.

let num = 2;

if (num > 5) {
    console.log(`${num}은 5보다 큽니다.`);
    console.log('이 값은 참입니다.');
} else {
    console.log(`${num}은 5보다 작습니다.`);
    console.log('이 값은 거짓입니다.');
} // "이 값은 거짓입니다" 출력

if문의 중첩

기본형 : else if (조건) {참일 때 실행할 값}

if 다음 else가 나오기 전 중간에 else if() {}를 무한대로 추가하여 if문을 중첩할 수 있다.

의미는 if (이 조건) {이 조건이 참이면 이 값을 실행하고} else if (저 조건) {만약 아니면 다음 조건인 저 조건이 참이면 이 값을 실행하고} else {그것도 아니면 이 값을 실행해라}

let num = 2;

if (num > 5) {
    console.log(`${num}은 5보다 큽니다.`);
    console.log('이 값은 참입니다.');
} else if (num = 2) {
    console.log(`${num}은 2입니다.`);
} else {
    console.log(`${num}은 5보다 작습니다.`);
    console.log('이 값은 거짓입니다.');
} // "2은 2입니다." 출력

switch문

의미

• if문과 기능 자체는 동일하다.
• 다만 if문보다 다수의 조건을 처리할 때 더 직관적이다.

기본형

// 단일
switch (변수명) {
    case 변수명이 일치하는지 확인할 값: {
        참일 때 실행할 값;
    }
};

// 중첩
switch (변수명) {
    case 변수명이 일치하는지 확인할 값: {
        참일 때 실행할 값;
    }
    case 변수명이 일치하는지 확인할 값: {
        참일 때 실행할 값;
    }
    case 변수명이 일치하는지 확인할 값: {
        참일 때 실행할 값;
    }
};

그러나 위와 같이 중첩을 하면 아래와 같은 결과가 나온다.

let animal = "cat";

switch(animal) {
    case "tiger": {
        console.log("호랑이");
    }
    case "cat": {
        console.log("고양이");
    }
    case "dog": {
        console.log("강아지");
    };
}

break;의 사용

해당 값이 참이게 되는 두번째 case "cat" : {}부터 그 아래로 모두 출력한다.

따라서 switch 문에서는 각 case에서 해당 값이 실행되면 빠져 나오라는 break;와 함께 사용한다.

let animal = "cat";

switch(animal) {
    case "tiger": {
        console.log("호랑이");
        break;
    }
    case "cat": {
        console.log("고양이");
        break;
    }
    case "dog": {
        console.log("강아지");
        break;
    };
}

default의 사용

만약 변수가 어떠한 case에도 해당되지 않을 때 기본값으로 지정해줄 수 있는 기능이고, 가장 마지막 라인에 입력한다.

let animal = "owl";

switch(animal) {
    case "tiger": {
        console.log("호랑이");
        break;
    }
    case "cat": {
        console.log("고양이");
        break;
    }
    case "dog": {
        console.log("강아지");
        break;
    };
    default: {
        console.log("해당되는 동물이 없습니다.");
    }
}