Skip to content

Latest commit

 

History

History
277 lines (253 loc) · 10.3 KB

js_4_cond.md

File metadata and controls

277 lines (253 loc) · 10.3 KB

조건문 Conditional Statement

다른 노트에서 왔다면? &&과 || 연산자의 예시 확인

조건문이란?

  • 주어진 조건에 따라 애플리케이션을 다르게 동작하게 한다.
  • 이 수업의 핵심(core)이자, 컴퓨터가 단순한 계산기와 구분되는 가장 중요한 차이이기도 하다.
    • 조건에 따라 다른 기능을 하도록 만드는 작업이기 때문이다.
  • 프로그래밍 언어에서 가장 중요하다.
    • 반복문과 더불어 양대산맥
  • 여러 언어에서 공통적으로 사용되는 문법/기능이다.

여담으로, 현업에서 유용하게+많이 쓰이는 문법이라고 한다. > 배울 때는 복잡하다거나 어렵다고 느낄 수 있지만, 아주 유용하다고 하니 원리를 잘 이해해두자!

조건문의 문법: if, else, else if

if:

  • 결론부터 말하자면, 참일 때 출력할 값을 이끈다

  • if( 조건 ){}형태로 쓴다.

    • 이 때, 조건값으로는 Boolean을 쓴다.
      • 이를 통해, 조건문과 boolean은 뗄 수 없는 존재라는 것을 알 수 있다.(얘를 쓸때, 쟤가 있어야 의미 있음.)
    • 조건이 true일 때, {}안에 써있는 구문이 실행된다.
    • 참고로, false면, 해당 구문이 실행되지 않는다. false일때의 구문에 대해서는 아래 else와 else if참조!

  • 예시1

    if(true) {
    alert('result : true');
}
//true가 실행됨

if(false) {
    alert('result : true');
}
//아무 것도 출력되지 않음.

  • 예시2

    • 조건이 true로 지정되어 있으므로, 1~3이 한 번씩 각각 경고창을 통해 출력된다. 3까지 출력된 후에 {}밖의 값인 4가 출력된다.
    if(true){
    alert(1);
    alert(2);
    alert(3);
}
alert(4);

  • 예시3

    • 조건이 false로 주어졌기 때문에, {}내부의 값은 출력되지 않고, {}밖의 값인 4만 경고창으로 출력된다.
    if(false){
    alert(1);
    alert(2);
    alert(3);
}
alert(4);

사실, 위 예시들은 프로그래밍적으로 의미가 없다. > Boolean값이 고정으로 주어졌기 때문이다. 조건을 상황에 따라 다른 Boolean을 가질 수 있도록 지정해줘야 조건문을 제대로 쓴다고 할 수 있다. > 지금은 문법을 파악하고 있는 거니까, 일단은 단순화하여 예시를 보는 중. 하지만, boolean고정된 조건문은 의미 없다는 것을 이해하고 넘어가기 위해 메모해둔다! :)

else: 거짓일 때 출력할 값을 이끈다

  • 결론: 거짓일 때 출력할 값을 이끈다

    • 물론, else if로 타래를 계속 이어가는 방법도 있지만, else가 기본형!

  • 예시1

if(true) {
    alert(1);
} else {
    alert(2);
}
// 경고창에 1 출력
  • 예시2
if(false) {
    alert(1);
} else {
    alert(2);
}
// 경고창에 2 출력

else if

  • 결론: 앞쪽의 코드(구문)가 실행되지 않았을 때 else if뒤쪽 {}에 작성된 구문을 실행한다.

  • 조건문을 더욱 풍부하게 구사할 수 있게 돕는다.

  • 예시1

    • 아래 예시 코드에서, 두 번째 else if의 조건이 true이기 때문에, 2가 출력된다.
    • 세 번째 else if, 마지막 else의 구문은 무시한다.
      • 이미 두 번째 else if에서 값이 도출되었으니까.
    if(false) {
    alert(1);
} else if(true) {
    alert(2);
} else if(true) {
    alert(3);
} else {
    alert(4);
}
// 경고창에 2 출력
    • 참고로, 위 예시에서 보다시피, 조건문 마지막은 else로 마무리한다!

  • 예시2

    • 아래 코드에서는 세 번째 구문의 결과값이 출력된다.
      • if조건이 false, 첫 번째 else if조건도 false
      • 마지막 else는 무시한다. 그보다 선행되는(순서에 따라) 구문의 결과값이 도출되었기 때문이다.
    if(false) {
    alert(1);
} else if(false) {
    alert(2);
} else if(true) {
    alert(3);
} else {
    alert(4);
}
// 경고창에 3 출력

  • 예시3

    • 이 경우에는 else의 구문 결과값이 출력된다.
      • 선행하는 if, else if의 조건들이 다 false니까. 마지막 남은 else 구문으로 결과를 도출하는 것이다.
    if(false) {
    alert(1);
} else if(false) {
    alert(2);
} else if(false) {
    alert(3);
} else {
    alert(4);
}
// 경고창에 4 출력

가변성: 의미있는 조건의 특징

  • if뒤의 ( )사이에 들어가는 조건은 고정값이 아니라 가변적이어야 의미 있다
    • 상황에 따라 다른 결과를 낼 수 있는 '조건문'의 기능을 제대로 수행하기 위해서이다.
    • 가변적 조건을 쓴 코드 예시
    var a = 1;
