Javascript_Conditionals

Conditionals 

 

prompt()에 대해 알아보자.

prompt는 구식 기술이여서 어떤 브라우저는 이를 차단하기도 한다.

 

const age = prompt("type your age", "age?");

console.log(age)

 

prompt는 2개의 파라미터를 받는데, 첫 번째는 안내 문구, 두 번째는 입력칸에 default로 적힌 문구를 기입하기 위함이다. 첫 번째 파라미터만 필수로 넣으면 된다. 

 

HTML에서 실행하면 아래와 같은 화면이 뜬다.

 

나이를 88이라 넣었다.

 

개발자도구에 prompt로 88을 age값으로 받은 뒤 호출했다.

데이터 타입 확인

const age = prompt("type your age", "age?");

 

console.log(typeof age);

 

typeof 함수로 나이의 데이터 타입을 출력하는 함수를 작성했다.

 

결과는..

 

숫자를 prompt의 input에 넣었음에도 불구하고 string이라는 데이터타입이 나왔다. 아마도 prompt에 넣는 데이터는 모두 string으로 간주하는 것으로 판단된다. 

 

우리는 이후 input하는 나이에 따라 다른 명령어를 출력하는 조건문(conditionals)을 만들 예정이다. 이를 위해서는 input 나이 값이 string값이 아닌 숫자값이 나와야 한다. 따라서 input 값을 string에서 숫자 값으로 바꾸는 함수인 parseInt 를 사용해주자. 이는 입력받은 값을 Integer(정수)로 변환해준다.

 

 

//Conditionalls

const age = prompt("type your age", "age?");

 

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

위와 같이 코드를 짜주었다. 그리고 나이 값으로 30을 넣었다. 결과는..?

 

 

자 정상적으로 30이 나왔다. 첫 번째 30과 두 번째 30의 컬러가 다르다. 혹시 데이터 타입이 달라서 그런걸까?

//Conditionalls

const age = prompt("type your age", "age?");

 

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

 

인사이트

그렇다. 크롬 개발자 도구에서 흰색 글씨는 string이고 보라색 글씨는 숫자를 의미한다는 점을 알 수 있다.

숫자가 아닌 텍스트를 입력하면?

그렇다면 만약 prompt에 숫자가 아닌 텍스트를 넣으면 어떻게 될까?

다시 아래 코드로 돌아와서 텍스트를 입력해주자.

//Conditionalls

const age = prompt("type your age", "age?");

 

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

 

 

결과는 secret과 NaN(Not a Number)이 호출되었다. age 변수를 단순 출력한 전자의 경우 secret이 호출되었다. 하지만 parseInt() 함수를 사용하여 age 변수를 정수로 바꿔서 호출하는 두 번째 파라미터의 경우 NaN이 호출되었다. Not a Number 즉 숫자가 아닌 값(텍스트)가 들어갔다는 의미다.

 

이것이 number인가?

parseInt() 함수를 사용하면 숫자인지 숫자가 아닌지(NaN) 알 수 있게 되었다. 여기서 조금 더 나아가면 NaN인지 아닌지를 구별하는 함수를 사용해볼 수도 있다. 그것이 바로 isNaN() 함수다.

 

//Conditionalls

const age = prompt("type your age", "age?");

 

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

 

위 함수는 입력받은 age 변수를 parseInt() 함수로 변수를 정수 값으로 바꾼다. 그리고 그 값이 NaN인지 아닌지 여부를 출력한다. 왜냐하면 변수에 string이 있을 경우 정수로 바꾸지 못하여 NaN이 될 수 있기 때문이다.

 

 

20을 넣으니 isNaN이 false로 나타났다. NaN(Not a Number)는 숫자가 아니냐?라고 묻는 함수인데 결과로 false가 나왔으니 이것은 숫자라는 의미다. NaN은 boolean을 반환하는 것을 알 수 있다.

 

그렇다면 숫자가 아닌 텍스트를 넣으면 어떻게 될까?

 

 

위와 같이 isNaN 숫자가 아니냐는 물음에 true가 반환되었다. 숫자가 아니라는 말이다. 왜냐하면 “I don’t know”는 string이기 때문이다.

 

위 조건문을 잘 사용하면 나이에 따라 다른 메시지를 출력하는 구문을 작성할 수 있다.

 

const age = parseInt(prompt("What is your age?"));

 

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

    console.log("Please write a real positive number");

} else if (age < 18) {

    console.log("Kids. Get of here.");

} else if (age>= 18 && age <= 50) {

    console.log("here you go");

} else if ( age > 50 && age <= 80){

    console.log("Sir. You'd better exercise.")

} else if (age > 80) {

    console.log("Sir. Here you are");

}

 

여기서 &&는 and의 의미다. 구글시트에서는 &로 활용하지만 JS에서는 &&로 사용한다. 반대로 ||는 or을 의미한다. 

 

} else if (age === 100) {

    console.log("You lived about 1centuray")

}

 

이상, 이하, 초과, 미만 외 같은 경우의 조건도 넣을 수 있다.

 

‘===’를 사용하면 same의 의미다. not same의 의미는 어떻게 표현할까? ‘!==’로 표현한다.

왜 ‘=’는 3개나 들어가는 것일까?

 

자, 지금까지 Javascript의 기본적인 개념과 문법을 익혔다. 이제  JAVASCRIPT를 활용해서 HTML, CSS와 함께 소통을 해볼 수 있겠다.