자바스크립트 - 조건문

조건문

• 조건문은 특정 조건이 성립되었을 때 그 조건에 해당하는 코드를 실행하게 하는 문법입니다. 

 

if문

• if문은, 영어 if와 같이 만약 ~ 하면 ~해라 라는 뜻으로, if문 옆에 작성하는 괄호 안에, 특정 조건문을 넣어, 해당 조건문이 성립하면 if문안의 코드를 실행하는 조건문입니다. 

let num = 10;

if (num === 10) {
    //조건
    console.log("num의 값은 10 입니다."); //실행 코드
}

let num = 5;

if (num === 10) {
    //조건
    console.log("num의 값은 10 입니다."); //실행 코드
}

 

 

if-else문

• if-else문은 만약 ~ 하면 ~하고, 그렇지 안다면 ~해라 라는 뜻을 가지고 있습니다. 

let num = 5;

if (num === 10) {
    console.log(`num값은 10입니다.`);
} else {
    console.log(`num값은 ${num}입니다.`);
}

else문 안에는 역따옴표, 즉 백틱으로 문자열을 묶어 템플릿 리터럴을 통해 현재 num변수의 값이 무엇인지를 출력하는 코드를 작성해줬습니다.

 

 

 

if-else if 문

• if-else문은 특정조건을 만족할 경우와 만족하지 못할 경우가 아니라, 여러 조건에 따라 서로 다른 코드를 실행해야 할 경우 사용됩니다. 

let num = 5;

if (num === 10) {
    console.log("num값은 10입니다.");
} else if (num < 10) {
    console.log("num값은 10보다 작습니다.");
} else {
    console.log("num값은 10보다 큽니다.");
}

가장먼저 변수 num의 값이 숫자 10과 일치한다면, "num의 값은 10입니다."를 출력하고,

만약 if문을 만족하지 못한다면 아래로 내려 가서 변수 num의 값이 10보다 작다라는 조건을 만족하는지 검사하고, 조건과일치한다면 "num의 값은 10보다 작습니다"를 출력하게 됩니다.

위의 두가지 조건을 모두 만족하지 않는다면 가장 마지막에 "num의 값은 10보다 큽니다"라는 문장을 출력합니다. 

 

switch/case문

• switch/case문은 switch문 옆에 작성된 괄호안의 변수 값과, case문 옆에 작성된 값이 일치한느 코드블록을 찾은다음, 해당case문 블록 안에 작성된 코드를 실행합니다. 

let fruit = "apple";

switch (fruit) {
    case "banana":
        console.log("바나나");
        break;
    case "orange":
        console.log("오렌지");
        break;
    case "apple":
        console.log("사과");
        break;
    case "grape":
        console.log("포도");
        break;
    default:
        console.log("다른 과일");
}

 

 

break;를 작성하지 않으면 조건에 맞는 case문 이후의 모든 코드가 실행되게 됩니다. 

그렇기 때문에 case문에서 실행할 코드를 작성하고 맨 마지막에는 항상 break;를 작성해주어야 합니다. 

 

맨 아래의 default;는 fruit 변수 값이 우리가 case 로 정해두지 않은 값일 경우 실행하게 됩니다. 

fruit변수의 값을 "pineapple"로 변경해보겠습니다.

 

switch/case문은 이와 같이 특정 값이 무엇인지에 따라 각각 다른 작업을 수행 할 수 있게 해주는 유용한 조건문입니다. 

 

 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의