웹 프로그래머(웹 개발자)가 되어보자 - 13

5-3. 비교문

이어서 비교문 if에 대해서 계속해서 알아보겠습니다.
우리는 if 조건문에 소괄호에 논리값을 대입하거나 논리연산자로 만들어진 논리값을 넣어서 비교문을 사용했습니다.
조건은 항상 1개였으며 아래처럼 사용하였습니다.

if(true){
    console.log('true 입니다.');
} else {
    console.log('false 입니다.');
}

 

하지만 대부분의 일상에서 우리는 여러개의 조건을 만나게 됩니다.
여러개의 조건인 경우에는 우리는 if 조건문 내부에 if 조건문을 사용하였습니다.
복습하는 차원에서 문제를 한번 풀어보겠습니다.

* 문제 : 5-3-1
"변수 text에 아무런 문자를 대입하여주세요. 변수 text가 ab를 포함하고있으면서 길이가 2이상인 경우 '안녕~' 을 출력하여주세요."

이전 문제와 비슷한 유형입니다.
..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.

* 답

var text = "abcd";
if(text.indexOf('ab') > -1 ){
    if(text.length > 2){
        console.log('안녕');
    } else {
        console.log('실패');
    }
}

첫번째 조건문 다음에 내부의 조건문이 동작했습니다.

 

당연히 include를 사용할 줄 알았는데 indexOf가 사용되었습니다. 
indexOf를 통해서 ab의 시작길이가 음수가 아니면 해당 값이 존재함을 우리는 알 수 있습니다.
왜냐하면 ab가 존재하면 음수가 아니라 최소 0이 나오기 때문 입니다.
물론 include를 사용해도 상관없습니다.
다양한 방법을 통해서 접근하는 것이 좋습니다.

아무튼, 우리는 if 조건을 2번사용하였습니다.
다양한 조건이 존재하는 경우 이렇게 매번 if 조건문을 조건 수에 맞추어서 사용한다면 작성해야될 내용이 너무 많아집니다.
그리하여 자바스크립트는 멋진 기능을 제공합니다.
위 내용을 쉽게 바꾸어 보겠습니다.

var text = "abcd";
if(text.indexOf('ab') > -1 && text.length > 2){
    console.log('안녕');
} else {
    console.log('실패');
}

 

처음보는 기호가 나타났습니다. && 기호는 "논리 AND"를 의미하며 왼쪽과 오른쪽 둘다인 경우를 의미합니다.
"and 연산자" 라고도 불리워 집니다.
내용이 조금 어려우므로 바로 예제를 통해 살펴보겠습니다.

console.log(true && true);
console.log( 5>3 && 'aa' == 'aa');
console.log( 5<3 && 'aa' == 'aa');

둘다를 의미하는 && 입니다.

 

첫번째 내용은 왼쪽도 true이면서 오른쪽도 true인 경우입니다. 둘다 참이므로 true를 반환합니다.
두번째 경우도 마찬가지 입니다. 
그런데 세번째 경우는 3은 5보다 클 수 없으므로 false가 나오게되고, 오른쪽 값이 true이지만 둘다 true가 아니므로 false값이 나오게 됩니다.

이번엔 if를 통한 예문을 살펴보겠습니다.

var text = "abcd";
if(text == 'abcd' && text != 1234 && text.length > 2){
    console.log('안녕2');
}

첫번째이면서, 두번째 이면서, 세번째 이면서의 의미입니다!

 

무려 3개의 조건이 단 한번으로 끝이났습니다.  
변수 text가 abcd이면서 숫자 1234가 아니면서, 길이값이 2보다 크면이라는 3개의 조건을 등록 해 보았습니다.
이처럼 && 기호를 사용하면 조건을 계속해서 이어갈 수 있습니다.

 

자바스크립트는 또한 둘중 1개 라는 기능도 제공합니다.
기호는 || 을 사용하며 "논리OR"이라고 합니다. 왼쪽 오른쪽 둘 중 1개만 참이더라도 true입니다.
"or 연산자" 라고도 불리워 집니다.
기호는 대괄호 오른쪽 닫힘기호 "}" 옆에 있습니다. 
역시나 예제를 통해 바로 살펴보겠습니다.

console.log(true || false);
console.log( 5>3 || 'aa' == 'aa');
console.log( 5<3 || 'aa' == 'aa');

1개만 참이면 됩니다.

 

둘중 한개만 true여도 true값을 반환합니다. 
첫번째 내용은 앞이 true이므로 뒤의 false는 아에 참고하지도 않습니다.
두번째 내용 또한 맨 앞의 조건이 true이므로 뒤의 aa가 같은지 비교를 하지 않습니다.
세번째 내용은 처음 5<3이 거짓이므로 다음 내용인 aa가 같은지를 확인합니다. aa가 같은지에서 true이므로 true를 반환합니다.

당연히 조건이 3개이더라도 1개만 참이면 되며, 4개, 5개..몇십개더라도 1개만 참이면 됩니다.

 

그렇다면 여기서 문제를 한번 풀어보겠습니다.
if조건은 한번만 사용 하여야 합니다.

