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. 자스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 일걸 볼수 잇을겁니다
                    대화보기
                    • 고베베
                      조건문~~~~~~~~~~~~~~~완료!
                    • programmer very GOSU
                      감사합니다 드디어 해결하겠네요 ㅎㅎ
                      대화보기
                      • Sangjoo Lee
                        === 의 경우 강의에도 말해주셨듯 완전히 같은 경우에만 실행이 됩니다.
                        지금 password에 들어가는 값은 문자열로 들어가기 때문에 password에 111111를 넣으시면
                        '111111' === 111111 의 연산이 실행되므로 결과값은 false가 되어 넘어가게 됩니다.
                        '111111'하시거나 혹은 연산자를 ==로 하시면 해결되실거 같네요.
                        대화보기
                        • 3/5까지
                        • programmer very GOSU
                          <script>
                          var id = prompt('아이디를 입력해라.');
                          if (id === 'jinwoo') {
                          var password = prompt('비밀번호 입력해라');
                          if (password === 111111) {
                          alert('로그인 했네.'+id+ '반갑다 .');
                          } else {
                          alert('비밀번호 모르냐?');
                          }
                          } else {
                          alert('아이디도 모르냐 다시써.');
                          }
                          </script>
                          ===을 써서 만들었는데요 비밀번호를 입력하는 창에서 111111를 입력하면 안되는 이유가 무엇일까요?
                          그리고 if (password === 111111) { 이 부분을 if (password === '111111') { 이렇게 '를 쓰면 제대로 실행되는 이유가 무엇일까요?
                        • 장석규
                          2017/04/24 완료
                        • 이리ㄴr
                          정말 잘가르치시는거같아요 실무소스 위주 학원속성반도 다녀봤는데 개념이 부족해서 따라가기힘들더라구요.감사합니다.
                        • 이리ㄴr
                          20170420 이 ㄹ ㅣ ㄴr
                        • 최규선
                          20170413 수강완료!!
                        • 이승우
                          20170330완료
                        • SangHyeok Kim
                          2017/03/24 수강완료
                        • 김세창
                          잘배워갑니다~!!
                        • 1 밑에숫자는 false!!
                          대화보기
                          • for(var i=1; i<=10; i++)
                            {
                            if(i%2===0){
                            alert('i');
                            }
                            }
                            이렇게 아닐까요? var의 초기값을 1로 선언한 후 10과 같거나 작을때까지 1씩 증가하면서 i의 값이 2로 나누었을때 나머지가 0이면 i를 출력.
                            대화보기
                            • for(var i=1; i<=10; i++)
                              {
                              if(i%2===0){
                              alert('i');
                              }
                              }
                              이렇게 아닐까요? var의 초기값을 1로 선언한 후 10과 같거나 작을때까지 1씩 증가하면서 i의 값이 2로 나누었을때 나머지가 0이면 i를 출력.
                              대화보기
                              • Ruin09
                                if() 와 ==, === 에서 취급하는 true, false 가 전부 다른 것 같네요.
                                저번 강의 첨부로 올려주신 표 보면 될듯 합니다.
                                대화보기
                                • 이서영
                                  조건문과 반복문을 이용해서 홀수만 나오게 하려면 어떻게 해야되나요?
                                • 연금이
                                  2017.01.10 수강완료

                                  조건문에 대한 연습은 꾸준히 여러가지 사례를 경험하며 익힌다.
                                  Case문과 IF문이 가지는 특성을 알며 적절히 사용한다.
                                  True와 False가 발생하는 값에 경험을 인지한다.
                                • 연금이
                                  0 이 아닌 수와 false로 인식하는 대체제를 제외하고는 모두 True로 인식합니다.

                                  문법상 오류를 제외한
                                  대화보기
                                  • 박성권
                                    1이 아닌 다른 숫자는 다 false로 취급되는거 아니였나요?
                                    근데 if(-1) { alert("true")} 가 어떻게 가능한건가요

                                    그리고 if("egoing") { alert("true")}하면 true popup창이 뜨는 이유는 문자열이 상수 취급받아서죠?
                                    근데 1만 true라 생각했는데 어떤 상수로 취급될지 모르는 문자열을 true로 간주하는 이유는 뭔가요?
                                  • 임지호
                                    조건문은 조건에 따라 실행을 달리 하게 하는 것이다.
                                    if(true) {...} 실행한다. if(false) {...} 실행 안한다.
                                    if(true) {...} else {~~~} true이면 ... 실행하고 false이면 ~~~실행한다.
                                    else if로 조건문을 더 풍성하게 할 수 있다. 수많은 else if 중 true인것만 실행하고 없다면 else 실행한다.
                                    (else는 생략 가능하다)
                                    조건문은 중첩 또한 가능하다.
                                    논리 연산자
                                    -&&(AND) : 좌항, 우항 모두 true일 때 전체가 true
                                    -||(OR) : 좌항, 우항 중 하나만 true이면 전체가 true
                                    -!(NOT) : true이면 false로, false이면 true로 변환
                                  • 웹디
                                    정말 쏙쏙 들어옵니다 ^^
                                  • 김명수
                                    너무 쉽게 잘 설명해주시네요~ 정주행빠르게 하는중!
                                  • 감사합니다~~~
                                  • 완료!
                                    감사합니다. 완료!
                                  • 솔군
                                    2016.10.06 강의 시청
                                  • 동찜
                                    감사합니다
                                  • yihsang
                                    감사합니다.
                                  • Rhys Jung
                                    쉽게 설명해주셔서 머릿속에 쏙쏙 들어오네요
                                  • kimhomework
                                    감사합니다
                                  • moneromeo
                                    kswoo님! 변수는 실행되는 것이 아니라 단순히 값을 저장하는 저장공간이라고 생각하시면 됩니다.
                                    var id = prompt('아이디?');
                                    var password = prompt('비밀번호?');

                                    이 코드의 경우, 우선 prompt()라는 Javascript API가 실행되면서 사용자에게 값을 입력하라는 메시지가 나옵니다. 사용자가 입력한 값은 id라는 변수에 담깁니다. 코드의 1번째 줄이 완료되면, 2번 째 줄로 이동하여 다시 prompt() Javascript API를 실행시킨 후, 사용자가 입력한 값이 password라는 변수에 담깁니다. 그런 후에 if문이 실행되는 것입니다.
                                    대화보기
                                    • kswooo
                                      친절한 답변 감사합니다.
                                      답변해주신 내용은 즉,
                                      제가 작성한 코드의 첫 두줄이 순서대로 실행되었기 때문이라는 설명이신데요,

                                      여기서 다시 궁금증이 생겼습니다.
                                      제가 작성한 코드 첫 두줄

                                      var id = prompt('아이디?');
                                      var password = prompt('비밀번호?');

                                      에서 해당 코드 두 줄이 단순히
                                      변수(id, password)의 변수 값을 '지정해주는 효과만' 있다고 생각했었는데
                                      실제로는 '지정 효과'와 함께
                                      '변수 값이 실행되는 효과'도 발생하였기 때문이라는 것인데요

                                      변수를 선언하는 'var'
                                      변수의 값을 지정하는 '=(대입연산자)만으로도도 자바스크립트의 명령이 실행이 되는 것인지 궁금합니다.

                                      더 쉬운 예를 들자면,
                                      var a = alert('abcde');
                                      (var: 변수 선언, a: 변수, =: 대입연산자, alert('abcde'): 변수의 값)
                                      코드의 경우

                                      변수 a를 특정 변수 값 ( alert('abcde') ) 로 선언한 효과와 함께
                                      변수 값이 웹페이지 상에서 실제로 실행되는 결과까지 도출되었습니다.

                                      즉, 변수에 대입하고자 하는 변수 값을 선언(지정)하는 명령만 내렸을 뿐,
                                      선언된 변수 값이 '실제로 실행'되는 명령까지는 내리지 않았다고 스스로 판단하였는데
                                      < 선언(지정) + 실행 >의 명령이 동시에 내려지게 되는 것 같습니다.

                                      어떤 원리로 변수를 선언하는 과정에서
                                      해당 변수 값이 시행하는 명령까지 이루어진 것인지 궁금합니다.
                                      대화보기
                                      버전 관리
                                      egoing
                                      현재 버전
                                      선택 버전
                                      graphittie 자세히 보기