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

5-2. 비교문

이번에도 비교문 if 에 대해서 알아보겠습니다.
비교문 if에 소괄호에 논리값을 넣어서 조건에 따라 대괄호 내용이 실행되도록 하였었습니다.
그러면 복습하는 차원에서 아래문제를 풀어보도록 합니다.

* 문제 : 5-2-1
"변수이름 number를 문자형태의 숫자를 만들어준 뒤에 크기가 10이 넘을경우 10보다 크다고 알려주세요."

변수를 number를 prompt를 사용하여 값을 대입하여도 괜찮습니다.
직접 문제를 풀어본 뒤에 아래 정답을 살펴보아 주세요.
..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

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

*답

var number = "20";
if(Number(number) > 10){
    console.log('number의 값이 10보다 큽니다 : ' + number);
}

이정도의 문제는 이제 쉽군요~

 

문자와 숫자와의 비교에 주의하여야합니다.
자바스크립트는 매우 똑똑한 언어이므로 굳이 Number라는 함수를 사용하지 않아도 스스로 비교를 해 주지만,
가급적이면 같은 형태의 데이터(자료)를 맞추어 준 뒤에 비교하는 습관을 길러야 합니다.
if문의 대괄호에는 이어서 길게 내용을 쓸 수 있다고 하였습니다.

if(10 > 5){
    var text = "abcd";
    var text2 = text + text;
    console.log(text2);
}

if문을 사용하다 이런경우가 발생할 수 있습니다.
입력된 데이터가 10보다크면 "큰 숫자", 10보다 작으면 "작은숫자"를 출력하도록 입력하여봅니다.
우리가 여태껏 배운 방식에 의하면 if를 2번사용해서 비교를 해 주어야 합니다.

var number = 20;
if(number > 10){
    console.log("큰 숫자");
}
if(number < 10){
    console.log("작은 숫자");
}

 

자바스크립트에서는 if라는 비교하는 문구가 많아지면 프로그래머가 입력해야되는 조건의 수가 많아지고 알아보기 어려우므로 이를 조금 더 쉽게 하기위해서 또 다른 기능을 제공합니다.
위 내용을 바꾸어 보겠습니다.

var number = 20;
if(number > 10){
    console.log("큰 숫자");
} else {
    console.log("작은 숫자");
}

 

처음보는 기호가 나타났습니다. 바로 else라는 명령어 입니다.
else는 조건문 if의 대괄호 끝 부분에서 사용되며, if조건 이외의 행동을 의미 합니다.
if에서의 조건의 반대인 경우를 의미합니다.
이렇게 될 경우 조금 더 내용이 간단해지고 알아보기 쉬워지는 장점이 있습니다.
if에서 반대의 행위가 필요한 경우에만 사용하여야 합니다.

다른문제를 풀어보도록 하겠습니다.
* 문제 : 5-2-2
"변수 text에 ab라는 값을 대입합니다. 조건문을 활용하여 ab의 길이가 1보다크고, ab값의 0번째 텍스트가 a면 성공을, b면 실패를 출력하여주세요."

이번문제에서도 다양한 문자와 관련된 함수를 사용하게 되어있습니다.
예전내용을 잘 생각하여 접근하여보세요.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

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

*답

var text = "ab";
if(text.length > 1){
    if(text.indexOf('a') == 0){
        console.log('성공');
    } else {
        console.log('실패');
    }
}

비교문이 조금 더 간결 해 졌습니다.

오랜만에 indexOf라는 함수를 사용하여 보았습니다. 
기존에 살펴보았던 함수를 잊지말고 사용할 줄 알아야합니다.
한가지 문제를 더 살펴보겠습니다.

* 문제 : 5-2-3
"변수 number의 값이 10보다크면 5를곱하고, 10보다 작으면 3을곱해주세요. 곱한 숫자를 새로운변수에 담아 맨 마지막에서 1번만 출력하도록 작성하여주세요."

이번문제의 핵심은 console.log 명령어가 1번만 나와야 한다는 점 입니다.
변수를 사용하여 접근 하여야 합니다.

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

..

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

*답

var number = 10;
var number2 = 0;
if(number > 10){
    number2 = number * 5;
} else {
    number2 = number * 3;
}
console.log('결과값 입니다 : '+number2);

변수의 선언을 맨 위에서 해 주고 조건에 따라 대입하게 하였습니다.

 

number2라는 변수를 미리 선언하였습니다.
그리고 if와 else를 통해서 조건에 따라 곱하기 연산을 한 이후에 number2에 대입하였습니다.
그리고 마지막에 출력을 통하여 계산된 값이 나오도록 하였습니다.

여기까지 else를 활용한 문제와 내용에 대해서 살펴보았습니다.
그런데, 조건문을 살펴보면 if조건에 if조건이 사용되고있음을 알 수 있습니다.
조건이 간단한 경우는 상관이 없지만 앞서 살펴본 것 처럼 여러조건을 가질 수 있는 상황이 존재합니다.
예를들어 아래와 같은 조건이 있다고 하여봅니다.
"가격이 1000원미만이면서, 자동차모양의 장난감 이면서, 빨강색인것"

그렇다면 우리는 앞에서 배운것 처럼 if조건을 3번이나 사용해서 기능을 만들어야 합니다.
이처럼 조건이 여러개면 매번 복잡하게 if조건을 여러개 사용해야 되는 것 일까요?
해당 문제에 대해서는 다음번에 살펴보도록 하겟습니다.
위 내용에 대해서는 반복을 통해서 연습하여야 합니다.