* 문제 : 5-3-2
"변수 number에 아무숫자값을 대입하여주세요. number의 숫자가 5이거나 30보다 큰 경우 해당 숫자값과 함께 성공이라는 내용을 출력하여 주세요."

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.

* 답

var number = 39;
if(number == 5 || number > 30){
    console.log('number값 입니다 : '+number);
}

둘중 1개만 참이면 됩니다.

이번 문제는 그렇게 어렵지 않습니다.
5이거나 30보다 큰 경우에 대해서 간단하게 사용하여 보았습니다.

이해를 위해서 추가로 문제를 한번 더 풀어보도록 하겠습니다.

 

* 문제 : 5-3-3
변수 password를 만들어 줍니다. 해당 변수에 임의의 문자를 넣어줍니다. 
ok 변수에 abcd1234! 문자값을 넣어줍니다. 
입력된 password의 길이가 8보다 길면서 특수문자 느낌표!를 포함하고 있어야 ok와 비교하도록 합니다.
ok변수와 같으면 "로그인성공" 이라는 내용을 출력하게 합니다. 다른경우 "비밀번호 오류"를 출력하도록 합니다.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.

* 답

var password = "aaaaa";
var ok = 'abcd1234!';
if(password.length > 8 && password.indexOf('!')> -1 && password == ok){
    console.log('로그인 성공');
} else {
    console.log('비밀번호 오류');
}

값이 잘 나오는 것을 볼 수 있습니다.

 

if와 else를 통해서 성공인 경우와 오류인 경우를 분리하여주었습니다.
마찬가지로 and연산을 통해서 조건을 이어가면서 비교하도록 하였습니다.

다시 문제입니다.

 

* 문제 : 5-3-4
변수 number를 만들어 줍니다. 해당 변수에는 임의의 숫자를 넣어줍니다.
숫자가 10보다 크거나 같으면서 20보다 작은경우 "안녕"을 출력하여주고,
70인경우에는 "HI"를 출력하여주며, 
100보다 크거나 3보다 작거나 같은 경우에는 해당 number를 3으로 나눈 값을 출력하여 줍니다.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

아래는 위 문제에 대한 답 입니다.

* 답

var number = 19;
if(number >= 10 && number<20){
    console.log('안녕');
}
if(number == 70){
    console.log('HI');
}
if(number > 100 || number <=3){
    console.log(number/3);
}

if 조건문을 3번 사용하였습니다.

 

많은 if가 필요한 조건이였습니다. 그런데 만약에 저 위의 경우가 아닌경우에 출력을 하려면 어떻게 해야되는 것 일까요?
3개의 if가 아닌경우를 쓰려면 엄청난 and연산과 or연산을 통해 조건을 이어가야 하는 것 일까요?

우리는 else를 배운적이 있습니다. else는 if가 아닌경우를 의미합니다.
이러한 else를 활용하면 위 문제를 쉽게 해결 할 수 있습니다.
위 if조건의 3가지 경우가 아니면 "아닙니다"를 출력하여 보겠습니다.

var number = 39;
if(number >= 10 && number<20){
    console.log('안녕');
}
else if(number == 15){
    console.log('HI');
}
else if(number > 30 || number <=3){
    console.log(number/3);
}
else {
    console.log('아닙니다.');
}

if 다음에 비교할 조건이 있으면 else if를 사용 합니다.

 

if앞에 else가 붙었습니다. 

else if는 if 다음에 확인을 이어서 할 수 있는 자바스크립트의 문법입니다.
if조건 다음에 확인할 조건을 의미합니다.
else if는 if앞에 또는 else뒤에는 쓸 수 없으며 오직 if조건 뒤에만 쓸 수 있습니다.

if 조건 다음에 다른 조건을 이어서 확인하도록 정의하려면 else if를 사용하여야 합니다.
만약 if 다음에 if를 그대로 쓰게되면 이어서 확인하는 개념이 되지 않습니다.
이해를 위해 아래 예문을 살펴보겠습니다.
먼저 if를 활용한 조건문 입니다.

var number = 1000;
if(number > 10){
    console.log('안녕1');
}
if(number > 100){
    console.log('안녕2');
}

2번 출력됩니다.

 

"안녕1"과 "안녕2"가 2번출력 되었습니다. 
위 내용의 조건과 두번째 if 조건문을 else if로 바꾸어 보겠습니다.

var number = 1000;
if(number > 1000){
    console.log('안녕1');
}
else if(number > 100){  
    console.log('안녕2');
}

1번만 출력됩니다.

 

"안녕2"만 출력이 되었습니다.
else if 는 처음 실행하는 if 조건문에 해당되는 내용이 없으면 확인을 시도합니다.
이어가면서 확인이 필요한 경우에는 이처럼 else if를 사용하면 되겠습니다.

이번장에서는 많은 내용을 다루어 보았습니다.
정리를 하여보면
1. and연산, or연산을 활용한 조건을 붙여서 if 조건문을 만들 수 있습니다.
2. else if를 활용하여 if조건문 다음에 할 동작을 정의할 수 있습니다.


if와 else if를 활용하여 다양한 조건을 만들어서 연습 하여야 합니다.
다음번에는 다른형태의 조건문에 대해서 살펴 보겠습니다.