[생활코딩] JS문법: 조건문(Conditional Statement)

Boolean: 비교 연산의 결과로 참이거나 거짓을 얻을 수 있다. 여기서 참(true)과 거짓(false)은 언어에서 제공하는 데이터형이다. 이를 Boolean이라 부르고 불린은 위에 말한 두 가지 밖에 없다. 참과 거짓에 따라 조건문을 실행하기도 안하기도 하기 때문에 조건문에서 핵심적인 역할을 담당한다.

 

if문

if(true){
         alert(1);
         alert(2);
         alert(3);
         alert(4);
     }
     alert(5);
     //output: 1~5까지 알림창
     
     if(false){
         alert(1);
         alert(2);
         alert(3);
         alert(4);
     }
     alert(5);
     //output:5만 알림창에 뜬다.

else 

-if로는 좀 더 복잡한 상황을 처리하는데 부족하다.

-else는 조건문의 반대상황에 적용할 코드를 작성한다. (앞쪽의 나온 코드가 실행되지 않았을 때 적용할 코드)

만약 조건문의 시작이 true라면 false일때를 else가 담당하는 것이다. 

*else 는 앞에 나온 코드가 실행되지 않았을 때 중괄호{}안의 코드가 실행되는 것 그렇기때문에 만약 앞선 조건문에 true가 있어서 실행된 코드가 있다면 else절의 코드는 실행되지 않습니다.

 

else if 

-else if를 이용하면 조건문을 좀 더 풍부하게 사용할 수 있다. 

 if (false) {
        alert(1); //false이기때문에 실행X
      } else if (true) {
        alert(2); //true-> 실행O
      } else if (true) {
        alert(3); //true이지만 앞서 실행된 코드가 있기 때문에 실행X
      } else {
        alert(4); //마찬가지로 앞서 실행된 코드가 있기 때문에 실행X
      }
 //output: 처음 조건문이 false로 시작하기 때문에 해당 중괄호{}는 무시됩니다.
 //

*else if 역시 else와 마찬가지로 위에서부터 true인 조건문이 없을 때 중괄호{}안의 코드를 실행합니다. 

else if(true)가 2개나 있지만 alert(2)에서 이미 실행됐기 때문에 alert(3)과 alert(4)는 실행되지 않습니다.

-> 정확히 말하면 true를 만나면 조건문이 종료됩니다. 그렇기 때문에 아래의 코드는 true가 있더라도 실행되지 않고 끝나는 것이지요. false의 경우는 건너뛰는 것으로 생각하세요.

 

변수와 비교연산자

소괄호() 조건식에 true , false를 직접 적는 것은 Boolean이라는 데이터 타입을 이해하기 위해 작성한 것이지 실제로 이렇게 쓰는 것은 조건문 답지 않기 때문에 좋은 코드는 아닙니다.

 

*prompt('')  :  문자열을 담아서 메세지창을 띄워줍니다. 또한 사용자로부터 입력값을 받아 표시해줍니다. 

-> 사용자에게 윈도우 창을 띄워 데이터를 입력받을 수 있는 함수입니다.

const id = prompt("아이디를 입력해주세요");
      if (id == "cong") {
        const password = prompt("비밀번호를 입력해주세요.");
        if (password == "11111") {
          alert(`로그인 하셨습니다. ${id}님 반갑습니다!`);
        } else {
          alert("비밀번호가 다릅니다!");
        }
        // alert("아이디가 일치합니다.");
      } else {
        alert("아이디가 일치하지 않습니다.");
      }

 

 

논리 연산자

-논리 연산자를 쓰면 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와줍니다. 

• &&(AND 연산자) - 조건식의 좌항과 우항 모두 true여야만 true입니다.
• ||(OR 연산자) -조건식의 좌항과 우항 중 하나만 true이면 true입니다.
• !(not 연산자) - 부정의 의미로, Boolean의 값을 역전시킨다. e.g.) !true = false

비교 연산자를 쓴 조건문의 예시 코드를 줄여봅시다. ▼

const id = prompt("아이디를 입력해주세요");
      const password = prompt("비밀번호를 입력해주세요.");
      if (id == "cong" && password === "11111") {
        alert(`로그인 하셨습니다. ${id}님 반갑습니다!`);
      } else {
        alert("아이디가 일치하지 않습니다.");
      }

• 여러개의 논리 연산자가 얽혀있는 조건식이라면 괄호부터 계산하는 것과 같은 논리로 풀어갑니다. ▼

(id==='wwwdf' || id==='adfe' || id==='rrlf') && password==='111111')

1. 좌항(id들, OR연산자) true or false ? 

2. 우항(패스워드 일치연산자) true or false?

3. 좌항과 우항 전체(AND연산자) true or false?

 

기타 false 로 간주되는 데이터형

-false 와 0 외에 false로 간주되는 데이터형 

• '' // 빈 문자열
• undefined // 정의되지 않은 것
• !a  // 값이 할당되지 않은 변수 -> undefined 와 같은 거라고 보면 됨
• null // 값이 없는 상태
• NaN // Not a number

if(!''){
    alert('빈 문자열')
}
if(!undefined){
    alert('undefined');
}
var a;
if(!a){
    alert('값이 할당되지 않은 변수'); 
}
if(!null){
    alert('null');
}
if(!NaN){
    alert('NaN');
}