JavaScript

조건문

Boolean

'비교 수업'에서 비교 연산의 결과로 참(true)이나 거짓(false)을 얻을 수 있다고 배웠다. 여기서 참과 거짓은 '숫자와 문자 수업'에서 배운 숫자와 문자처럼 언어에서 제공하는 데이터 형이다. 이를 Boolean(불린)이라고 부르고 불린으로 올 수 있는 값은 true와 false 두가지 밖에 없다. 불린은 조건문에서 핵심적인 역할을 담당한다.

조건문

조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다.

조건문의 문법

if

조건문은 if로 시작한다. if 뒤의 괄호에 조건이 오고, 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행된다.

아래 예제의 실행결과는 'result : true'다. if 뒤에 true가 왔기 때문이다.

if(true){
    alert('result : true');
}

다음 예제는 아무것도 출력하지 않을 것이다. if 뒤에 false가 왔기 때문이다.

if(false){
    alert('result : true');
}

다음 예제를 보자. 결과는 12345를 출력할 것이다.

if(true){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

다음 예제를 실행해보자. 결과는 5만 출력될 것이다.

if(false){
    alert(1);
    alert(2);
    alert(3);
    alert(4);
}
alert(5);

왜 그럴까? if 문의 조건이 참이면 중괄호의 시작({}부터 중괄호의 끝(})까지의 구간이 실행되기 때문이다. 거짓이면 중괄호 구간이 실행되지 않기 때문에 alert(5); 구문만 실행된 것이다.

else

if만으로는 좀 더 복잡한 상황을 처리하는데 부족하다. 아래 예제를 보자. 결과는 1이다.

if(true){
    alert(1);
} else {
	alert(2);
}

다음 예제의 결과는 2다.

if(false){
    alert(1);
} else {
	alert(2);
}

if문의 조건이 true라면 if의 중괄호 구간이 실행되고, false라면 else 이후의 중괄호 구간이 실행된다. 즉 else는 주어진 조건이 거짓일 때 실행할 구간을 정의하는 것이다.

else if

else if를 이용하면 조건문을 좀 더 풍부하게 할 수 있다. 아래 예제를 보자. 결과는 2다.

if(false){
    alert(1);
} else if(true){
	alert(2);
} else if(true){
	alert(3);
} else {
	alert(4);
}

다음 예제의 결과는 3이다.

if(false){
    alert(1);
} else if(false){
	alert(2);
} else if(true){
	alert(3);
} else {
	alert(4);
}

다음 예제의 결과는 4다.

if(false){
    alert(1);
} else if(false){
	alert(2);
} else if(false){
	alert(3);
} else {
	alert(4);
}

else if는 좀 더 다양한 케이스의 조건을 검사할 수 있는 기회를 제공한다. else if의 특징은 if나 else와는 다르게 여러개가 올 수 있다는 점이다. else if의 모든 조건이 false라면 else가 실행된다. else는 생략 가능하다.

변수와 비교연산자

앞서 배운 변수와 비교연산자 그리고 조건문을 결합해보자. ID의 값으로 egoing을 입력해보고, 다른 값도 입력해보자. 아래의 예제는 브라우저에서 실행해야 한다. 다른 환경에서는 원하는데로 동작하지 않을 것이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
	<script>
		id = prompt('아이디를 입력해주세요.')
		if(id=='egoing'){
			alert('아이디가 일치 합니다.')
		} else {
			alert('아이디가 일치하지 않습니다.')
		}
	</script>
</body>
</html>

위의 내용에서 prompt() 구문은 사용자가 입력한 값을 가져와서 id 변수의 값으로 대입한다. 이러한 것을 API 또는 함수라고 부르는데, 이에 대한 내용은 곧 배운다. 사용자가 입력한 값이 egoing이라면 '아이디가 일치 합니다'를 출력하고 그렇지 않다면 '아이디가 일치하지 않습니다'를 출력한다.

조건문의 중첩

위의 예제에서 아이디와 비밀번호를 모두 검증해야 한다면 어떻게 하면 될까? 다음 예제를 보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
	<script>
		id = prompt('아이디를 입력해주세요.');
		if(id=='egoing'){
			password = prompt('비밀번호를 입력해주세요.');
			if(password==='111111'){
				alert('인증 했습니다.');
			} else {
				alert('인증에 실패 했습니다.');
			}
		} else {
			alert('인증에 실패 했습니다.');
		}
	</script>
</body>
</html>

if문 안에 다시 if문이 등장했다. 즉 사용자가 입력한 값과 아이디의 값이 일치하는지를 확인한 후에 일치한다면 비밀번호가 일치하는지 확인한 것이다. 이렇게 조건문은 조건문 안에 중첩해서 사용될 수 있다.

논리 연산자

이제 논리 연산자를 알아보자. 논리 연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다.

&&

&&는 좌항과 우항이 모두 참(true)일 때 참이된다. 다음 예제를 보자. 결과는 1이다. &&의 좌우항이 모두 true인 것은 첫번째 조건문 밖에 없기 때문이다. 이러한 논리 연산자를 and 연산자라고 한다.

if(true && true){
    alert(1);
}
if(true && false){
	alert(2);
}
if(false && true){
	alert(3);
}
if(false && false){
	alert(4);
}

논리 연산자를 이용한 사례를 살펴보자. 다음 예제는 논리 연산자를 이용해서 이전 예제를 개선한 것이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
		id = prompt('아이디를 입력해주세요.');
		password = prompt('비밀번호를 입력해주세요.');
		if(id=='egoing' && password=='111111'){
			alert('인증 했습니다.');
		} else {
			alert('인증에 실패 했습니다.');
		}
	</script>
</body>
</html>

중첩된 if문을 하나로 줄였다. 덕분에 코드의 복잡성도 낮아졌다. &&는 아래와 같은 의미를 만든다.

"id의 값이 egoing이고 password의 값이 111111이면 참이다"

즉 && 연산자의 좌항과 우항이 모두 참일 때 전체가 참이 되는 것이다.

||

'||'는 '||'의 좌우항 중에 하나라도 true라면 true가 되는 논리 연산자다. |기호는 통상 엔터키 위에 있는 원화표시 키를 쉬프트와 함께 누르면 입력된다. or 연산자라고 부른다. 다음 예를 보자. 결과는 1,2,3이 출력된다. 마지막 조건문의 '||'는 좌항과 우항이 모두 false이기 때문에 false가 된다.

if(true || true){
    alert(1);
}
if(true || false){
    alert(2);
}
if(false || true){
	alert(3);
}
if(false || false){
	alert(4);
}

다음 예제는 id 값으로 egoing, k8805, sorialgi 중의 하나를 입력하면 '인증 했습니다'가 출력되고, 그 외의 값을 입력하면 '인증에 실패 했습니다.'를 출력하는 예제다.

id = prompt('아이디를 입력해주세요.');
if(id==='egoing' || id==='k8805' || id==='sorialgi'){
	alert('인증 했습니다.');
} else {
	alert('인증에 실패 했습니다.');
}

위의 예제에서는 논리 연산자를 3개 사용했다. 2개만 사용하는 것이 아니라는 것을 보여주기 위한 예제다.

다음 예제는 id 값으로 egoing, k8805, sorialgi 중의 하나를 사용하고 비밀번호는 111111을 입력하면 right 외의 경우에는 wrong를 출력하는 예다.

id = prompt('아이디를 입력해주세요.');
password = prompt('비밀번호를 입력해주세요.');
if((id==='egoing' || id==='k8805' || id==='sorialgi') && password==='111111'){
	alert('인증 했습니다.');
} else {
	alert('인증에 실패 했습니다.');
}

위의 예제에서는 or와 and를 혼합해서 사용하는 방법을 보여준다. id 값을 테스트 하는 구간을 괄호()로 묶었다. 사용자가 id의 값으로 egoing 비밀번호를 111111을 입력했다면 연산의 순서는 아래와 같이 된다.

  1. (id=="egoing" or id=="k8805" or id=="sorialgi") : true가 된다.
  2. password=='111111' : true가 된다.
  3. true(1항) and true(2항) : true가 된다.

id 비교를 할 때 괄호를 사용한 것은 사칙 연산을 할 때 괄호부터 계산하는 것과 같은 원리다.

!

'!'는 부정의 의미로, Boolean의 값을 역전시킨다. true를 false로 false를 true로 만든다. not 연산자라고 부른다. 아래의 결과는 4다.

if(!true && !true){
	alert(1);
}
if(!false && !true){
	alert(2);
}
if(!true && !false){
	alert(3);
}
if(!false && !false){
	alert(4);
}

boolean의 대체제

01

조건문에 사용될 수 있는 데이터 형이 꼭 불린만 되는 것은 아니다. 관습적인 이유로 0는 false 0이 아닌 값은 true로 간주된다. 아래의 예제는 2를 출력한다.

if(0){
	alert(1)
}
if(1){
	alert(2)
}

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

다음은 false와 0 외에 false로 간주되는 데이터형의 리스트다. if문의 조건으로 !(부정) 연산자를 사용했기 때문에 각 조건문의 첫번째 블록이 실행되는 것은 주어진 값이 false이기 때문이다.

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

댓글

댓글 본문
작성자
비밀번호
  1. RedBean00
    보실지는 모르 겠지만 이렇게 if문 옆에 ;마크를 제거 해주시면 됩니다

    var sum = 0;

    while(true){
    var inNum = prompt("숫자를 입력!", "0");
    if(inNum=="x" || inNum=="X") break;
    if(inNum>=0 || inNum<=0) //<==여기 있던 ; 표시를 제거 해주세요
    sum = sum + parseInt(inNum);
    else break;

    }
    document.write(sum + "<br/>");


    괄호 표시 없이 저런식으로 쓰면 가독성이 떨어집니다 때문에 아래와 같은 작성을 권장해 드립니다

    var sum = 0;

    while(true){
    var inNum = prompt("숫자를 입력!", "0");
    if(inNum=="x" || inNum=="X"){
    break;}
    if(inNum>=0 || inNum<=0){
    sum = sum + parseInt(inNum);
    }else{ break;}
    }
    document.write(sum + "<br/>");

    이런식으로 중괄호{}를 사용하는 방법을 권장해 드립니다
    대화보기
    • 김다빈
      아 신연우님 댓글 덕분에 마지막 부분이 이해가 됐습니다..ㅠ 감사합니다 끝부분이 조금 이해가 안됐었어요
    • 신연우
      false로 간주되는 데이터 - > '' , undefinde , a , null , nan 을 !을 써줌으로 true 로 만들어줘서 조건문이 실행된다 ! 이렇게 이해하면 될까요 ?
    • 민준홍
      오늘은 여기까지!!잘 보고 있습니다!
    • 감사합니다
    • 올리브
      20180411
    • 감사합니다 ^^
    • rnjsrbgud
      2018.03.16
    • 안장호
      감사합니다~! ^^
    • 듀티프리
      좋아요. 감사합니다.
    • 도현
      고수님들.
      var sum = 0;

      while(true){
      var inNum = prompt("숫자를 입력!", "0");
      if(inNum=="x" || inNum=="X") break;
      if(inNum>=0 || inNum<=0);
      else break;
      sum = sum + parseInt(inNum);
      }
      document.write(sum + "<br/>");

      숫자를 쓰지 않으면 멈추게 하고 싶은데 이런 방식은 맞지 않는건가요 ?
      고수님들 도와주세요.
    • 중요한거는 비밀번호를 비교할 때 '111111' 처럼 문자로 지정 합니다.
      prompt는 문자로 입력 되기 때문입니다.
    • 맞음 비교연산자가 아니라 대입 연산자를 쓰셨음 흔히 하는 실수!!
      대화보기
      • return은 함수를 빠져 나가는건데 함수 안이 아니라 if문 안이잖아요 애초에 코드가 좀 이상한거 아닌가요??
        대화보기
        • 김진홍
          감사합니다~~
        • -정리-
          조건문(Conditional statement)
          if( * ){ ~ }에서
          괄호 안에는 조건으로 반드시 boolean 이 들어와야 하며,
          그 boolean이 반드시 true가 될때만 중괄호 안의 ~가 실행된다.

          논리연산자(Logical operators)
          && (Logical AND) - && 양쪽이 모두 true가 되어야, true.
          || (Logical OR) - || 양쪽의 하나라도 ture면, true.
          ! (Logical NOT ) - ! 뒤의 Boolean은 반대로 바뀐다. (!true -> false, !false -> true)

          조건문안에 괄호()가 있으면, 괄호안을 먼저 실행한다.
        • 박인호
          12-06
          수강완료.
        • 단이
          기타 false로 간주되는 데이터 형이 헷갈리네요, 잘 봤습니다.
        • 시니치123
          강의 잘 봤습니다. 감사합니다.
        • Jason Pahk
          return 값이 정의되지 않아서 그런것 같습니다. 저도 보고 배우는 중이라 잘은 모르니 해보시고 결과 알려주세요^^
          대화보기
          • 이병학
            잘보고 넘어갑니다.
          • mwdkim
            완료 좋은 강의 감사드립니다. 많이배우고 갑니다.
          • GoldPenguin
            완료했습니다.!
          • 송성태
            잘 봤습니다.
            선생님 덕분에 짧은 시간에 많은 것을 배웁니다.
            감사합니다!
          • 승민
            var id=prompt('아이디를 입력해주세요');
            var password = prompt('비밀번호를 입력하요');
            if((id ==='oh') || (id='123') || (id='555') && (password==='111')){
            alert('인증 완료');
            }else{
            alert('인증 실패');
            }

            if 문에서 식 하나당 괄호를 쳐서 true/false 값을 나누셔야 합니다.
            대화보기
            • Guest
              자바에서 비슷한 내용을 하셔서 그런거 같은데 return; 같은 경우 자바사용 메인함수가 void 로 리턴 타입을 받지 않기때문에 쓰지 않아도 되지만 명목상 return; 을 쓰는걸겁니다.

              메소드(함수) 에서 반환값이 필요한 경우에 return을 사용합니다 함수 파트에 return 관련 설명이 있네요 .


              리턴을 쓰신 이유가 무엇인지 궁금하네요.
              대화보기
              • Yohan Lee
                <!DOCTYPE HTML>
                <html>
                <head>
                <meta charset="utf-8">
                </head>
                <body>
                <script>
                var id=prompt('아이디를 입력해주세요');
                var password=prompt('비밀번호를 입력해주세요');
                if(id==='yohan'){
                return;
                }
                if(password==='1234'){
                return;

                }
                if(id==='yohan' && password==='1234'){
                alert('인증에 성공하셨습니다.');
                }
                else{
                alert('인증에 실패하셨습니다.');
                }
                </script>
                </body>
                </html>

                이렇게 작성하면 아예 스크립트창이 안뜨던데 자바스크립트에서는 리턴을 활용안하나요?
              • 이성준
                감사합니다.
              • id==='123' || id==='555' 로 연산자를 변경하세요~
                대화보기
                • <script type="text/javascript">
                  var id=prompt('아이디를 입력해주세요');
                  var password = prompt('비밀번호를 입력하요');
                  if((id ==='oh' || id='123' || id='555') && password==='111'){
                  alert('인증 완료');
                  }else{
                  alert('인증 실패');
                  }


                  </script>

                  이거 왜 실행안되는 걸까요?ㅠㅠ
                • Jeong Min Lee
                  강의 잘 봤습니다. 감사합니다. ^^
                • 자스1일차
                  조건이 성립하면 변수를 불러들이는 차이 인것 같아요.

                  if문 안에 있을 경우 조건이 성립하지 않으면 변수를 불러드리지 않는거죠.

                  if 밖에 있을 경우 if문 조건이 성립하기전에 변수를 불러들여 값을 메기죠.
                  대화보기
                  • 아이노바
                    가슴으로 말합니다. 너무 감사합니다.
                  • 은하수
                    잘보고 잘들었습니다. 감사합니다.
                  • ㅍㅂ
                    감사합니다
                  • 포카리40932
                    감사합니다!
                  • 신시내티
                    감사합니다!
                    대화보기
                    • Dong Il Kim
                      글로벌 변수와 로컬 변수의 차이를 찾아보세요.
                      스코프(범위)의 차이에 따라서 쓰임이 다릅니다. if 안쪽에 사용된 변수는 다른 곳에서 사용되지 않는 1회성 변수라고 생각하시면 됩니다. 1번만 사용될 변수를 글로벌 변수로 지정하는것은 지양해야합니다. 이유는 검색을 해보시면 긴 답변과 깨달음을 얻으실 수 있을꺼에요... ^^;;;

                      지양하는거지 틀린건 아닙니다.
                      대화보기
                      • 신시내티
                        == 는 문자형태와 숫자형태를 구분하지 않고
                        ===는 문자형태와 숫자형태까지 꼼꼼히 구분해요.

                        프롬트 장에 입력한 111111은 컴퓨터가 자동적으로 문자형으로 처리하기 때문에, 코드상의 111111(이건 숫자형태)과 매칭이 안된다고 하는거죠.
                        코드상에 111111은 숫자고, '1111111'는 문자로 인식이 됩니다.

                        그래서 1+1 을 치면 프롬트창에서 2가 나오고
                        '1' + '1' 로 치면 11이 나와요.

                        헷갈리죠. ㅎㅎㅎㅎ
                        이것만 기억하시면 됩니다. 숫자를 ' '로 감싸면 문자가 된다.

                        암튼 좋은 질문이네요.
                        대화보기
                        • 신시내티
                          조건문 3/5 동영상 10분 10초쯤에 var password를 if 조건문에 만드셨는데요.
                          var 가 if조건문 안에 있는 것과 바깥에 있는 것의 차이는 뭔가요?

                          변수랑 상수는 따로따로 구분해두어야 한다고 생각했는데..
                        • nevertoolate
                          문자와 숫자의 차이 인건가요?? ' ' 사이 것이 문자로 인식 되니깐요..
                          대화보기
                          • nevertoolate
                            여기까진 이해 됩니다. 감사 합니다.
                          • programmer very GOSU
                            그런거였군요. 알려주셔서 감사합니다.
                            대화보기
                            • 유소정
                              입력하면 문자로 인식해서 int형인 11111과는 일치하지않게됩니다.
                              대화보기
                              • 클라아악
                                2017/06/29 수강완료!
                                감사합니다~
                              • Seo Yun Seok Tudoistube
                                깨달음 없이 비워진 상태만으로는 참이 아니고,
                                깨달음 없는 미지의 상태는 참이 아니고,
                                깨달음이 없어 셀수없는 상태로는 참이 되지 않는다.

                                참이 되려면
                                스스로 참과 거짓을 안다면 그 자체로 참이고
                                스스로 무한함을 안다는 것은 참이다.

                                꽤 심오한 느낌이 드는 철학적인 내용 같습니다.

                                감사합니다^_____^!!!
                              • sssjunn
                                감사합니다
                              • programmer very GOSU
                                음 그렇군요 알려주셔서 감사합니다.
                                대화보기
                                • ㅈㄷㄹ
                                  typeof(11111)


                                  password = prompt("insert pwd")
                                  typeof(password)

                                  이 두개 실행해보시면 두개 타입이 달라서 false 일걸 볼수 잇을겁니다
                                  대화보기
                                  • 고베베
                                    조건문~~~~~~~~~~~~~~~완료!
                                  버전 관리
                                  egoing
                                  현재 버전
                                  선택 버전
                                  graphittie 자세히 보기