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. 웹디
    정말 쏙쏙 들어옵니다 ^^
  2. 김명수
    너무 쉽게 잘 설명해주시네요~ 정주행빠르게 하는중!
  3. 감사합니다~~~
  4. 완료!
    감사합니다. 완료!
  5. 솔군
    2016.10.06 강의 시청
  6. 동찜
    감사합니다
  7. yihsang
    감사합니다.
  8. Rhys Jung
    쉽게 설명해주셔서 머릿속에 쏙쏙 들어오네요
  9. kimhomework
    감사합니다
  10. 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') ) 로 선언한 효과와 함께
      변수 값이 웹페이지 상에서 실제로 실행되는 결과까지 도출되었습니다.

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

      어떤 원리로 변수를 선언하는 과정에서
      해당 변수 값이 시행하는 명령까지 이루어진 것인지 궁금합니다.
      대화보기
      • 코드 자체 문제는 아닙니다.
        단지 코드를 어떻게 읽어서 실행하는지를 모르시는 것 같아서 생기는 문제입니다.

        보통 컴퓨터 읽는 방식은 왼쪽에서 오른쪽, 위에서 아래로 순차적으로 읽고 난 뒤 화면에 보여줍니다.
        현재 코드를 컴퓨터가 읽어보면

        첫번째 var id = prompt('아이디?'); 실행하고
        두번째 var password = prompt('비밀번호?'); 실행 하고

        난 뒤에 아래 조건문을 대입해서 결과를 도출하게 됩니다.
        왜냐하면 순차적으로 읽기 때문입니다.

        kswooo님이 원하는 결과는 아래처럼 하면 됩니다.

        var id = prompt('아이디?');
        if(id==='egoing'){
        var password = prompt('비밀번호?');
        if(password==="111111"){
        alert('로그인 성공');
        } else{
        alert('비밀번호 오류');
        }
        } else{
        alert('아이디 오류');
        }
        대화보기
        • kswooo
          var password = prompt('비밀번호?');
          의 위치를 바꾸어

          var id = prompt('아이디?');
          var password = prompt('비밀번호?');
          if(id==='egoing'){
          if(password==="111111"){
          alert('로그인 성공');
          } else{
          alert('비밀번호 오류');
          }
          } else{
          alert('아이디 오류');
          }

          로 하는 경우,
          아이디 입력 오류 시
          바로 alert('아이디 오류')가 실행되지 않고
          prompt('비밀번호?');가 실행되는 이유가 궁금합니다.

          제 짧은 생각으로는
          처음 if문(아이디 일치여부 확인)에서 false값이 나오면
          바로 뒤에 이어지는 {}이 종료되는 9번째 줄 이후의 else { alert('아이디오류');}로 이어져야 될 것 같은데..
          어떤 이유로 바로 뒤에 이어지는 {}에 있는 prompt('비밀번호?');가 실행되는 것인지 궁금합니다.
        • joo0914krs
          감사합니다.
        • html과 css공부하고 언어의 자바스크립트 공부하고있습니다. 정말 어려운내용도 쉽게 풀어서 설명해주시니 이해가 잘됩니다. 개인적으로는 아직까진 자바스크립트가 제일 재밌는것 같습니다.^^
        • 나중헤 한번 더 봐야겠네요 ㅠㅠ
        • 터골무스탕
          nice lecture ! excellent!
        • JustStudy
          고맙습니다
        • 심원태
          너무 쉽게 잘 설명해주셔서 감사합니다 ~~!!
        • Byeong Koo Kang
          좋은 강의 감사합니다.
        • 삼십대학생
          정말 많은 도움 받고 갑니다. 정말 정말 감사합니다.
        • 최동민
          === 연산자를 활용하니 prompt로 받은 값은 전부다 문자열이네요. 참고하세요.
        • 이웃집토토로
          구글 자막은 외국인들도 "구글 자막은 항상 엉망이야, 절대 믿지마" 이러더라고요ㅎㅎ
          영어 유튜브 영상 자막키고 보는데 뜨끔함ㅋㅋㅋㅋ
          대화보기
          • minwoo030303@gmail.com
            조건문(1/5) 자막키고 들으면 완전 웃겨요
          • 윤희진
            감사합니다.
          • 택이
            감사합니다
          • 리치
            감사합니다.
          • 엔트
            감사합니다 잘보고넘어가요!!
          • eagles70
            수업내용 훌륭합니다.
          • 프론트and 초짜
            정말 많은도움되고있습니다^^
          • sjsj_k
            잘봤어요 ㅎㅎ
          • 하냥이
            정말 감사합니다.
            잘 듣고 갑니다.
          • user0123
            문자셋 문제인데요.
            atom 을 사용하세요. 무료입니다.
            대화보기
            • user0123
              <script>
              document.write("내용");
              </script>
              대화보기
              • 김대익
                딸깍딸깍 키보드 소리가 듣기 좋습니다
                저도 쓰고 싶은데 어느 제품인가요?
              • pupu
                잘보고 넘어갑니다.
              • kush
                id와 PW 넣는 강의는 진짜, 밀도있지만 설명을 너무 잘해주셔서 이해가 쏙쏙 되는 강의네요! 감사합니다 :)
              • 키보드 소리가 생각보다 너무 커요...
              • YellowBall
                잘 들었습니다.
              • 0101
                if((id==='pp' && id==='11') || (id==='kk' && password==='22'))
                에서 앞쪽에 id, id 두번 나왔어요. password겠죠. 오타이신것 같네요.ㅎㅎㅎ
                대화보기
                • 0101
                  헤드에 <meta charset="utf-8"/>를 넣거나 아님 열린 페이지에서 마우스 오른쪽 클릭하거나 도구 모음에서 인코딩을 utf-8로 해주시면 잘 보이실 것 같아요~
                  대화보기
                  • acc0324
                    안녕하세요. 강의 감사히 잘 보고있습니다.
                    다름이 아니라 서브라임텍스트2 사용중인데 ()안에 한글을 입력 시 뷃뷁체로 출력이 됩니다.
                    이 부분 출력값 정상적으로 변경 가능여부가 궁금합니다.
                  • 이네스김
                    저도 경전으로 삼으려고요.
                  • 세계의끝3
                    egoing님의 강의는 저에게 있어 경전과도 같습니다.
                    매일 수십번 반복하여 새기고 있습니다.
                  • 민팀장
                    zz....죄송
                    대화보기
                    • egoing
                      오타가 있어요 첫번째 식에서 id를 두번 쓰셨어요 :)
                      대화보기
                      • 민팀장
                        if((id==='pp' && id==='11') || (id==='kk' && password==='22'))
                        {
                        alert('인증 했습니다.');
                        } else {
                        alert('인증에 실패 했습니다.');
                        }
                        이런 조건문은 안되나요? 문법이 틀린건가요? 오로지 kk , 22만 인증이 된다고 해서... 앞의 pp , 11 만 인증되면 참인거 아닌가요? pp , 11 도 인증이 안된다고 나와서... c언어에서는 되는걸로 배워서...초보라..
                      • 엠제이
                        prompt를 알게 되었네요.. ㅎㅎ
                        다만 쪼메 아쉬운건 ==과 ===을 혼용하여 사용하시는 점입니다;;
                        그래도 이런 강의가 있다는건 정말 선구자적이십니다. ^^
                      • 조신부리
                        감사합니다
                      • kydh1233
                        너무완벽한 강의 진심 감사합니다!!!
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기