05 Condition 조건문 연습하기

 

 

조건문 ( Condition )

 

 

 

Practice 1  음주 가능 연령 측정기

 

 

이번에 만들 것은 음주 가능 연령 측정기를 간단하게 구현해볼 것이다.

 

브라우저 팝업창을 통해 질문을 통해 답을 구할 수 있는 필드를 구현할 수 있다.

간단한 입출력 구문이 가능한 것을 활용하여 구현해보자.

prompt();라는 명령어를 사용해볼 것이다.

그리고 데이터 타입을 string =>> number로 바꾸는 작업을 해보고,

if / else로 경우에 따라 다른 실행이 가능하도록 해보자.

 

const age = prompt("How old are you?");

console.log(typeof age);

console.log(age, parseInt(age));

 

먼저 prompt();를 통해 팝업창을 띄워 "How old are you?"라는 질문과 답변 입력 필드를 생성해준다

그러면 입력 필드에 입력한 값이 age에 할당이 되고, 

console.log를 통해 age 값의 데이터 타입을 먼저 보여주고,

age 값과 함께 문자로 되어있던 값을 숫자로 바꿔서 보여준다.

 

*prompt(); 브라우저 팝업에 메시지를 보여주고, 입력 필드를 넣을 수 있는 방법

*typeof : 데이터의 타입을 확인하는 방법

*parseInt : 데이터 타입을  숫자로 바꾸는 방법

 

 

브라우저에서 실행하면 다음과 같은 메시지 창이 뜰 것이다.

 

여기에 숫자를 입력하거나 문자를 입력할 수 있을 것인데,

숫자를 입력하면 string이라고 뜰 것이며,  문자를 입력한다면 NaN이라고 출력할 것이다.

 

*NaN : Non a Number

 

입력한 값을 숫자로 바꿔주라고 했는데, 이 원래 입력한 형식 자체가 숫자로 인식되지 않으며, 다른 것으로 인식되므로

바꿀 수 없다고 표현하는  것이라고 보면 되겠다.

 

 

 

1. 문자를 입력하면 아래와 같이 출력할 것이다.

2. 숫자를 제대로 입력했을 때는 아래와 같이 출력할 것이다. 그중 첫 번째 12는 string임을 색으로 구분하고 있다.

 

위 결과물을 보면 문자를 넣어도 숫자를 넣어도 "string"이라고 타입을 알려주고 있다.

그렇다면 저 보라색 숫자는 숫자로 바뀌었지만 그에 할당한 age라는 변수는 사실상 숫자가 아닐 수도 있는 것이다.

좀 더 정확히 바꿔주기 위해 parseInt()의 위치를 상단으로 옮겨서 prompt() 함수에 씌우자.

 

const age = parseInt(prompt("How old are you?"));

console.log(age, typeof age);

이렇게 하면 정확히 age가 무엇으로 바뀌었는지 확인이 가능해진다.

 

 

이제 숫자라고 명확히 타입을 알려주고 있다.

 

그럼 구체적으로 숫자를 입력하지 않았을 때,

숫자가 아니라면 아니라고 알려주고 다시 입력하도록 하고, 

숫자가 맞다면 계속 진행되도록 해주면 되겠다.

 

여기에 조건문( Condition)인  if / else를 사용할 것이다.

if (a) { 

   ... A

}

else {

B

}

 

>> 만약 a = true 라면, A를 실행하고, 아니라면 B를 실행해라.

 

 

그래서, 입력한 데이터가 숫자가 아니라면 (isNaN = true) >  "Insert a Number please."라고 출력하고,

숫자가 맞다면 (isNaN = false) > "Thank you enough"를 출력하라고 한다.

 

 

const age = parseInt(prompt("How old are you?"));

if (isNaN(age)){

    console.log(age, typeof age,   "Insert a Number please.");

}

else {

    console.log(age, typeof age, "Thank you enough");

}

 

1. 문자를 입력했더니 아래와 같이 NaN이라고 나오고, 데이터 타입은 숫자로 바뀌어져 있으며, 숫자를 입력하라는 메시지까지 출력하고 있다. 입력한 것은 문자였고, 그걸 parseInt()는 타입만 숫자 형식으로 바꿨으며, 실제 데이터는 숫자로 바뀔 수 없는 데이터였기 때문에 NaN이라는 결괏값을 출력하고 있다고 설명할 수 있겠다.

 

2. 숫자를 입력했더니, 입력한 숫자가 표시되고, 메시지도 함께 보여주고 있다.

 

 

 

그럼 이제 3가지 경우의 수에 대해서 만들어보자.

① 숫자를 입력하지 않았다면  >> "Please insert a number"를 출력

② 19세 이하라면  >> "You are not enough to drink alcohol."을 출력

③ 그렇지 않다면 >> "You can drink alcohol"을 출력

 

const age = parseInt(prompt("How old are you?"));

if (isNaN(age)){

    console.log(age, typeof age,   "Insert a Number please.");

}

else if (age < 19){

    console.log(age, typeof age, "You are not enough to drink alchol.");

}

else {

    console.log(age, typeof age, "You can drink alchol.");

}

 

 

자, 그럼 두 가지 조건일 때는 어떨까?

우리나라 청년의 범위는 19세 이상 34세 이하이다. 즉, 19세 포함부터 34세 포함까지 이다.

수학 기호로 보자면 18 <= age <= 35라고 표현할 수 있겠다. 

청년들에게는 열심히 음주가무를 즐기라고 해야겠다.

 

 

const age = parseInt(prompt("How old are you?"));

if (isNaN(age)){

    console.log(age, typeof age, "Insert a Number please.");

}

else if (age < 19){

    console.log(age, typeof age, "You are not enough to drink alchol.");

}

else if (age >= 19 && age <=34){

    console.log(age, typeof age, "You can enjoy alchol & dance world.");

}

else {

    console.log(age, typeof age, "You can drink alchol.");

}

 

* &&  : 교집합 : 둘 다 만족시켰을 때만 true  : true * true = true 

* ||   : 합집합 : 둘 중 하나만  만족시켜도 true : true + false = true

 

그래서 19 이상 34 이하를 표현한 식이

age >=19 && age <=34라고 된 것이다.

 

 

 

이런 식으로 조건은 계속 추가할 수 있다.

그럼 이번에는 합집합 (||)을 사용하는 차원에서 하나 더 추가해보자.

위에 숫자가 아닐 경우 숫자를 입력하라고 처음에 만들었는데, 

여기에 음수를 입력했을 경우도 포함해서, "양의 정수를 입력하라"라고 바꿔줘야겠다.

따로 else if를 만들지 않고 해당 구문에 추가시켜서 만들어보자.

 

const age = parseInt(prompt("How old are you?"));

if (isNaN(age) || age<0){

    console.log(age, typeof age, "Insert a real positive Number please.");

}

else if (age < 19){

    console.log(age, typeof age, "You are not enough to drink alchol.");

}

else if (age >= 19 && age <=34){

    console.log(age, typeof age, "You can enjoy alchol & dance world.");

}

else {

    console.log(age, typeof age, "You can drink alchol.");

}

 

 

 

 

이 정도면  조건문 ( condition )에 사용되는 if와 else if , else에 대해서 이해했을 거라 생각된다.

더불어 &&, || 을 사용해서 충분조건에 대해서 and , or를 사용하는 방법도 살펴봤다.

 

 

 

 

BR. h