조건문

안녕하세요😁

이번 시간에는 자바스크립트의 조건문에 대해 배워보도록 하겠습니다.

조건문

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

자바스크립트의 조건문에는 다음과 같은 조건문들이 있습니다.

하나씩 순서대로 살펴보도록 하겠습니다.

if문

가장 먼저 배워볼 조건문은 if문입니다.

if 문은, 영어 if 의 뜻과 같이 만약 ~ 하면 ~해라 라는 뜻으로 ,

if문 옆에 작성하는 괄호 안에, 특정 조건문을 넣어, 해당 조건문이 성립하면 if문안의 코드를 실행하는 조건문입니다.

let num = 10;

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

작성된 코드는, if문의 조건인 변수 num의 값이 숫자형 10이라면, if문 안에있는 console.log를 실행해라 라는 의미입니다.

선언된 변수 num의 값은 숫자형 10과 일치하므로, 해당 코드 출력 결과 "num의 값은 10입니다" 라는 값이 출력됩니다.

그렇다면, num 값이 10이 아닌 다른 값일 경우 어떻게 되는지 알아보도록 하겠습니다.

let num = 5;

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

변수 num의 값에 10 이 아닌 5가 할당되면, if 문 안에 있는 조건에 맞지 않기 때문에, 코드가 실행되지 않고 아무것도 출력이 되지 않는 것을 확인할 수 있습니다.

if문은 이렇게 특정 조건이 만족 될 때만 코드를 실행 시키는 조건문 입니다.

if-else문

다음으로는 if-else 문에 대해 알아보도록 하겠습니다.

if-else 문은 위의 if 문에서 else문을 추가한 것인데요,

만약 ~ 하면 ~하고, 그렇지 않다면 ~해라 라는 뜻을 가지고있습니다.

let num = 5;

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

앞에서 작성했던 코드 아래 이렇게 else문을 추가해 작성해보았습니다.

else문 안에는 우리가 앞에서 배웠던, 키보드에 ~표시 버튼은 누르면 나오는 역따옴표, 즉 백틱으로 문자열을 묶어

템플릿 리터럴을 통해 현재 num변수의 값이 무엇인지를 출력하는 코드를 작성해줬습니다.

else문은, if문에 있는 조건이 성립되지 않았을 경우에, 또다른 코드를 실행시키기 위한 조건문입니다.

작성된 코드에서 변수 num의 값은 5이기 때문에

if 문의 조건에 알맞지 않아, else문으로 넘어가게 되고, else문 안의 코드가 실행되어 "num값은 5입니다." 가 출력되는 것을 볼 수 있습니다.

이렇게 else문은 특정 조건에 만족할 경우 와 만족하지 않을 경우를 구분해, 서로 다른 코드를 실행해야 할 경우 사용하는 조건문입니다.

if-else if문

이번에는 if-else 문이 아닌, 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보다 큽니다" 라는 문장을 출력하는 코드입니다.

코드를 실행시켜보면, 변수 num의 값은 5이기 때문에 if문에 있는 조건은 만족하지 않고,

else-if 문에 있는 조건인 num < 10 에 부합하기 때문에 "num값은 10보다 작습니다."가 출력되는 것을 볼 수 있습니다.

switch/case문

마지막으로 설명드릴 조건문은 switch/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("다른 과일");
}

switch/case 문은 switch문 옆에 작성된 괄호안의 변수 값과,

case문 옆에 작성된 값이 일치하는 코드블록을 찾은다음, 해당 case문 블록 안에 작성된 코드를 실행합니다.

작성된 코드에서 변수 fruit의 값은 "apple" 이기 때문에, case 문 옆에 "apple"이라고 작성되어있는 case문을 찾은 다음, 해당 case문 내부에 작성된 console.log("사과") 라는 코드가 실행되어, "사과"라는 문자열이 출력됩니다.

이렇게 switch/case 문에는 switch 문의 괄호 안에 특정 변수를 작성하고, 변수의 여러가지 값들을 case로 나누어 작성합니다.

그리고 case문의 옆에는 항상 변수의 특정 값을, case문 내부에는 실행할 코드와 break; 를 작성해주는데요,

let fruit = "apple";

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

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

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

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

fruit 변수의 값을 case 문으로 정해두지 않은 "pineapple" 이라는 값으로 변경해보겠습니다.

let fruit = "pineapple";

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("다른 과일");
}

코드를 실행시키면 "pineapple" 이라는 값을 case로 구분해두지 않았기 때문에 default에 작성된 코드가 실행되어 "다른 과일" 이라는 값이 출력됩니다.

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

이번시간에는 이렇게 자바스크립트의 조건문에 대해 배워보았습니다.

다음 시간에는 자바스크립트의 함수와 지역변수, 외부변수에 대해 배워보도록 하겠습니다.

감사합니다.