(17) JavaScript - 제어문 / if문 (if statement)

https://purrfect-gargoyle-935.notion.site/if-10be9530b3e1801692aad8da430a405f?pvs=25

if문 (if statement)

if문은 어떤 특별한 조건에 따라서 코드를 실행할지 말지 결정할 수 있는 문법이다.

즉 조건을 충족하지 못하면 실행 하지 않을 수도 있다는 뜻.

    if (조건부분) {
         동작 부분
     }

 

자바 스크립트에서 if문은 문자 그대로 if라는 키워드를 사용하며 뒤에 소괄호를 열고 조건 부분을 작성한 다음

중괄호를 또 열어서 동작 부분을 작성한다.

if는 만약이라는 뜻을 가지고 있으며 풀어서 해석하면 '만약 조건 부분이 충족되면 동작 부분을 수행하라' 이다.

 

물이 어는 점을 0도라고 하고 'temperature' 변수를 만들어 0이라는 값을 지정해주어 if문을 작성해보자

    let temperture = 0
    if (temperture <= 0) {
        console.log('물이 얼었다.');
    }

▲물이 0도 이하여야 물이 얼기 때문에 if문의 조건 부분에 <= 0 을 입력하여

물이 얼었다는 문자열이 출력 되게 하였다.

    let temperture = 1
    if (temperture <= 0) {
        console.log('물이 얼었다.');
    }

▲ 만약 temperature의 값을 1로 바꾸고 실행해보면 아무것도 출력이 되지 않는 걸 확인 할 수있는데,

if문의 조건 부분에 0보다 작거나같다 라는 조건을 넣었기 때문에 문자열이 출력 되지 않는 것을 볼 수있다.

 

이렇게 조건이 맞지 않는 경우에 혹시나 어떤 동작을 또 다루고 싶을 때는 

'그렇지 않으면' 이라는 뜻을 가진 'else'라는 키워드를 사용한다.

    let temperature = 1
    if (temperature <= 0) {
        console.log('물이 얼었다.');
    }else {
        console.log('물지 얼지 않았다.');
    }

▲ else를 작성하고 동작 부분을 또 작성해 주면 된다. 

temperature 변수값을 1로 지정하여 if문의 조건을 충족하지 않기 때문에 

else문의 동작 부분으로 넘어가 '물이 얼지 않았다' 라는 문자열이 출력 될 것이다.

 

이렇게 if문을 통해서 조건을 만들고 선택적으로 else문을 활용하면 

조건에 따라 다양하게 동작하는 코드를 작성할 수 있다.

 

---

★GitHub 주소 (if문)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/7-%EC%A0%9C%EC%96%B4%EB%AC%B8/1.if%EB%AC%B8.html

JavaScript_soloPlay/Basic/7-제어문/1.if문.html at main · SeopE9611/JavaScript_soloPlay

 

★ notion 주소 (if문 예시)

https://purrfect-gargoyle-935.notion.site/if-10be9530b3e1801692aad8da430a405f?pvs=25

if문 | Notion

---

 

if문과 else문을 활용하면 프로그램이 동작할 수있는 방향이 딱 두가지로 나뉜다.

하지만 두 가지 이상의 옵션이 필요한 경우에는 필요한곳에 if문을 한 번 더 작성하면 된다.

    //else if
    let temperature = 1
    if (temperature <= 0) {
        console.log('물이 얼었다.');
    }else {
        if (temperature <100) {
            console.log('물지 얼지도 끓지도 않는다.');    
        } else{
            console.log('물이 끓는다.');
        }
    }

▲ 온도가 0도 이하가 아니고 100도보다 낮을 때 '물이 얼지도 끓지도 않는다'라는 메시지를 출력하고

그렇지도 않을 경우 100도 이상일 때 '물이 끓는다' 라는 메시지를 출력한다.

실행해보면 온도 값을 1로 해놨기 때문에 '물이 얼지도 끓지도 않는다'라는 메시지를 출력한다.

 

 

그런데 if문 내부에 if문이 또 작성되면 중괄호가 복잡하게 얽혀서 가독성이 썩 좋아보이지는 않는다.

한 번정도 중첩 하는건 괜찮을 수 있겠지만 더 복잡하게 여러번 중첩되면 보기 힘들다.

if문이 중첩될 때 else 다음 if문이 바로 이어지는 경우에는 'else if' 를 사용한다.

 

else if 문

    if(temperature <=0){
        console.log('물이 언다');
    }else if (temperature < 100) {
        console.log('물이 얼지도 끓지도 않는다.');
    }else {
        console.log('물이 끓는다.');
    }

 

▲ else , if 를 else if 하나로 묶었다.

if문을 중첩해서 사용하는 코드와 else if 사용하는 코드의 차이가 확연하게 보인다.

 

    if(temperature <=0){
        console.log('물이 언다');
    }else if (temperature < 100) {
        console.log('물이 얼지도 끓지도 않는다.');
    }else if (temperature < 150){
        console.log('물이 끓는다.');
    }else {
        console.log('물이 수증기가 되었다.');
    }

▲ 만약 여기서 한가지 조건을 추가하고 싶다면 else if를 또 추가해주면 된다.

 

 

 

여러가지 조건이 있는 코드를 작성할 때는

if문 안에 중첩해서 또 if 문을 작성할 수 있지만 

else if문을 활용할 수 있다면 훨씬 더 간결하고 읽기 쉬운 코드를 작성할 수있다.

 

---

★GitHub 주소 (if문)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/7-%EC%A0%9C%EC%96%B4%EB%AC%B8/2.else_if%EB%AC%B8.html

JavaScript_soloPlay/Basic/7-제어문/2.else_if문.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (if문 예시)

https://purrfect-gargoyle-935.notion.site/if-10be9530b3e180a5a037c92900656b93

if문 학점계산기 | Notion

 

https://purrfect-gargoyle-935.notion.site/if-ac487bf6b19b466ca9c1fb00fa020e20?pvs=4

if문 (서열정리 예제) | Notion