if(a === 1) {
    alert(10);
}
// 경고창에 10 출력
    • JAVA에서는 위 예시들과 같이 조건이 고정된 코드가 금지되어있다는데, 나중에 안내서 한 번 읽어보자!

조건문 중첩

  • 예시1.0
    • 지정된 아이디를 입력하면 '일치합니다', 불일치하면 '불일치'라고 알려주는 기능.
    <html>
    <body>
        <script>
            var id = prompt('아이디 입력');
            if(id === 'egoing'){
                alert('아이디가 일치합니다');
            } else {
                alert('아이디 불일치');
            }
        </script>
    </body>
</html>
  • 예시1.1
    • 조건문 안에 또 다른 조건문 넣을 수 있다.
    • 아이디 일치 시, 비밀번호를 입력하는 prompt가 뜨고, 비번이 일치하면 '로그인'안내, 불일치 시, '비번이 다르다'는 안내 경고창 띄우기
    <body>
    <script>
        var id = prompt('아이디를 입력해주세요.');
        if(id === 'egoing'){
            var password = prompt('비밀번호를 입력해주세요.');
            if(password === '111111'){
                alert('로그인하셨습니다.');
            } else {
                alert('비밀번호가 다릅니다.');
            }
        } else {
            alert('아이디가 불일치합니다.');
        }
    </script>
</body>

연산자를 활용한 예시

위 예시들과 이어지기 때문에, 넘버링을 같은 결로 유지했다.

  • 예시1.2.0
    • 로직을 조금 더 추가(개선)하면, 보다 더 친절한프로그래밍을 할 수 있다.
    • 아래 예시에서는 사용자를 식별하는 듯 한 효과를 준 것이다.
    <body>
    <script>
        var id = prompt('아이디를 입력해주세요.');
        if(id === 'egoing'){
            var password = prompt('비밀번호를 입력해주세요.');
            if(password === '111111'){
                alert('로그인하셨습니다.'+id+'님 반갑습니다.');
            } else {
                alert('비밀번호가 다릅니다.');
            }
        } else {
            alert('아이디가 불일치합니다.');
        }
    </script>
</body>
  • 예시1.2.1
    • &&연산자를 써서, 조건문을 더 간결하게 작성할 수 있다.
    • 단, 아래 예시는 1.2.0예시와 완전히 일치하는 로직은 아니다.
      • 1.2.0에서는 비번이 틀렸다는 정보를 줬지만, 아래 1.2.1예시에서는 해당 정보를 제공하지 않기 때문이다.
    <body>
    <script>
        var id = prompt('아이디를 입력해주세요.');
        var password = prompt('비밀번호를 입력해주세요.');
        if(id === 'egoing' && password === '111111'){
                alert('로그인하셨습니다.'+id+'님 반갑습니다.');
        } else {
        alert('아이디가 불일치합니다.');
        }
    </script>
</body>
  • 예시1.2.1.1
    • ||연산자를 융합해서 활용할 수 있다.
    • 단, 이번 예시에서는 입장 가능한 id값을 더 추가했다.
    • 참고로, 일반적인 수학 연산처럼, 괄호 안쪽부터 먼저 계산한다. (괄호는 연산의 순서를 나타낸다.)
    <body>
    <script>
        var id = prompt('아이디를 입력해주세요.');
        var password = prompt('비밀번호를 입력해주세요.');
            if(id === 'egoing' || id === 'k8805' || id = 'sorialgi' && password == '111111'){
                    alert('로그인하셨습니다.'+id+'님 반갑습니다.');
            } else {
            alert('인증에 실패했습니다.');
            }
    </script>
</body>

prompt

  • 경고창 비슷한 게 뜨는데, 그 창 안에 뭔가 입력할 수 있는 구조다.
    • 즉, 사용자로부터 어떤 정보를 받아올 수 있다.
  • alert와 조합하면, prompt가 먼저 실행되고, prompt에 입력한 값이 alert로 출력된다.
alert(prompt('당신의 나이는?'));
// 입력한 값이 경고창으로 출력됨

alert(prompt('나이는?') * 10);
// 입력한 값에 10을 곱한 값이 경고창으로 출력됨

담소

  • 이런 논리흐름, 낯설지 않아!

    초등학교 수학 교과서 맨 마지막 단원으로 짧막하게 다루던 단원이 알고리즘이었다. 단원 내용이 굉장히 빈약하기도 했고, 학교 교육과정에서도 대충 넘어가다시피 했지만, 나는 그 단원이 참 재밌었다. 마치 퍼즐 같아서 좋아했다. 그런데 시험에 잘 안 나왔고, 이런 이유로 수업 중 충실히 다루지 않았기에 많이 슬펐다 ㅋㅋㅋㅋㅋ 그런데 조건문 공부하다 보니, 익숙한 느낌이 든다. 많이 다루지 않아 아쉬워하던 알고리즘을, 개발 공부를 하고 커리어를 쌓으면서 실컷 다룰 수 있게 되겠다. 소원 성취한 셈이네 ㅋㅋㅋ 좋다!