Ep9. JS 조건문 알아보기

hyobin·2022년 6월 6일
4

자바스크립트 기초

목록 보기
9/16
post-thumbnail

안녕하세요😁

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

조건문

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

자바스크립트에서 주로 사용되는 조건문을 하나씩 살펴보겠습니다.

if문

if 문은 만약 ~ 하면 ~해라 라는 뜻으로 ,

let num = 10;

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

위의 코드처럼 작성되며 위에 작성된 코드는
만약 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문을 추가한 것인데요,
만약 ~ 하면 ~하고, 그렇지 않다면 ~해라 라는 뜻을 가지고있습니다.

let num = 8;

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

위의 코드를 실행시켜보겠습니다.

num의 값은 8이기 때문에 if 문의 조건에 알맞지 않아 else문으로 넘어가게 되고, "num값은 8입니다." 가 출력되는 것을 볼 수 있습니다.

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

if-else if문

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

let num = 8;

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

위의 코드를 실행시켜보면, num의 값은 8이기 때문에 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 문은 괄호안의 변수 값과 일치하는 case 블록 내의 코드를 실행합니다.

fruit 변수 값은 "apple" 이기 때문에,
실행 결과 "사과" 가 출력되는 것을 볼 수 있습니다.

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

그리고 break 를 하지 않으면 조건에 맞는 case 이후의 모든 코드가 실행되기 때문에, case 에서 실행할 코드를 작성하고 맨 마지막에 break; 를 작성해주어야 합니다.

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

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 문은 이와 같이 특정 값이 무엇인지에 따라 각각 다른 작업을 수행 할 수 있게 해줍니다.


next

이번 시간에는 자바스크립트의 여러가지 조건문에 대해 배워보았습니다
다음 시간에는 자바스크립트의 함수에 대해 배워보도록 하겠습니다

감사합니다!!


🙏참고 & 출처

https://ko.javascript.info/ifelse

0개의 댓글